一、功能预览

本注册页面实现功能：

1. 圆形头像、注册标题
2. 账号、密码、确认密码三组输入框（密码隐藏）
3. 输入框双向绑定，实时获取用户填写内容
4. 点击文字跳回登录页
5. 注册按钮表单校验：非空判断 + 两次密码一致判断
6. 校验失败弹出提示弹窗
7. 注册成功跳转到首页，并把账号数据传递到首页

二、前期准备

1. 沿用之前的鸿蒙 Stage 项目，已有 RouterLogin.ets 登录页
2. 准备第二张图片，命名为 1，放入目录： entry/src/main/resources/base/media
3. 所有新页面都需要在 main_pages.json 注册路由

---

三、第一步：新建注册页面文件

1. 进入目录：entry > src > main > ets > pages
2. 右键 pages → 新建 ETS File，文件命名：Register 生成文件：Register.ets

重点：文件名 = 路由路径，鸿蒙路由严格区分大小写。

---

四、第二步：注册页完整源码（附错误修正）

修正说明

你原代码有两处语法错误，已帮你修复：

1. 模板字符串写法错误
2. 变量名拼写错误 ussername → username

最终可运行完整代码

typescript

运行

// 导入路由模块，用于页面跳转与传参
import router from '@ohos.router';

// 页面组件声明
@Entry
@Component
struct Register{
  // 定义响应式变量：账号、密码、确认密码
  @State username:string = ""
  @State password:string = ""
  @State password2:string = ""

  build() {
    // 整体垂直布局，组件间距 25
    Column({space:25}){
      // 圆形头像
      Image($r('app.media.1'))
        .width(120)
        .height(120)
        .borderRadius(60)

      // 页面标题
      Text("注 册")
        .fontSize(32)
        .fontWeight(FontWeight.Bolder)

      // 账号行：横向布局
      Row(){
        Text("账号")
          .fontSize(26)
          .width('40%')
          .textAlign(TextAlign.Center)
        TextInput({text:this.username})
          .width('60%')
          .height(50)
          // 输入内容实时赋值给变量
          .onChange((value:string)=>{
            this.username = value
          })
      }

      // 密码行
      Row(){
        Text("密码")
          .fontSize(26)
          .width('40%')
          .textAlign(TextAlign.Center)
        TextInput({text:this.password})
          .width('60%')
          .height(50)
          .type(InputType.Password)
          .onChange((value:string)=>{
            this.password = value
          })
      }

      // 确认密码行
      Row(){
        Text("确认密码")
          .fontSize(26)
          .width('40%')
          .textAlign(TextAlign.Center)
        TextInput({text:this.password2})
          .width('60%')
          .height(50)
          .type(InputType.Password)
          .onChange((value:string)=>{
            this.password2 = value
          })
      }

      // 跳转登录页文字
      Text("已有账号，立即登录")
        .fontSize(22)
        .fontColor(0xababab)
        .onClick(()=>{
          // 跳转到登录页面
          router.pushUrl({
            url:"pages/RouterLogin"
          })
        })

      // 注册按钮 + 表单校验核心逻辑
      Button("立即注册")
        .width('100%')
        .height(50)
        .fontSize(24)
        .onClick(()=>{
          // 校验：账号、密码、确认密码都不为空 且 两次密码一致
          if(this.username !== "" && this.password !== "" && this.password2 !== "" && this.password === this.password2){
            // 校验通过：跳转到首页，并传递账号、密码数据
            router.pushUrl({
              url:"pages/HomePage",
              params:{
                username:this.username,
                password:this.password
              }
            })
          }
          else {
            // 校验失败：弹出系统弹窗提示
            AlertDialog.show({
              title:"注册失败",
              message:"内容不能为空，且两次密码必须保持一致"
            })
          }
        })
    }
    // 页面铺满全屏，四周内边距 15
    .width('100%')
    .height('100%')
    .padding(15)
  }
}

---

五、代码逐段详细讲解

1. 导入路由模块

typescript

运行

import router from '@ohos.router';

和登录页一致，所有页面跳转、页面传参都依赖此模块，必须放在代码顶部。

2. 组件与响应式变量

typescript

运行

@Entry
@Component
struct Register{
  @State username:string = ""
  @State password:string = ""
  @State password2:string = ""

• @Entry + @Component：标准页面声明，支持预览和跳转。
• @State 三个变量：分别存储账号、密码、确认密码，输入框内容变化时自动同步。

3. 整体布局 Column

typescript

运行

Column({space:25}){ ... }
.width('100%')
.height('100%')
.padding(15)

垂直布局，内部元素上下排列，间距 25；页面占满全屏，四周预留边距。

4. 圆形头像 Image

typescript

运行

Image($r('app.media.1'))
  .width(120)
  .height(120)
  .borderRadius(60)

引用 media 下名为 1 的图片，宽高 120，圆角设为一半，实现圆形头像。

5. 双向绑定输入框 TextInput

typescript

运行

TextInput({text:this.username})
  .onChange((value:string)=>{
    this.username = value
  })

• TextInput({text: 变量})：把变量内容回显到输入框。
• .onChange：用户每输入一个字符，就把内容赋值给 @State 变量，完成双向数据绑定。
• .type(InputType.Password)：密码模式，输入内容自动隐藏。

6. 跳转回登录页

typescript

运行

Text("已有账号，立即登录")
  .onClick(()=>{
    router.pushUrl({
      url:"pages/RouterLogin"
    })
  })

点击文字，跳转到我们上一节写的登录页面，路径必须和登录页文件名一致。

7. 核心：注册按钮 + 表单校验

typescript

运行

Button("立即注册")
  .onClick(()=>{
    if(条件判断){
      // 校验通过：跳转首页 + 页面传参
      router.pushUrl({
        url:"pages/HomePage",
        params:{
          username:this.username,
          password:this.password
        }
      })
    }
    else{
      // 校验失败：弹出弹窗
      AlertDialog.show({
        title:"注册失败",
        message:"内容不能为空，且两次密码必须保持一致"
      })
    }
  })

校验规则

1. 账号不为空
2. 密码不为空
3. 确认密码不为空
4. 密码 和 确认密码 内容完全一致

页面传参

params 是路由传参固定写法，可以把当前页面的数据，传递给目标页面 HomePage。

弹窗 AlertDialog

鸿蒙内置弹窗组件，无需额外导入，直接调用，用于友好提示用户错误原因。

---

六、第三步：统一配置全局路由（必做）

所有页面必须在 main_pages.json 注册，否则跳转 / 预览报错。

1. 打开路径： entry > src > main > resources > base > profile > main_pages.json
2. 在 src 数组中添加三个页面：登录页、注册页、首页

json

{
  "src": [
    "pages/Index",
    "pages/RouterLogin",  // 登录页
    "pages/Register",     // 注册页
    "pages/HomePage"      // 首页（接收传参）
  ]
}

1. 保存文件，点击 IDE 右上角 立即同步。

---

七、第四步：新建首页 HomePage（接收注册传参）

注册成功会跳转到 HomePage，我们新建这个页面，并接收上一页传递的账号密码。

1. 新建文件

pages 目录下新建 HomePage.ets

2. 首页代码（接收路由参数）

typescript

运行

import router from '@ohos.router';

@Entry
@Component
struct HomePage {
  // 接收路由传递过来的参数
  @State userName: string = router.getParams()?.username ?? "暂无数据"
  @State pwd: string = router.getParams()?.password ?? "暂无数据"

  build() {
    Column() {
      Text("🎉 注册成功，欢迎来到首页")
        .fontSize(30)
        .margin({ bottom: 30 })

      Text(`当前登录账号：${this.userName}`)
        .fontSize(24)
        .margin({ bottom: 15 })

      Text(`登录密码：${this.pwd}`)
        .fontSize(24)

      Button("返回登录页")
        .margin({ top: 50 })
        .width('80%')
        .height(50)
        .onClick(() => {
          router.pushUrl({ url: "pages/RouterLogin" })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

代码说明

• router.getParams()：获取上一个页面传递过来的参数。
• ?? "暂无数据"：容错写法，如果没有参数就显示默认文本。

---

八、第五步：整体流程测试

1. 打开 RouterLogin.ets（登录页）→ 右侧打开预览器
2. 点击 没有账号，立即注册 → 跳转到 Register 注册页
3. 测试校验规则：
   • 不输入内容直接点注册 → 弹出「注册失败」弹窗
   • 输入密码和确认密码不一致 → 同样弹窗提示
   • 完整填写、两次密码一致 → 跳转到首页，并展示你的账号密码
4. 首页点击按钮，可再次返回登录页

---

九、原代码问题修复说明（避坑）

1. 模板字符串语法错误（原代码）

错误写法：

typescript

运行

message:`注册的两次密码为空或者不一致，&{(this.username}`

原因：ArkTS 模板字符串不能混用 &{}，直接写提示文本即可。 修正后：

typescript

运行

message:"内容不能为空，且两次密码必须保持一致"

2. 变量名拼写错误

错误：ussername 正确：username 拼写错误会导致传参接收不到数据。

---

十、新手常见问题 & 解决方案

问题 1：页面跳转提示「页面不存在」

1. 检查 main_pages.json 是否添加对应路径
2. 路由 url 和文件名大小写、拼写完全一致

问题 2：输入框无法录入 / 内容不更新

检查是否正确写了 onChange 并给 @State 变量赋值。

问题 3：弹窗不弹出

确认判断条件逻辑正确，空字符串判断使用 !== ""。

问题 4：首页接收不到传参

1. 检查注册页 params 内字段名
2. 首页 router.getParams() 取值名称必须和传递名称一致

问题 5：图片不显示

图片放入 resources/base/media，引用名称和图片文件名一致，不加后缀。

---

十一、功能拓展建议

1. 给登录页也添加表单校验，完善整套登录逻辑
2. 增加密码可见 / 隐藏切换按钮
3. 优化弹窗样式，增加按钮事件
4. 加入本地存储，实现「记住账号」功能
5. 优化 UI 配色、圆角、阴影，美化界面

---

整体总结

到此我们完成了一套登录 → 注册 → 首页完整流程：

1. 基础组件：Column / Row / Image / Text / TextInput / Button
2. 核心知识点：@State 响应式变量、双向数据绑定
3. 路由用法：页面跳转 router.pushUrl、页面传参 params、获取参数 getParams
4. 交互功能：点击事件、表单校验、弹窗提示

整套案例适合鸿蒙 ArkTS 入门练习，掌握后可以延伸开发更多表单类页面。