鸿蒙开发中创建手势登录

话不多说 直接上代码 

引入文件解释：

headElement  是我自己封装的头部组件 可直接删除  

PreferencesUtil 是使用的第三方库 网址 https://ohpm.openharmony.cn/#/cn/detail/@pura%2Fharmony-utils  可自行去安装使用 

不需要用第三方首选项的话可删除相关代码即可  

import router from '@ohos.router';
import { headElement } from '../common/headElement';
import promptAction from '@ohos.promptAction'; //提示弹框
import { PreferencesUtil} from '@pura/harmony-utils';
/**
 * 手势密码设置页面
 */
@Entry
@Component
struct SettingGesturePage {

  /**
   * PatternLock组件控制器
   */
  private patternLockController: PatternLockController = new PatternLockController()
  /**
   * 用来保存提示文本信息
   */
  @State message: string = '请设置手势密码'
  @State password: Array<number> = []
  @State value: string = '安全设置'
  showToast(value: string) {
    promptAction.showToast({
      message: value,
      duration: 1000,
      bottom: 400
    });
  }
  build() {

    Column({ space: 10 }) {
      headElement({value:this.value})
      Image($r('app.media.per')).width(60).height(60).margin({top:30})

      // 提示
      Text('为了您的账户安全,请设置手势密码')
        .fontSize(16).margin({top:20})
      // 手势组件
      PatternLock(this.patternLockController)
        .selectedColor('#0A59F7')
        .sideLength(300)
        .circleRadius(15)
        .pathStrokeWidth(15)
        .autoReset(true)
        .margin({ top: 30, bottom: 30 })
        .onPatternComplete((input: Array<number>) => {
          // 根据实际需求修改条件
          if (input === null || input === undefined || input.length < 4) {
            this.showToast('手势不能小于4个')
            this.patternLockController.reset()
            return
          }
          if (this.password.length > 0) {
            if (this.password.toString() === input.toString()) {
              this.password = input
              console.log('密码',this.password.toString())
              PreferencesUtil.putSync("gesturePass", this.password);
              this.showToast('设置成功')
              // 保存密码
              setTimeout(()=>{
                router.back();
              },1000)

            } else {
              this.message = '密码与上一次不一致，请重新输入'
              this.patternLockController.reset()
            }
          } else {
            this.password = input
            this.message = '再次输入手势密码'
            this.patternLockController.reset()
          }
        })
      Text(this.message)
        .fontSize(16).margin({top:20})
      Blank()
        .layoutWeight(2)
    }
    .width('100%')
    .height('100%')
  }
}