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

在harmony中它提供了默认的组件PatternLock()；
这个就能直接显示九宫格密码验证
并且他有两个主要的回调事件
.onDotConnect密码输入选中宫格圆点时触发该回调
.onPatternComplete：密码输入结束时触发该回调

//如代码实现

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

流程图

// 手势组件控制器
private patternLockController: PatternLockController = new PatternLockController()setErrorMessage(message: string) {this.errorMessage = messagethis.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)})
}