鸿蒙ArkUI路由跳转+注册登录完整实战博客
一、项目功能介绍本项目基于鸿蒙原生ArkTS开发全程使用基础组件路由router弹窗AlertDialog无自定义陌生代码实现完整流程1. 引导首页点击切换注册/登录页面2. 注册页面两次密码不一致、内容为空 → 注册失败弹窗密码一致 → 携带账号密码跳转主页3. 登录页面可跳转注册页后续匹配注册账号密码完成校验4. 个人主页接收注册路由传参展示登录用户名5. 配置json路由路径解决页面跳转404报错业务规则✅ 注册账号/密码/确认密码不能为空两次密码必须相同否则注册失败✅ 路由注册成功携带账号密码跳转主页✅ 互通注册页可跳登录、登录页可跳注册、首页可双向跳转二、config.json路由页面配置写完项目后添加并且同步文件{ src: [ pages/Index, pages/RouterDemo, pages/RouterRegister, pages/RouterLogin, pages/HomePage ] }三、代码一引导首页 RouterDemo.ets功能入口页面一键跳转注册、登录页面import router from ohos.router; Entry Component struct RouterDemo{ build(){ Column({space:20}){ //跳转到注册页面 Text(没有账号立即注册) .fontSize(22) .fontColor(0x1677ff) .onClick((){ router.pushUrl({ url:pages/RouterRegister }) }) //跳转到登陆页面 Text(已有账号立即登录) .fontSize(22) .fontColor(0x1655dd) .onClick((){ router.pushUrl({ url:pages/RouterLogin }) }) }.width(100%) .height(100%) .padding(12) } }四、代码二注册页面 RouterRegister.ets核心功能双向绑定账号密码、两次密码校验、空值校验、注册失败弹窗、注册成功路由传参跳转主页import router from ohos.router; import AlertDialog from ohos.promptAction; Entry Component struct RouterRegister{ State username:string State password:string State password2:string build() { Column({space:25}){ Image($r(app.media.cover)) .width(120) .height(120) .borderRadius(60) Text(注册) .fontSize(32) .fontWeight(FontWeight.Bolder) Row(){ Text(账号) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.username}) .width(60%) .height(50) .onChange((value:string) { this.username value }) } Row(){ Text(密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password}) .width(60%) .height(50) .type(InputType.Password) .onChange((value:string) { this.password value }) } Row(){ Text(确认密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password2}) .width(60%) .height(50) .type(InputType.Password) .onChange((value:string) { this.password2 value }) } Text(已有账号立即登录) .fontSize(22) .fontColor(0xababab) .onClick((){ router.pushUrl({ url:pages/RouterLogin }) }) Button(立即注册) .width(100%) .height(50) .fontSize(24) .onClick((){ //校验账号密码不为空 两次密码一致 if ((this.username!) (this.password!) (this.password2!) (this.passwordthis.password2)){ //注册成功携带账号密码跳转主页 router.pushUrl({ url:pages/HomePage, params:{ username:{ username:this.username, password:this.password } } }) } else { //注册失败弹窗 AlertDialog.show({ title:注册失败, message:注册的两次密码为空或者不一致${this.username}, confirm:{ value:确定, action:(){} } }) } }) } .width(100%) .height(100%) .padding(15) } }五、代码三登录页面 RouterLogin.ets功能输入账号密码、跳转注册页面、后续匹配注册账号密码做登录校验全程原生组件import router from ohos.router; Entry Component struct RouterLogin{ State username:string State password:string build() { Column({space:25}){ Image($r(app.media.cover)) .width(120) .height(120) .borderRadius(60) Text(登 录) .fontSize(32) .fontWeight(FontWeight.Bold) Row({space:15}){ Text(账 号) .fontSize(26) TextInput({text:this.username}) .width(70%) .height(50) .onChange((val:string){ this.username val }) } Row({space:15}){ Text(密 码) .fontSize(26) TextInput({text:this.password}) .width(70%) .height(50) .type(InputType.Password) .onChange((val:string){ this.password val }) } Text(没有账号立即注册) .fontSize(22) .fontColor(0xababab) .onClick((){ router.pushUrl({ url:pages/RouterRegister }) }) Button(立 即 登 录) .width(100%) .height(50) .fontSize(24) } .width(100%) .height(100%) .padding(15) } }六、代码四个人主页 HomePage.ets功能接收注册页路由传递的账号数据页面加载渲染用户名import router from ohos.router; Entry Component struct HomePage{ State username:string //页面加载获取路由传参 onPageShow(): void { const params router.getParams() as Recordstring,any if (params){ this.username params.username.username } } build() { Column(){ Text(你好 ${this.username}) .fontSize(45) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }七、项目完整流程总结1. 启动进入RouterDemo首页自由选择注册/登录2. 注册页填写信息❌ 空内容 / 两次密码不同 → 弹窗提示注册失败✅ 信息完整密码一致 → 携带账号密码跳转Home主页3. 注册页可一键跳转登录页登录页可一键跳转注册页页面互通4. 主页接收路由参数展示当前登录用户名八、用到知识点总结考试作业考点1. 布局组件Column垂直布局、Row水平布局2. 路由apirouter.pushUrl页面跳转、router.getParams路由传参3. 状态管理State双向数据绑定4. 弹窗组件AlertDialog全局弹窗提示5. 表单组件TextInput输入框、密码框type加密模式6. 逻辑判断if判断完成注册校验、非空判断
)
