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

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

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

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

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

密码保险箱可以在用户需要输入一个新密码时，自动生成一个高强度的密码。用户选择使用生成的强密码时可以将这个密码填充到新密码输入框。

触发条件及注意事项：

• 已设置锁屏密码并且开启密码保险箱自动保存和填入账号和密码开关。
• 界面中必须同时存在type为InputType.USER_NAME（表示用户名输入框）和InputType.NEW_PASSWORD（表示新密码输入框）的TextInput输入框组件。
• TextInput组件的enableAutoFill属性的值为true（默认true）。
• 用户在界面中首次点击新密码输入框时触发强密码弹窗，用户点击使用密码按钮可以将弹窗中显示的强密码自动填充到新密码输入框。
• 开发者可以根据一定的规则和建议指定强密码生成规则。

注册

示例代码如下：

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: '新密码' })
        .enableAutoFill(this.enAbleAutoFill)
        .type(InputType.NEW_PASSWORD)
        .passwordRules('begin:[upper],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;
            }
            console.info('Invoke pushUrl succeeded.');
          })
        })

      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;
            }
            console.info('Invoke pushUrl succeeded.');
          })
        })
    }
  }
}

修改密码

示例代码如下：

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;
            }
          })
        })
    }
  }
}