本次代码为大合集，几乎包含了80%的知识点，运用到了很多相关知识，与实战很相似

下面是代码展示（共分为4部分，最后通过main_pages.json进行关联）

运用的知识点有：

一、ArkTS 组件与布局相关知识点

  1. 页面装饰器 @Component用于标记自定义 UI 组件结构体，@Entry标记页面为可路由访问的独立入口页面，所有跳转页面均需添加这两个装饰器。
  2. 布局容器
  • Column垂直布局容器：实现页面组件纵向排列，可通过space设置内部间距、width('100%')与height('100%')铺满全屏，搭配padding、alignItems、justifyContent控制内边距与子元素对齐方式。
  • Row水平布局容器：实现一行内多个组件横向排布，用于用户名、密码输入区域的文字与输入框组合布局。
  1. 基础展示组件
  • Text文本组件：支持fontSize字号、fontColor文字颜色、fontWeight.Bold文字加粗、textAlign.Center居中、margin外边距等样式；绑定.onClick()点击事件可实现页面跳转交互。
  • Image图片组件：使用$r('app.media.资源名')读取resources/media目录下本地图片，通过width、height固定尺寸，borderRadius设置圆角实现圆形头像效果。
  1. 表单交互组件
  • TextInput文本输入框：通过text双向绑定状态变量，placeholder设置输入提示；type.InputType.Password开启密码隐藏模式；onChange()监听输入内容实时更新状态变量；支持自定义背景色、圆角样式。
  • Toggle开关组件：切换开关样式ToggleType.Switch，绑定布尔类型状态变量实现 “记住密码” 功能，可监听切换状态并自定义开关选中颜色。
  • Button按钮组件：设置宽高、圆角、内边距美化样式，绑定点击事件完成表单校验、清空输入、页面返回等业务逻辑。
  1. 弹窗组件 AlertDialog 调用AlertDialog.show()弹出提示弹窗，配置title弹窗标题、message提示文本，用于展示注册、登录成功或失败的反馈信息。

二、状态管理知识点

使用@State装饰器定义页面响应式变量，包含用户名、密码、确认密码、开关状态等数据。@State实现双向数据绑定，输入框修改变量时页面 UI 自动同步更新，修改变量值也会同步刷新界面，是 ArkUI 响应式开发核心语法。

三、路由与页面跳转核心知识点

  1. 路由模块导入 通过import router from '@ohos.router'引入系统路由模块，提供页面切换能力。
  2. 路由配置文件 main_pages.json 项目路由配置文件，src数组内统一注册所有页面路径，页面跳转填写的url必须与配置路径完全匹配，未注册页面无法正常跳转。本项目注册页面：pages/Tiaozhuan、pages/Tiaozhuan1、pages/Tiaozhuan2、pages/HomePages。
  3. 页面跳转 API router.pushUrl
  • 无参跳转：仅传入url参数，实现页面简单切换（首页、注册页、登录页互相跳转）。
  • 带参跳转：配置params键值对，实现跨页面数据传递，注册页面将用户名、密码传递给主页HomePages。

四、TypeScript 语法知识点

  1. 静态类型标注：定义变量时声明数据类型，字符串string、布尔值boolean，回调函数参数标注类型，遵循 TypeScript 强类型规范。
  2. 分支判断 if-else：用于表单校验逻辑，判断输入内容是否为空、两次密码是否一致、账号密码是否填写，区分成功、失败两种弹窗提示。
  3. 模板字符串：使用 `${变量}` 拼接文本与变量，动态展示弹窗提示内容。
  4. 变量赋值清空：点击清空按钮，直接将@State变量赋值为空字符串，一键清空所有输入框内容。

五、页面业务逻辑知识点

  1. 首页选择页 Tiaozhuan.ets 项目入口页面，提供两个文本跳转入口，分别进入注册页面、登录页面。
  2. 注册页面 Tiaozhuan1.ets 实现账号注册表单，包含用户名、密码、确认密码输入框；表单校验不通过弹出失败弹窗，校验成功携带账号信息跳转主页；支持清空输入、返回首页、跳转登录页面。
  3. 登录页面 Tiaozhuan2.ets 实现账号登录表单，包含密码隐藏输入框、记住密码开关；校验账号填写状态，弹出登录成功 / 失败提示；支持清空输入、跳转注册页、返回首页。
  4. 跨页面数据通信 利用路由params参数，将注册页面表单数据传递至目标主页，实现页面间数据传递。

六、样式与工程结构知识点

  1. 样式设置 支持百分比尺寸'100%'、固定像素尺寸；系统内置颜色Color.xxx、十六进制自定义背景色；borderRadius统一设置圆角美化组件；margin控制组件外边距、padding控制组件内部填充。
  2. 项目目录结构
  • entry/src/main/ets/pages：存放所有业务页面 ets 代码；
  • entry/src/main/resources/media：存放图片、视频等静态资源；
  • entry/src/main/resources/base：存放全局颜色、尺寸、字符串资源配置；
  • main_pages.json：全局路由配置文件，是页面跳转的基础依赖。

七、整体业务流程知识点

程序启动后进入页面选择页，分为两条业务分支：一是跳转注册页完成表单校验，成功后携带账号信息进入主页；二是跳转登录页完成账号校验，弹出对应反馈弹窗；页面之间可自由互相跳转，同时提供返回首页功能，完整实现注册登录基础业务流程。

一、ArkTS 组件与布局相关知识点

  1. 页面装饰器 @Component用于标记自定义 UI 组件结构体，@Entry标记页面为可路由访问的独立入口页面，所有跳转页面均需添加这两个装饰器。
  2. 布局容器
  • Column垂直布局容器：实现页面组件纵向排列，可通过space设置内部间距、width('100%')与height('100%')铺满全屏，搭配padding、alignItems、justifyContent控制内边距与子元素对齐方式。
  • Row水平布局容器：实现一行内多个组件横向排布，用于用户名、密码输入区域的文字与输入框组合布局。
  1. 基础展示组件
  • Text文本组件：支持fontSize字号、fontColor文字颜色、fontWeight.Bold文字加粗、textAlign.Center居中、margin外边距等样式；绑定.onClick()点击事件可实现页面跳转交互。
  • Image图片组件：使用$r('app.media.资源名')读取resources/media目录下本地图片，通过width、height固定尺寸，borderRadius设置圆角实现圆形头像效果。
  1. 表单交互组件
  • TextInput文本输入框：通过text双向绑定状态变量，placeholder设置输入提示；type.InputType.Password开启密码隐藏模式；onChange()监听输入内容实时更新状态变量；支持自定义背景色、圆角样式。
  • Toggle开关组件：切换开关样式ToggleType.Switch，绑定布尔类型状态变量实现 “记住密码” 功能，可监听切换状态并自定义开关选中颜色。
  • Button按钮组件：设置宽高、圆角、内边距美化样式，绑定点击事件完成表单校验、清空输入、页面返回等业务逻辑。
  1. 弹窗组件 AlertDialog 调用AlertDialog.show()弹出提示弹窗，配置title弹窗标题、message提示文本，用于展示注册、登录成功或失败的反馈信息。

二、状态管理知识点

使用@State装饰器定义页面响应式变量，包含用户名、密码、确认密码、开关状态等数据。@State实现双向数据绑定，输入框修改变量时页面 UI 自动同步更新，修改变量值也会同步刷新界面，是 ArkUI 响应式开发核心语法。

三、路由与页面跳转核心知识点

  1. 路由模块导入 通过import router from '@ohos.router'引入系统路由模块，提供页面切换能力。
  2. 路由配置文件 main_pages.json 项目路由配置文件，src数组内统一注册所有页面路径，页面跳转填写的url必须与配置路径完全匹配，未注册页面无法正常跳转。本项目注册页面：pages/Tiaozhuan、pages/Tiaozhuan1、pages/Tiaozhuan2、pages/HomePages。
  3. 页面跳转 API router.pushUrl
  • 无参跳转：仅传入url参数，实现页面简单切换（首页、注册页、登录页互相跳转）。
  • 带参跳转：配置params键值对，实现跨页面数据传递，注册页面将用户名、密码传递给主页HomePages。

四、TypeScript 语法知识点

  1. 静态类型标注：定义变量时声明数据类型，字符串string、布尔值boolean，回调函数参数标注类型，遵循 TypeScript 强类型规范。
  2. 分支判断 if-else：用于表单校验逻辑，判断输入内容是否为空、两次密码是否一致、账号密码是否填写，区分成功、失败两种弹窗提示。
  3. 模板字符串：使用 `${变量}` 拼接文本与变量，动态展示弹窗提示内容。
  4. 变量赋值清空：点击清空按钮，直接将@State变量赋值为空字符串，一键清空所有输入框内容。

五、页面业务逻辑知识点

  1. 首页选择页 Tiaozhuan.ets 项目入口页面，提供两个文本跳转入口，分别进入注册页面、登录页面。
  2. 注册页面 Tiaozhuan1.ets 实现账号注册表单，包含用户名、密码、确认密码输入框；表单校验不通过弹出失败弹窗，校验成功携带账号信息跳转主页；支持清空输入、返回首页、跳转登录页面。
  3. 登录页面 Tiaozhuan2.ets 实现账号登录表单，包含密码隐藏输入框、记住密码开关；校验账号填写状态，弹出登录成功 / 失败提示；支持清空输入、跳转注册页、返回首页。
  4. 跨页面数据通信 利用路由params参数，将注册页面表单数据传递至目标主页，实现页面间数据传递。

六、样式与工程结构知识点

  1. 样式设置 支持百分比尺寸'100%'、固定像素尺寸；系统内置颜色Color.xxx、十六进制自定义背景色；borderRadius统一设置圆角美化组件；margin控制组件外边距、padding控制组件内部填充。
  2. 项目目录结构
  • entry/src/main/ets/pages：存放所有业务页面 ets 代码；
  • entry/src/main/resources/media：存放图片、视频等静态资源；
  • entry/src/main/resources/base：存放全局颜色、尺寸、字符串资源配置；
  • main_pages.json：全局路由配置文件，是页面跳转的基础依赖。

二、页面联动完整流程

  1. 入口页 Tiaozhuan → 点击【立即注册】router.pushUrl 跳转到 Tiaozhuan1 注册页
  2. 注册页 Tiaozhuan1：
    • 点击顶部文字可跳转登录页 Tiaozhuan2
    • 点击注册按钮做表单校验：用户名、密码、确认密码都不为空才允许跳转主页
    • 校验通过：携带 username、password 参数跳转到 HomePages 主页
    • 校验失败：弹出 AlertDialog 提示注册失败，同时模板字符串展示用户名
  3. 主页 HomePages 通过 router.getParams() 接收注册页传递过来的账号密码数据

三、全部核心知识点（分模块）

模块 1：路由页面跳转（上下页面通用）

  1. 路由模块导入 import router from '@ohos.router'，所有页面跳转 API 依赖该模块
  2. router.pushUrl() 压栈跳转
    • 作用：打开新页面，页面栈累加，可返回上一页
    • 基础参数 url：目标页面路径，必须和 main_pages.json 注册路径完全匹配
    • 拓展参数 params：自定义对象，用于页面之间传递数据（字符串 / 数字 / 布尔值）
  3. 页面跳转关系：
    • Tiaozhuan → Tiaozhuan1（注册页）
    • Tiaozhuan / Tiaozhuan1 → Tiaozhuan2（登录页）
    • Tiaozhuan1 → HomePages（主页，带参数传值）

模块 2：状态管理 @State 装饰器

ets

@State username: string = ""
@State password: string = ""
@State password2: string = ""
  • @State：标记响应式变量，变量值修改后 UI 自动刷新；
  • 用于绑定输入框内容，存储用户填写的账号密码，后续在校验、路由传参、弹窗中使用。

模块 3：布局容器组件

  1. Column()：垂直布局，子元素从上到下排列，支持 {space:数值} 设置内部元素间距
  2. Row({space:30})：水平布局，子元素从左到右，space 控制子组件横向间隔
  3. 容器通用属性 .width('100%') / .padding()：铺满屏幕、设置内边距

模块 4：基础 UI 组件

  1. Text 文本组件
    • .fontSize(数值)：设置文字大小
    • .fontColor(Color.枚举)：系统内置颜色（Green/Gray/Red 等）
    • .onClick()：绑定点击跳转事件
  2. Button 按钮组件
    • .width() / .height()：设置按钮尺寸
    • .borderRadius(8)：圆角边框
    • .onClick()：绑定表单校验逻辑

模块 5：点击交互事件

.onClick(()=>{ 业务逻辑 }) 箭头函数回调，可执行：页面跳转、表单判断、弹窗提示等逻辑。

模块 6：表单逻辑 & JS 判断语法

  1. 多条件与运算 &&：多个条件必须同时满足才成立

ets

if (用户名不为空 && 密码不为空 && 确认密码不为空)
  1. 模板字符串 `${变量}`：弹窗 message 内拼接变量，动态展示用户名
  2. 分支判断 if / else：区分注册成功跳转、注册失败弹窗两种场景

模块 7：弹窗提示 AlertDialog

  1. 前置导入：import AlertDialog from '@ohos.promptAction'
  2. AlertDialog.show({ title:"标题", message:"提示内容" }) 用于表单校验失败后弹出提示框，给用户反馈

模块 8：页面间参数传递（重点）

发送页（Tiaozhuan1 注册页）

pushUrl 中新增 params 对象携带数据：

ets

router.pushUrl({
  url:"pages/HomePages",
  params:{
    username: this.username,
    password: this.password
  }
})

接收页（HomePages 主页）

ets

import router from '@ohos.router';
onPageShow(){
  const params = router.getParams() as Record<string,string>
  if(params){
    // 获取注册页传递过来的账号密码
    let name = params.username
    let pwd = params.password
  }
}

四、易错点总结

  1. url 路径字符串必须加英文双引号，漏引号直接语法报错
  2. 使用弹窗必须导入 AlertDialog 模块，否则找不到标识符
  3. 路由传参时，前后页面参数名大小写必须完全一致（username ≠ userName）
  4. @State 变量仅在当前组件内生效，跨页面必须通过 params 传递
  5. main_pages.json 需要把所有页面全部注册，否则跳转失败
  6. 模板字符串使用反引号 `，不能用单 / 双引号包裹
  7. && 多条件判断，任意一个输入框为空就会进入 else 弹窗
# 开发语言
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

小米玄戒三芯齐发@ACP#端侧 AI 走向高密度算力，IX9104 PCIe5.0 交换芯片在 AI 服务中的落地机会

avatar 人工智能6S服务平台
cover

【HarmonyOs 第一行代码】W1 手把手入门：环境搭建与第一个应用

avatar 人工智能6S服务平台
cover

鸿蒙ArkTS实战：幻灵秘境精灵养成系统的架构与实现深度解析

avatar 人工智能6S服务平台