
回复
本文旨在深入探讨华为鸿蒙HarmonyOS Next系统(截止目前 API12)在开发多语言电商平台方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。
在当今数字化时代,安全便捷的账号密码管理对于用户至关重要。鸿蒙 Next 系统的密码保险箱功能,为用户提供了全面的账号密码管理服务,涵盖保存、更新和填充等关键环节。今天,我们将深入探讨其全流程,帮助开发者更好地理解和应用这一功能。
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.');
});
})
}
.width('100%')
.height('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: '新密码' })
.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.');
});
})
}
.width('100%')
.height('100%')
}
}
注册页面中,用户名和新密码输入框属性正确,注册成功跳转页面时,符合条件则触发密码保存提示。
import router from '@ohos.router';
@Entry
@Component
struct ModifyPasswordPage {
@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;
}
console.info('Invoke pushUrl succeeded.');
});
})
}
.width('100%')
.height('100%')
}
}
在修改密码页面,当用户输入新密码并跳转页面,若密码保险箱中有对应账号,将弹出更新提示,用户可选择更新密码。
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.');
});
})
}
.width('100%')
.height('100%')
}
}
登录页面中,满足条件时,用户点击输入框,系统会自动填充已保存的账号密码。
import router from '@ohos.router';
@Entry
@Component
struct ModifyPasswordPage {
@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;
}
console.info('Invoke pushUrl succeeded.');
});
})
}
.width('100%')
.height('100%')
}
}
在修改密码页面,当用户点击用户名或旧密码输入框时,若密码保险箱中有保存的账号密码,系统会自动填充,方便用户修改密码操作。同时,用户输入新密码后,若满足条件,密码保险箱也会相应更新密码记录。
通过以上对鸿蒙 Next 密码保险箱账号密码管理全流程的详细阐述,包括保存、更新和填充功能的触发条件、注意事项及示例代码,我们可以清晰地了解如何在应用中集成这一强大的功能,为用户提供更加安全、便捷的账号密码管理体验。