鸿蒙Harmony实战案例：AutoFill自动填充能力

介绍

本示例使用application/AutoFillRequest，@ohos.app.ability.AutoFillExtensionAbility，application/ViewData，@ohos.app.ability.autoFillManager 等接口，展示了如何使用AutoFill自动填充框架。具体而言实现了如下几点功能：

1.账号和密码的自动保存； 2.账号和密码的自动填充； 3.密码的自动生成并填充； 4.支持账号和密码自动填充后执行开发者的操作。

效果预览

登录页面	注册页面	账号密码选择页面	生成密码页面

使用说明：

1.安装编译生成的hap包，点击图标即可进入应用。

2.进入应用显示登录页面，点击页面中账号输入框，页面发生跳转，新页面显示“选择已保存的账号密码”的标题，选择其中任意账号后，页面会回到登录页面，并且账号密码输入框中分别显示出刚选择的用户名以及其对应的密码。

3.在登录页面点击页面中密码输入框，页面发生跳转，新页面显示“选择已保存的账号密码”的标题，选择其中任意账号后，页面会回到登录页面，并且账号密码输入框中分别显示出刚选择的用户名以及其对应的密码。

4.在登录页面点击"注册"按钮，页面跳转到注册页面，点击注册页面中生成输入框，页面发生跳转，新页面显示"请确认是否生成密码" 的标题，点击"确认"按钮，页面回到注册页面，并且生成密码输入框中显示生成的密码。

5.在登录页面分别手动输入用户名和密码，点击"登录"按钮，页面先显示"登录成功" ，随后自动触发OnSaveRequest回调，立即跳转新页面显示"请确认保存当前账号密码"，点击"确认"，页面回到"登录成功"页面

6.在注册页面，输入账号密码，点击"立即注册"按钮，页面先弹出"注册成功"弹窗，随后触发OnSaveRequest回调，立即跳转到页面显示" 请确认保存当前账号密码"，先点击返回登录页面，再点击"确认"按钮，"注册成功"弹窗先消去，再返回到"登录成功"界面。

工程目录

entry/src/main/ets/ 
|---autofillability
|   |---AutoFillAbility.ts                    // AutoFillExtensionAbility生命周期 
|---autoFillPages
|   |---AutoFillControl.ets                   // USER_NAME/Password类型的autofill控件页面 
|   |---AutoFillNewPassWord.ets               // NEW_PASSWORD类型的autofill控件页面 
|   |---LoginSuccessPage.ets                  // 登录成功页面  
|   |---RegisterPage.ets                      // 注册页面 
|   |---SavePage.ets                          // 保存页面
|---entryability 
|   |---EntryAbility.ts
|---log
|   |---Logger.ets                           // 日志打印              
|---pages
|   |---index.ets                            // 登录页面

具体实现

• 该示例分为五个分支：

  1. USER_NAME类型的AutoFill控件自动填充
  • USER_NAME类型的TextInput控件获焦后拉起AutoFillExtensionAbility，并触发onFillRequest回调，将选择的账号密码返回到textInput组件
  • 源码链接：