鸿蒙 ArkTS 实战

鸿蒙 ArkTS 实战：登录 + 注册 + 主页页面跳转完整教程

第一步：配置页面路由（main_pages.json）

打开 entry/src/main/resources/base/profile/main_pages.json，在 src 数组中添加三个页面路径，代码如下：

注意：文件名必须和页面内 struct 名称对应，路径大小写严格一致，否则页面无法跳转。一定要点击立即同步

第二步：编写登录页面

完整代码：

第三步：编写注册页面

完整代码：

第四步：编写接收参数的主页

完整代码：

预览器预览

点击“新用户注册”跳转“用户注册”页面，完成注册点击跳转“登录”页面，然后就可以登录账号跳转进去

核心知识点讲解

页面跳转 API

• url：必须填写在 main_pages.json 里注册过的页面路径
• params：页面之间传递数据的对象

2. 接收路由参数

在onPageShow生命周期中执行，每次打开页面都会获取参数：

const params = router.getParams() as Record<string,string>

3. 双向绑定

@State装饰器定义变量，配合TextInput的text和onChange完成双向数据绑定。

4. 弹窗 AlertDialog

使用前必须在文件顶部导入模块：

常见报错解决

1、点击按钮无法跳转页面

• 检查 main_pages.json 是否注册当前页面
• 检查 url 路径和文件名大小写、横杠完全一致
• 确认代码写在.onClick()里面，不能直接写在 Column

1. router 未定义 在页面第一行添加路由导入：

import router from '@ohos.router';

1. 弹窗 AlertDialog 报错 缺少对应模块导入，补充：

import AlertDialog from '@ohos.alertDialog';

4、Only UI component syntax can be written here 路由代码写在了按钮外面，必须包裹在onClick(()=>{})回调函数内部。