功能:通过输入框onChange实时收集账号密码,点击按钮onClick做非空校验;账号密码不为空则路由跳转首页并传递账号数据,为空弹出提示弹窗;首页接收路由参数展示欢迎文案,完整串联状态变量、输入变更事件、点击事件、页面路由传参、弹窗提示。
一、前置页面注册
路径:entry/src/main/resources/base/profile/main_pages.json两个页面需要提前注册,否则路由跳转失效
二、登录页 LoginRouter.ets
说明:
@State定义用户名、密码响应式变量- 两个
TextInput绑定onChange,输入实时同步更新状态变量 - 登录按钮
onClick做非空判断:
- 账号密码都不为空:
router.pushUrl跳转首页,携带用户名、密码参数 - 存在空值:弹出
AlertDialog提示登录失败
三、首页 HomePage.ets
说明:
onPageShow页面生命周期函数,页面每次显示时执行router.getParams()获取上个页面传递过来的参数- Text 输出“欢迎你,xxx”
四、流程
- 在登录页,输入用户名、密码,
onChange实时存值 - 点击【登录】按钮触发
onClick - 输入不为空,跳转HomePage,传递用户名
- 输入有空,弹出“用户名和密码不能为空”提示弹窗
- HomePage页面显示触发
onPageShow,读取参数,展示欢迎文本
当用户名和密码不为空时:
当用户名和密码为空时: