一、左侧页面RouterRegister 注册页面核心知识点1. 路由跳转 页面传参router.pushUrl({ url:pages/HomePage, params:{ username:this.username, password:this.password } })router.pushUrl({})作用打开新页面页面栈新增一条记录可返回上一页。url属性填写目标页面在 pages 文件夹的路径路径字符串末尾必须加逗号否则报语法错误截图圈出 url 行就是易错点。params对象用于携带数据传给下一个页面可以传递多个自定义字段账号、密码。注意点url 路径写错、页面未在main_pages.json注册跳转空白 / 报错url 与 params 是同一个对象的两个属性中间必须用逗号分隔。2. 表单多条件校验逻辑if ((this.username!) (this.password!) (this.password2!) (this.passwordthis.password2))并且所有条件全部满足才会执行跳转校验四条规则账号非空、密码非空、确认密码非空、两次密码完全一致任意一条不满足进入 else 弹窗提示。3. AlertDialog 弹窗提示AlertDialog.show({ title:注册失败, message:注册的两次密码为空或者不一致${this.username} })作用表单校验失败弹出提示框告知用户填写错误必备导入import AlertDialog from ohos.promptAction;不导入直接标红模板字符串可以通过${变量}把账号动态拼接在提示文字里。4. State 响应式变量State username:string State password:string State password2:string State装饰器变量发生变化页面绑定该变量的输入框、文字自动刷新三个变量分别绑定账号、密码、确认密码输入框实现双向数据绑定规范必须赋初始空值不能只定义不赋值。5. 点击事件 onClickButton(立即注册) .onClick((){ // 校验跳转/弹窗逻辑 })onClick()绑定点击回调点击按钮才执行内部校验代码适用场景按钮、文字、图片等所有可点击组件。6. 布局基础 ColumnColumn({space:25}){ // 所有输入框、按钮、文字 }垂直布局内部组件从上到下排列space:25统一设置内部组件上下间距页面唯一根布局所有 UI 必须包裹在 Column 内。二、右侧页面HomePage 首页接收路由参数知识点import router from ohos.router; Entry Component struct HomePage{ State username:string onPageShow(): void { const params router.getParams() as Recordstring,string if (params){ this.username params.username } } build() { Column(){ Text(你好 ${this.username}) } } }1. 生命周期函数 onPageShow ()触发时机页面每次显示、打开都会自动执行专门用来接收上一页路由传递过来的参数不能写在 build 内部必须写在 struct 内、build 外部。2. 接收参数核心 APIrouter.getParams()const params router.getParams() as Recordstring,stringrouter.getParams()获取上一页params携带的全部数据as Recordstring,string类型断言告诉编译器参数是「字符串键 字符串值」对象消除类型报错if(params)判空防止没有参数时访问params.username导致程序崩溃。3. 变量赋值与页面自动刷新this.username params.username因为username被State修饰赋值完成后下方Text文字立刻更新展示传递过来的账号4. 动态文本模板字符串Text(你好 ${this.username})反引号模板语法${变量名}直接嵌入文字实现动态文字展示用户名。5. 页面基础修饰器Entry标记当前文件为独立页面模拟器可单独运行Component声明这是 ArkUI 自定义组件一个页面只能有一个被Entry修饰的 struct。6. 导入路由模块import router from ohos.router;只要使用router.pushUrl、router.getParams页面顶部必须导入路由工具否则代码标红。三、整套页面完整业务流程总结注册页输入账号、密码、确认密码内容实时存入State变量点击【立即注册】触发onClick执行多条件表单校验填写合规通过router.pushUrl携带 username、password 跳转到 HomePageHomePage 页面打开自动执行onPageShow调用router.getParams拿到传递的账号将参数赋值给页面State username页面文字自动渲染你好 xxx填写不合规弹出 AlertDialog 弹窗提示注册失败。四、高频易错点汇总pushUrl内部 url 行末尾缺少逗号直接报语法红波浪使用 AlertDialog 忘记导入ohos.promptAction使用路由忘记顶部import router接收参数时不加if(params)判空无参数进入页面直接闪退页面没有唯一根 Column 布局编译报错State变量不赋初始值运行异常目标页面未在 main_pages.json 注册跳转空白页面。