鸿蒙开发进阶（HarmonyOS ）账号密码自动填充

 鸿蒙NEXT开发实战往期必看文章：

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

密码保险箱可以在登录或修改密码时，自动填充已保存的用户名和密码。

触发条件及注意事项：

• 已设置锁屏密码并且开启密码保险箱自动保存和填入账号和密码开关。
• 界面中必须同时存在type为InputType.USER_NAME（表示用户名输入框）和InputType.password（表示普通密码输入框）的TextInput输入框组件。
• TextInput组件的enableAutoFill属性的值为true（默认true）。
• 密码保险箱中已保存过当前应用的用户名和密码。
• 用户在界面中首次点击用户名输入框或密码输入框时触发自动填充弹窗。

登录

示例代码如下：

import router from '@ohos.router';

@Entry
@Component
struct LoginPage {
  @State ReserveAccount: string = '';
  @State ReservePassword: string = '';
  private length: number = 0;

  onBackPress() {
    router.back();
    return true;
  }

  build() {
    Column() {
      Text("账户登录")
        .fontSize(24)
        .fontColor('#000000')
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Start)
        .width('100%')
        .margin({ top: 18 })

      TextInput({ placeholder: '用户名' })
        .opacity(0.6)
        .type(InputType.USER_NAME)
        .placeholderColor(0x182431)
        .width('100%')
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .margin({ top: 32, bottom: 8 })
        .onChange((value: string) => {
          this.ReserveAccount = value;
          this.length = value.length;
        })
        .caretPosition(this.length)

      TextInput({ placeholder: '密码' })
        .type(InputType.Password)
        .placeholderColor(0x182431)
        .width('100%')
        .opacity(0.6)
        .showPasswordIcon(true)
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .onChange((value: string) => {
          this.ReservePassword = value;
        })
        .margin({ bottom: 36 })

      Button('登录', { type: ButtonType.Capsule, stateEffect: false })
        .borderRadius(20)
        .width('100%')
        .height(40)
        .enabled((this.ReserveAccount !== '') && (this.ReservePassword !== ''))
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index', //此处pages/Index为跳转界面地址，请自行修改
            params: {
              src: '账户登录'
            }
          }, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
            console.info('Invoke pushUrl succeeded.');
          })
        })
    }
    .padding({ left: 24, right: 24 })
    .height('100%')
    .width('100%')
  }
}

修改密码

示例代码如下：

import router from '@ohos.router';

@Entry
@Component
struct RegisterPage {
  @State ReserveAccount: string = '';
  @State ReservePassword: string = '';
  @State enAbleAutoFill: boolean = true;
  private length: number = 0;

  onBackPress() {
    this.enAbleAutoFill = false;
    router.back();
    return true;
  }

  aboutToAppear() {
  }

  build() {
    Column() {
      Text('修改密码')
        .fontSize(24)
        .fontColor('#000000')
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Center)
        .width('100%')
        .margin({ top: 18})

      TextInput({ placeholder: '用户名' })
        .opacity(0.6)
        .type(InputType.USER_NAME)
        .placeholderColor(0x182431)
        .width('100%')
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .margin({ top: 32, bottom: 8 })
        .onChange((value: string) => {
          this.ReserveAccount = value;
          this.length = value.length;
        })
        .caretPosition(this.length)

      TextInput({ placeholder: '密码' })
        .type(InputType.Password)
        .placeholderColor(0x182431)
        .width('100%')
        .opacity(0.6)
        .showPasswordIcon(true)
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .onChange((value: string) => {
          this.ReservePassword = value;
        })
        .margin({ bottom: 12 })

      TextInput({ placeholder: '新密码' })
        .enableAutoFill(this.enAbleAutoFill)
        .type(InputType.NEW_PASSWORD)
        .passwordRules('begin:[lower],special:[yes],len:[maxlen:32,minlen:12]')
        .placeholderColor(0x182431)
        .width('100%')
        .opacity(0.6)
        .showPasswordIcon(true)
        .placeholderFont({ size: 16, weight: FontWeight.Regular })
        .onChange((value: string) => {
          this.ReservePassword = value;
        })
        .margin({ bottom: 36 })

      Button('页面跳转', { type: ButtonType.Capsule, stateEffect: false })
        .borderRadius(20)
        .width('80%')
        .height(40)
        .margin({ top: 24 })
        .enabled((this.ReserveAccount !== '') && (this.ReservePassword !== ''))
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index', //此处pages/Index为跳转界面地址，请自行修改
            params: {
              src: '修改密码'
            }
          }, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
          })
        })

      Button('页面跳转(跳转前关闭autofill）', { type: ButtonType.Capsule, stateEffect: false })
        .borderRadius(20)
        .width('80%')
        .height(40)
        .margin({ top: 24 })
        .enabled((this.ReserveAccount !== '') && (this.ReservePassword !== ''))
        .onClick(() => {
          this.enAbleAutoFill = false;
          router.pushUrl({
            url: 'pages/Index', //此处pages/Index为跳转界面地址，请自行修改
            params: {
              src: '修改密码'
            }
          }, (err) => {
            if (err) {
              console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
              return;
            }
          })
        })
    }
  }
}