一、今日学习核心内容今天完整实现了登录页 - 注册页 - 首页三页面路由跳转、表单双向绑定、页面间参数传递、表单校验弹窗提示全套业务逻辑覆盖 ArkTS 路由核心知识点与踩坑解决方案。二、基础前置路由模块导入所有需要页面跳转的文件顶部必须导入路由 API否则无法使用pushUrlarktsimport router from ohos.router;三、页面跳转基础 API1. pushUrl入栈跳转保留返回键会新增页面栈多次点击会堆积页面栈上限 32溢出后跳转失效arktsrouter.pushUrl({ url: pages/页面文件名 })2. replaceUrl替换当前页面推荐登录 / 注册场景销毁当前页面不会增加页面栈永久不会触发栈溢出报错适合不需要返回的场景arktsrouter.replaceUrl({ url: pages/home })3. 跳转携带参数页面传参核心通过params对象传递数据目标页面使用router.getParams()接收arktsrouter.pushUrl({ url:pages/home, params:{ username:this.username } })四、State 双向绑定表单注册 / 登录表单核心1. 定义响应式变量State修饰变量变量修改后页面 UI 自动刷新用于绑定输入框arktsState username:string State password:string2. TextInput 双向绑定写法输入框传入{text:变量}搭配onChange实时同步输入内容实现双向绑定arktsTextInput({text:this.username}) .width(60%) .height(50) .onChange((value:string){ this.usernamevalue })3. 密码输入框加密添加.type(InputType.Password)隐藏输入内容arktsTextInput({text:this.password}) .type(InputType.Password)五、表单校验 弹窗提示promptAction 弹窗1. 弹窗模块导入弹窗需要单独导入之前踩坑点无导入直接调用会标红报错arktsimport AlertDialog from ohos.promptAction;2. 正确弹窗 APIshowDialog低版本 HarmonyOS 无AlertDialog.show()统一使用showDialogarktsAlertDialog.showDialog({ title:注册失败, message:账号密码为空或两次密码不一致当前账号${this.username} })3. 注册页完整校验逻辑同时判断三个输入框非空 两次密码相等全部满足才允许跳转主页arktsif ((this.username!) (this.password!) (this.password2!) (this.passwordthis.password2)){ // 校验通过跳转主页并传参 router.pushUrl({url:pages/home,params:{username:this.username}}) }else{ // 校验失败弹出提示弹窗 AlertDialog.showDialog({title:注册失败,message:提示文字}) }六、目标页面接收路由参数使用生命周期onPageShow页面每次显示都会执行获取传递过来的参数arktsonPageShow(): void { // 强转类型为字符串对象解决Object赋值string报错 const params router.getParams() as Recordstring, string if (params){ this.username params.username } }踩坑点router.getParams()默认返回Object直接赋值 string 变量会类型报错必须用as Recordstring, string强制类型转换。七、页面布局统一规范外层Column设置.width(100%).height(100%)占满全屏.justifyContent(FlexAlign.Center)实现页面内容垂直居中表单行统一使用Row分割左侧文字 40% 宽度居中输入框 60% 宽度页面样式统一美观arktsRow(){ Text(账号) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.username}) .width(60%) .height(50) }八、必配路由注册文件 main_pages.json所有页面必须在src数组注册否则跳转找不到页面点击无响应json{ src: [ pages/denglu, pages/zhuce, pages/home ] }修改 json 文件后必须重启预览器配置才会生效。九、今日踩坑汇总避坑重点弹窗标红忘记导入AlertDialog模块 / 错误使用show()替换为showDialog()参数赋值报错getParams()返回 Object未强转Recordstring, string跳转无反应页面未在main_pages.json注册、文件名大小写不匹配第二行文字消失布局未设置垂直居中内容被挤出可视区域页面栈超限频繁 pushUrl 堆积页面推荐业务场景使用 replaceUrl 替换跳转输入框无法同步值TextInput 缺少{text:this.变量}双向绑定十、完整业务流程梳理登录页输入账号密码点击登录校验非空 → 跳转首页传递用户名注册页输入账号、密码、确认密码校验空值 密码一致性 → 跳转首页首页页面加载自动接收路由传递的用户名展示欢迎文本页面互跳登录页可跳转注册页注册页可跳转登录页实现双向切换