1.在main.json里面写上页面

"src" 数组：用来注册你项目里所有的页面

2.注册界面

• import router from '@ohos.router'：导入页面路由工具，用来实现页面跳转
• @State username/password/password2：存用户输入的账号、密码、确认密码
• Image：显示头像，加了圆角
• Text("注册")：页面标题
• Row：水平布局
• TextInput：账号、密码、确认密码的输入框
  • type(InputType.Password)：把输入框变成密码样式，内容隐藏
  • onChange：把用户写的内容存到变量里
• router.pushUrl({url: "xxx"})：页面跳转，点击 “已有账号” 跳转到登录页，注册成功跳转到主页
• params：把账号和密码传到下一个页面
• Button("立即注册")：注册按钮
• if (账号和密码不为空 && 两次密码一致)：注册成功的条件判断
• AlertDialog.show：弹出提示框，注册失败时显示错误信息
• width/height：控制输入框、按钮的大小
• padding：给页面加内边距，内容不贴边
• borderRadius：给头像加圆角效果

3.登录界面

• import router from '@ohos.router'：导入路由，用来实现页面跳转
• Image：显示头像，加了圆角效果
• Text("登录")：页面标题
• Row：水平布局
• TextInput：账号和密码的输入框
  • type(InputType.Password)：把输入框变成密码样式，输入内容会被隐藏
• router.pushUrl({url: "pages/RouterRegister"})：点击文字链接跳转到注册页面
• Button("立即登录")：登录按钮，后续可以加上登录判断逻辑
• width/height：控制头像、输入框、按钮的大小
• padding：给页面加内边距，避免内容贴边

4.主页面跳转

• import router from '@ohos.router'：导入路由工具，用来接收上一页传过来的参数
• onPageShow()：用来接收路由参数
• router.getParams()：获取上一个页面跳转时传过来的参数
• params.username：从参数里取出用户名
• Text(你好 ${this.username})：根据拿到的用户名，动态显示欢迎文字
• Column()：垂直布局，把文字居中显示

5.注册账号和登录账号跳转

• import router from '@ohos.router'：导入路由模块，用来实现页面跳转
• Text('没有账号，立即注册')：注册入口文字，点击就能跳转到注册页
• Text('已有账号，立即登录')：登录入口文字，点击就能跳转到登录页
• .onClick(() => { ... })：给文字加上点击事件，点了就执行跳转
• router.pushUrl({ url: "/pages/Resister" })：跳转到注册页面
• router.pushUrl({ url: "/pages/LoginPage" })：跳转到登录页面
• width/height：让页面占满整个屏幕
• padding：给页面加内边距