当前位置: 首页 > article >正文

鸿蒙harmony 手势密码

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 登录方法业务逻辑
  }
}


http://www.kler.cn/a/537603.html

相关文章:

  • 【开源免费】基于SpringBoot+Vue.JS智能学习平台系统(JAVA毕业设计)
  • 【Elasticsearch】分桶聚合功能概述
  • 【远程控制】安装虚拟显示器
  • GrassWebProxy
  • 化学-基础知识一
  • 无人机方位感知器官磁力传感器!
  • MHTML文件如何在前端页面展示
  • 天润融通智能扩写工具如何让AI客服机器人更高效?
  • 【大数据技术】搭建完全分布式高可用大数据集群(ZooKeeper)
  • ip转换相关知识详解
  • ximalaya(三) playUriList值解密--webpack
  • 基于html写一个音乐动态爱心盒子有音乐和导航基本功能实现
  • webpack配置之---output.chunkFilename
  • Effective Python:(12)
  • sqli-labs靶场实录(二): Advanced Injections
  • 适用于 Windows 的 Zed 编辑器的非官方稳定版。通过 scoop 或 pwsh 脚本轻松安装。不隶属于 Zed Industries
  • FPGA的IP核接口引脚含义-快解
  • kamailio的路由模块由lua脚本实现
  • 如何将3DMAX中的3D文件转换为AutoCAD中的2D图形?
  • 后端java工程师经验之谈,工作7年,mysql使用心得
  • java Jvm 双亲委派模型
  • 【Ubuntu】本地部署Deep Seek(深度求索)大模型的保姆级教程 | 详细教程
  • ubuntu文件同步
  • MyCAT 2实现mysql8主从同步读写分离
  • 通讯录管理小程序
  • 【AI大模型】Cherry Studio和Deepseek模型搭建本地知识库+硅基流动API调用+本地ollama模型调用