鸿蒙手势密码

手势密码可通过 PatternLock组件实现

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)
  })
}
相关推荐
gnip42 分钟前
js上下文
前端·javascript
中草药z42 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript