HarmonyOS ArkTS Ability 的数据传递包括有 Ability 内页面的跳转和数据传递、Ability 间的数据跳转和数据传递。本节主要讲解 Ability 内页面的跳转和数据传递。
打开 DevEco Studio，选择一个 Empty Ability 工程模板，创建一个名为 “ArkUIPagesRouter” 的工程为演示示例。
2.4.1 新建 Ability 内页面
初始化工程之后，会生成以下代码。
- 在 src/main/ets/entryability 目录下，初始会生成一个 Ability 文件 EntryAbility.ts。可以在 EntryAbility.ts 文件中根据业务需要实现 Ability 的生命周期回调内容。
- 在 src/main/ets/pages 目录下，会生成一个 Index 页面。这也是基于 Ability 实现的应用的入口页面。可以在 Index 页面中根据业务需要实现入口页面的功能。
为了实现页面的跳转和数据传递，需要新建一个页面。在 src/main/ets/pages 目录下，可以通过如下图 2-5 所示右键 “New->Page” 来新建页面。
在原有 Index 页面的基础上，新建一个页面命名为 Second 的页面，如下图 2-6 所示。
Second 页面创建完成之后，会自动做两个动作。
一个动作是在在 src/main/ets/pages 目录下，会创建一个 Second.ets 的文件。文件内容如下：
@Entry @Component struct Second { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') } }
另外一个动作是将 Second 页面信息配置到了 src/main/resources/base/profile/main_pages.json 文件中。main_pages.json 文件内容如下：
{ "src": [ "pages/Index", "pages/Second" ] }
分别把 Index.ets 和 Second.ets 的 message 变量值改为 “Index 页面” 和 “Second 页面” 以示区别。
2.4.2 页面跳转及传参
页面间的导航可以通过页面路由 router 模块来实现。页面路由模块根据页面 url 找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的 url 访问不同的页面，包括跳转到 Ability 内的指定页面、用 Ability 内的某个页面替换当前页面、返回上一页面或指定的页面等。通过 params 来传递参数。
在使用页面路由之前，需要先导入 router 模块，如下代码所示。
// 导入router模块 import router from '@ohos.router';
页面跳转的几种方式，根据需要选择一种方式跳转即可。
1. router.push()
通过调用 router.push () 方法，跳转到 Ability 内的指定页面。每调用一次 router.push () 方法，均会新建一个页面。默认情况下，页面栈数量会加 1，页面栈支持的最大页面数量为 32。
当页面栈数量较大或者超过 32 时，可以通过调用 router.clear () 方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
用法示例如下：
router.push({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } })
2. router.push () 加 mode 参数
router.push () 方法新增 mode 参数，可以将 mode 参数配置为 router.RouterMode.Single 单实例模式和 router.RouterMode.Standard 标准模式。
在单实例模式下，如果目标页面的 url 在页面栈中已经存在同 url 页面，离栈顶最近的同 url 页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈数量不变；如果目标页面的 url 在页面栈中不存在同 url 页面，按标准模式跳转，页面栈数量会加 1。
用法示例如下：
router.push({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } }, router.RouterMode.Single)
3. router.replace()
通过调用 router.replace () 方法，跳转到 Ability 内的指定页面。即使用新的页面替换当前页面，并销毁被替换的当前页面，页面栈数量不变。
用法示例如下：
router.replace({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } })
3. router.replace () 加 mode 参数
router.replace () 方法新增了 mode 参数，可以将 mode 参数配置为 router.RouterMode.Single 单实例模式和 router.RouterMode.Standard 标准模式。
在单实例模式下，如果目标页面的 url 在页面栈中已经存在同 url 页面，离栈顶最近的同 url 页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈数量会减 1；如果目标页面的 url 在页面栈中不存在同 url 页面，按标准模式跳转，页面栈数量不变。
用法示例如下：
router.replace({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } }, router.RouterMode.Single)
最后，在 Index.ets 文件中添加按钮以触发跳转。Index.ets 代码如下：
// 导入router模块 import router from '@ohos.router'; @Entry @Component struct Index { @State message: string = 'Index页面' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 添加按钮，触发跳转 Button('跳转') .fontSize(40) .onClick(() => { router.push({ url: 'pages/Second', params: { src: 'Index页面传来的数据', } }); }) } .width('100%') } .height('100%') } }
2.4.3 参数接收
通过调用 router.getParams () 方法获取 Index 页面传递过来的自定义参数。
import router from '@ohos.router'; @Entry @Component struct Second { @State src: string = router.getParams()?.['src']; // 页面刷新展示 ... }
可以调用 router.back () 方法返回到上一个页面。
最终，完整 Second.ets 的代码如下：
// 导入router模块 import router from '@ohos.router'; @Entry @Component struct Second { @State message: string = 'Second页面' @State src: string = router.getParams()?.['src']; build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) // 显示传参的内容 Text(this.src) .fontSize(30) // 添加按钮，触发返回 Button('返回') .fontSize(40) .onClick(() => { router.back(); }) } .width('100%') } .height('100%') } }
2.4.4 运行
运行项目后，初始化界面如图 2-7 所示。
在 Index 页面中，点击 “跳转” 后，即可从 Index 页面跳转到 Second 页面，并在 Second 页面中接收参数和进行页面刷新展示，界面效果如图 2-8 所示。
当在 Second 页面点击 “返回” 后，则会回到如图 2-7 所示 Index 页面。
以上就是完整的页面跳转及传参、接收参数的过程。
618 购书大优惠
一分耕耘一分收获，学好 HarmonyOS 应用开发，挑战高薪！
趁着 618 活动季节，多给自己充充电。少玩手机，多学习才是王道！目前当当、京东，开启平台惊现购书 5 折优惠促销活动，可谓是非常实惠！
当然，也有童鞋不喜欢文字，就喜欢看视频，那么也有视频网课，比如，这门幕课网的 “鸿蒙系统实战短视频 App 从 0 到 1 掌握 HarmonyOS” 就非常的牛 B ，可以教你从 0 开始开发一个类似于抖音的短视频 App。共计 39 个小时的时长，内容也是非常全面！
参考引用
- 鸿蒙 HarmonyOS 手机应用开发实战 [M]. 北京：清华大学出版社，2022.
- 鸿蒙 HarmonyOS 应用开发从入门到精通 [M]. 北京：北京大学出版社，2022.
- 跟老卫学 HarmonyOS 开发 [EB/OL].<https: github.com waylau harmonyos-tutorial>，2020-12-13/2022-12-29
- HarmonyOS 题库 [EB/OL].<https: github.com waylau harmonyos-exam>，2022-11-04/2022-12-29
