《ArkTS实践:页面路由跳转与弹窗提示的组合逻辑实现》

📅 2026/6/26 16:04:39
《ArkTS实践:页面路由跳转与弹窗提示的组合逻辑实现》
一.页面路由1.基础定义页面路由你从A页面点个按钮打开了B页面这个跳转的功能就是页面路由。路由跳转两步走第一步先在工程里声明两个页面第二步加按钮点一下就跳转 核心就一行代码router.pushUrl({ url: 你的页面路径 })2.场景示例做跳转页面之前修改核心配置俩个互相跳转的页面 注册和登录页面这是我写的一个登录页面先导入鸿蒙路由模块用来实现页面跳转最外层用纵向Column布局组件间间距为25顶部加载工程内名为444的本地图片作为logo宽高都设为120设置60的圆角让logo变成圆形。添加“登录”标题设置字号32加粗显示。用横向Row布局左侧放“账号”提示文字字号26右侧放输入框输入框宽度占行剩余70%高度58用于输入账号。和账号行结构一致不同的是将输入框类型设置为Password会隐藏输入内容适配密码输入场景。添加注册提示文字设置灰色字号22绑定点击事件点击后通过路由跳转到名为Resister的注册页面。添加占满宽度的“立即登录”按钮设置高度50字号24最外层Column撑满整个页面给整个页面添加15像素内边距就完成了这个登录页的开发。下面是跳转到得Resister得注册页面这是一个注册页面这个代码跟上面讲的登录页面写法一致绑定点击事件跳转到LoginPage登录页面 俩个页面点击可以来回切换三个跳转页面和弹窗的结合加一个弹窗先写一个登录页面 跟上边得一样新增了一个弹窗页面 从登录页面跳转到注册里面 点击立即注册就出现了一个弹窗定义了一个文本为“立即注册”的按钮设置按钮宽度占满容器、高度50px、字体大小24px然后给按钮绑定了点击事件2. 点击按钮后做注册校验判断条件为用户名不为空 并且 密码不为空 并且 确认密码不为空 并且 两次输入的密码一致满足条件就跳转路由到首页HomePage同时把当前输入的用户名和密码作为参数传递过去3. 如果不满足校验条件就弹出标题为“注册失败”的弹窗提示内容为“注册的两次密码为空或者不一致”再加一个跳转页面注册成功跳转这个homepage也是一个要跳转得页面 从登录跳转到注册 然后你不输入账号密码或者输入错误就是出现一个弹窗就是上边一个截图展示的当你注册了信息再点击按钮立即注册就会出来这个你好得页面就是跳转到了homepage写的页面HomePage首页代码每行含义如下import router from ohos.router;引入HarmonyOS的路由模块用来接收页面跳转传递过来的参数Entry Component是组件声明注解标注这是一个可以作为页面入口的自定义组件struct HomePage {定义名为HomePage的首页组件State username:string 声明一个响应式状态变量username类型是字符串初始值为空用来存跳转传过来的用户名onPageShow(): void {页面显示触发的生命周期方法const params router.getParams() as Recordstring,string调用路由API拿到上一个页面跳转传来的参数把参数指定为“键值都是字符串”的类型if (params.username) { this.username params.username }如果拿到的参数里有username就把这个用户名赋值给当前页面的变量保存build() {UI构建方法用来渲染页面内容Column() {用纵向容器布局Text(你好 ${this.username})在页面显示文本内容是“你好”拼接上从注册页传过来的用户名。