鸿蒙开发设置密码保险箱

203 阅读2分钟

使用密码保险箱首先需要设置屏锁密码,之后在设置里搜索并开启密码保险箱功能。(目前暂不支持模拟器)

在注册页进行配置**(保存功能)

image.png

 @State phone: string = ''
 @State password: string = ''
//@State enAbleAutoFill: boolean = true;//注册页不需要填充
 Column({space:10}) {
  TextInput({ placeholder: ('输入账号') })// .padding(0)
    .showUnderline(true)
    .type(InputType.USER_NAME)//输入框的内容为用户名类型
    .width('90%')
    .onChange((value: string) => {
      this.phone = value;
    })
    .margin({top:20})
  TextInput({ placeholder: ('输入密码') })
    .showUnderline(true)
    .width('90%')
    .type(InputType.Password)//输入框的内容为密码类型
    .onChange((value: string) => {
      this.password = value;
    })

}

注意:密码保险箱的自动保存功能只适用用户名和密码保存场景,在界面中必须同时存在用户名密码的TextInput输入框组件。
用户名输入框应设置type属性为InputType.USER_NAME。
密码输入框应设置type属性为InputType.password或InputType.NEW_PASSWORD。
当注册成功时,会触发保存。如图:

image.png

登录

登录(账号密码填充/保存)

@State NEWphone: string = ''
@State NEWpassword: string = ''
@State enAbleAutoFill: boolean = true;//填充状态
onBackPress() {
  this.enAbleAutoFill = false;
}
```
  TextInput({ placeholder: ('输入账号') })
    .showUnderline(true)
    .enableAutoFill(true)
    .type(InputType.USER_NAME)//用户名类型
    .width('90%')
    .onChange((value: string) => {
      this.NEWphone = value
    })
    .margin({top:20})
  TextInput({ placeholder: ('输入密码') })
    .showUnderline(true)
    .width('90%')
    .type(InputType.Password)//密码类型
    .onChange((value: string) => {
      this.NEWpassword = value
    })
}
```

image.png

进行登录操作时,触发

image.png

当选择手动输入时如果是未在密码保险箱中保存的账号密码,登陆成功后会触发保存。
如果是已经存在的账号,登录成功后会触发更新数据。

image.png

修改密码:

设置修改密码时必须至少同时存在手机号的输入框和新密码的输入框。(触发更新)

image.png

@State Account: string = '';
@State Password: string = '';
@State newpassword: string = '';
@State enAbleAutoFill: boolean = true;
onBackPress() {
  this.enAbleAutoFill = false;
  router.back();
  return true;
}
TextInput({ placeholder: '用户名' })
  .type(InputType.USER_NAME)//用户名类型
  .placeholderColor(0x182431)
  .width('100%')
  .placeholderFont({ size: 16, weight: FontWeight.Regular })
  .margin({ top: 32, bottom: 8 })
  .onChange((value: string) => {
    this.Account = value;
 
  })

TextInput({ placeholder: '密码' })
  .type(InputType.Password)//密码类型
  .width('100%')
  .opacity(0.6)
  .showPasswordIcon(true)
  .placeholderFont({ size: 16, weight: FontWeight.Regular })
  .onChange((value: string) => {
    this.Password = value;
  })
  .margin({ bottom: 12 })
TextInput({ placeholder: '新密码' })
  .enableAutoFill(this.enAbleAutoFill)
  .type(InputType.NEW_PASSWORD)//新密码
  .width('100%')
  .showPasswordIcon(true)
  .placeholderFont({ size: 16, weight: FontWeight.Regular })
  .onChange((value: string) => {
    this.newpassword = value;
  })
  .margin({ bottom: 36 })

设置新密码成功后,触发更新,点击更新后保存新密码。

image.png

注:

应用内的一些修改密码功能如果未设置账号的输入框,想要修改密码时更新密码保险箱,需要增设用户名类型的输入框。
用 .enabled(false)将用户名输入框设为不可交互,利用持久化,将账号直接赋值在输入框中。(避免因账号输入错误而导致信息保存有误)

TextInput({ text: this.savephone })

image.png