鸿蒙应用开发：1.设置手势密码登录

1.先上效果图

2.设置手势页面代码

/**
 * 手势密码设置页面
 */
@Entry
@Component
struct SettingGesturePage {

  /**
   * PatternLock组件控制器
   */
  private patternLockController: PatternLockController = new PatternLockController()
  /**
   * 用来保存提示文本信息
   */
  @State message: string = '请绘制解锁图案'
  /**
   * 用来保存手势密码
   */
  @State password: Array<number> = []

  build() {
    Column({ space: 10 }) {

      Blank()
        .layoutWeight(1)

      // 提示
      Text(this.message)
        .fontSize(16)
        .fontColor(Color.Red)

      // 手势组件
      PatternLock(this.patternLockController)
        .sideLength(300)
        .circleRadius(15)
        .pathStrokeWidth(15)
        .autoReset(true)
        .margin({ top: 30, bottom: 30 })
        .onPatternComplete((input: Array<number>) => {
          // 根据实际需求修改条件
          if (input === null || input === undefined || input.length < 5) {
            this.message = '密码长度需要大于5'
            return
          }
          if (this.password.length > 0) {
            if (this.password.toString() === input.toString()) {
              this.password = input
              // 保存密码
              this.savePassword()
            } else {
              this.message = '密码与上一次不一致，请重新输入'
              this.patternLockController.reset()
            }
          } else {
            this.password = input
            this.message = '再次输入手势密码'
            this.patternLockController.reset()
          }
        })

      Blank()
        .layoutWeight(2)
    }
    .width('100%')
    .height('100%')
  }
  /**
   * 保存密码，将手势密码发送到后端保存
   */
  savePassword() {
    // 最终的字符串密码
    let defaultPassword:string = this.password.toString()
    /**
     * 然后根据实际需要是否对字符串密码进行加密，把密码传到后端服务进行保存即可
     */
    // todo 调取后端接口代码。。。。
  }
}

3.手势登录页面代码

/**
 * 手势密码登录页面
 */
@Entry
@Component
struct GestureLoginPage {
  private patternLockController: PatternLockController = new PatternLockController()
  /**
   * 提示信息
   */
  @State tips: string = ' '
  /**
   * 密码数组
   */
  @State passwordArray: Array<number> = []
  /**
   * 字符串密码
   */
  @State password: string = ''

  aboutToAppear() {
  }
  build() {
    Column() {

      Blank()
        .layoutWeight(1)
      // 提示
      Text(this.tips)
        .fontSize(16)
        .fontColor(Color.Red)
        .margin({ top: 20 })

      // 手势组件
      PatternLock(this.patternLockController)
        .sideLength(300)
        .circleRadius(15)
        .pathStrokeWidth(15)
        .autoReset(true)
        .margin({ top: 20, bottom: 50 })
        .onPatternComplete((input: Array<number>) => {
          if (input === null || input === undefined || input.length < 5) {
            this.tips = '密码长度需要大于5'
            return
          }
          this.passwordArray = input
          /**
           * 根据实际业务调用登录方法/或接口
           */
          this.doGestureLogin()
        })

      Blank()
        .layoutWeight(1)


    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)

  }
  /**
   * 手势登录接口
   */
  doGestureLogin() {
    this.password = this.passwordArray.toString()
    // todo 登录方法业务逻辑
  }
}