在鸿蒙中身份校验的手势密码的实现

在harmony中它提供了默认的组件PatternLock();

这个就能直接显示九宫格密码验证

并且他有两个主要的回调事件

.onDotConnect密码输入选中宫格圆点时触发该回调

.onPatternComplete:密码输入结束时触发该回调

//如代码实现

typescript 复制代码
PatternLock()
  .sideLength(320)// 宽高
  .circleRadius(12)// 圆点半径
  .pathStrokeWidth(10)// 线宽度
  .regularColor('#ffd9d9d9')// 未选中圆点色
  .activeColor('#800a59f7')// 经过圆点色
  .selectedColor('#ff0a59f7')// 选中圆点色
  .pathColor('#cc0a59f7')// 线颜色
  .onDotConnect(() => {
    // 密码输入选中宫格圆点时触发该回调
  })
  .onPatternComplete((input: number[]) => {
    // 密码输入结束时触发该回调
  })
typescript 复制代码
// 手势组件控制器
private patternLockController: PatternLockController = new PatternLockController()

setErrorMessage(message: string) {
  this.errorMessage = message
  this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)
}

clearErrorMessage() {
  this.errorMessage = ''
  this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)
}

// 重置图形密码和临时密码
resetPattern() {
  // 每次输入结束后,自动清空界面图形
  this.timeoutID = setTimeout(() => {
    // 重置图形密码
    this.patternLockController.reset()
    // 重置临时密码
    this.inputPassword = []
  }, 1000)
}

// 手势密码输入完成
onPatternComplete(input: number[]) {
  // 保存临时密码
  this.inputPassword = input
  // 1. 校验长度,输入长度小于 4,提示重新输入
  if (this.inputPassword.length < 4) {
    // 设置错误提示
    this.setErrorMessage('手势密码长度不能小于4位,请重新输入')
  } else {
    // 清空错误提示
    this.clearErrorMessage()
    // 2. 长度符合规范,同时判断是否为首次输入
    if (this.firstPassword.length === 0) {
      // 2.1 首次输入,直接保存当前输入的密码
      this.firstPassword = input
    } else {
      // 2.2 非首次输入,需判断两次输入的密码是否相同
      
    }
  }
  // 每次输入结束后,自动清空界面图形
  this.resetPattern()
}

build(){
  PatternLock(this.patternLockController)
  .sideLength(320)// 宽高
  .circleRadius(12)// 圆点半径
  .pathStrokeWidth(10)// 线宽度
  .regularColor('#d9d9d9')// 未选中圆点色
  .activeColor('#800a59f7')// 经过圆点色
  .selectedColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ffff5e5d' : '#ff0a59f7')// 选中圆点色
  .pathColor(this.errorMessage && this.inputPassword.length !== 0 ? '#ccff5e5d' : '#cc0a59f7')// 线颜色
  .onDotConnect(() => {
    // 密码输入选中宫格圆点时触发该回调
    clearTimeout(this.timeoutID)
  })
  .onPatternComplete((input: number[]) => {
    this.onPatternComplete(input)
  })
}
相关推荐
Java 码农21 分钟前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan1 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown1 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh1 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥1 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球1 小时前
css新特性
前端·css
Nicholas681 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙2 小时前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
百分百题库APP2 小时前
江苏安全员 A 证 “安全生产管理” 核心考点
学习·考试·题库·考证
TimelessHaze2 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae