HarmonyOS NEXT 实现滑动拼图验证码功能

2025-04-10
北京
本文字数：2117 字
阅读完需：约 7 分钟

大家好，我是 V 哥。在 Gitee 上看到一个用 Java 实现的 HarmonyOS 滑动拼图验证码功能，已经太老了，鸿蒙开发推荐使用 ArkTS 语言，V 哥来改造一下。

以下是基于 ArkTS 的实现方案。由于鸿蒙系统的特性差异，这里提供核心功能的实现思路：

// CaptchaComponent.ets - 自定义验证码组件@Componentstruct CaptchaComponent {  private controller: CaptchaController = new CaptchaController()  @State blockPosition: number = 0  @State isVerified: boolean = false  @Link onVerify: (result: VerifyResult) => void
  build() {    Column() {      // 拼图区域      Stack() {        Image($r('app.media.verify_bg')) // 背景图          .aspectRatio(1.78) // 16:9比例                // 拼图缺口        Canvas({ context: this.controller.canvasContext })          .onReady(() => this.drawBlockShape())          .width(this.controller.blockSize)          .height(this.controller.blockSize)          .position({ x: this.blockPosition })      }      .height(300)      .clip(new Rect({ width: '100%', height: '100%' }))            // 滑块控件      Slider({        min: 0,        max: 100,        value: this.blockPosition,        style: SliderStyle.OutSet      })      .blockShade($r('app.graphic.thumb'))      .onChange(value => {        this.handleSliderMove(value)      })    }  }
  private drawBlockShape() {    const ctx = this.controller.canvasContext    ctx.beginPath()    // 绘制拼图形状（示例使用圆角矩形）    ctx.arc(40, 40, 35, 0, Math.PI * 2)    ctx.fillStyle = 'rgba(0,0,0,0.5)'    ctx.fill()  }
  private handleSliderMove(value: number) {    if (this.isVerified) return;        this.blockPosition = value    // 验证逻辑    if (Math.abs(value - this.controller.correctPosition) < 5) {      this.isVerified = true      this.onVerify({ success: true, time: new Date().getTime() })    } else if (value >= 95) {      this.onVerify({ success: false, retry: true })    }  }}
// 使用示例@Entry@Componentstruct VerifyPage {  @State verifyResult: string = ''  private maxRetries: number = 3  @State retryCount: number = 0
  build() {    Column() {      Text(this.verifyResult)        .fontSize(20)        .margin(20)            CaptchaComponent({        onVerify: (result) => this.handleVerify(result)      })            Button('重新验证')        .onClick(() => this.resetVerification())    }  }
  private handleVerify(result: VerifyResult) {    if (result.success) {      this.verifyResult = `验证成功 ${result.time}ms`    } else {      this.retryCount++      if (this.retryCount >= this.maxRetries) {        this.verifyResult = '超过重试次数'      } else {        this.verifyResult = `验证失败，剩余次数 ${this.maxRetries - this.retryCount}`      }    }  }
  private resetVerification() {    this.retryCount = 0    this.verifyResult = ''  }}
// 控制器类class CaptchaController {  canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D()  blockSize: number = 80  correctPosition: number = Math.random() * 250 + 50}
// 类型定义interface VerifyResult {  success: boolean  time?: number  retry?: boolean}

复制代码

实现说明：

组件结构：• 使用 Stack 布局实现拼图层叠效果• Canvas 组件绘制动态拼图形状• Slider 控件实现滑动交互
核心功能：• 随机生成正确验证位置• 滑动偏差容错机制（5px）• 验证结果回调处理• 最大重试次数限制
样式定制：• 通过修改 Canvas 绘制逻辑实现不同拼图形状• 使用资源文件自定义滑块样式• 支持动态修改拼图尺寸和背景图
扩展建议：• 添加动画效果提升交互体验• 实现拼图块拖拽模式（替代滑块）• 集成后端验证接口• 增加行为验证（轨迹分析）

注意事项：

资源文件配置：

// resources/base/profile/main_page.json{  "media": [    {      "name": "verify_bg",      "src": "$media:captcha_bg"    }  ],  "graphic": [    {      "name": "thumb",      "shape": {        "type": "circle",        "radius": 16,        "fillColor": "#FF4081"      }    }  ]}