HarmonyOS ArkTS Ability内页面的跳转和数据传递

HarmonyOS ArkTS Ability的数据传输包括Ability内页的跳转和数据传输，Ability之间的数据跳转和数据传输。本节主要讲解Ability内页的跳转和数据传输。

打开Deveco Studio，选择Empty Ability工程模板创建了一个名为“ArkUIPagesRouter该项目是演示示例。

以下代码将在初始化工程后生成。

• 在src/main/ets在/entryability目录下，Ability文件Entryability将最初生成.ts。EntryAbility.Ability的生命周期回调内容根据业务需要在ts文件中实现。
• 在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@Componentstruct 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.etsmessage变量值改为“Index页面”和“Second页面”。

页面之间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，以实现跳转。不同的url可以通过页面路由模块访问不同的页面，包括跳转到Ability中的指定页面、用Ability中的一个页面替换当前页面、返回上一页或指定页面等。通过params传输参数。

如下代码所示，在使用页面路由之前，需要先导入router模块。

// router模块import导入 router from '@ohos.router';

页面跳转的几种方式，根据需要选择跳转的方式。

通过调用router来调用router.push()方法，跳转到Ability的指定页面。每次调用router.push()所有方法都将建立一个新的页面。默认情况下，页面堆栈数量将增加1，页面堆栈支持的最大页面数量为32。

当页面栈数量大或超过32时，可以调用router.clear()方法清除页面栈中的所有历史页面，只保留当前页面作为栈顶页面。

用法示例如下：

router.push({  url: 'pages/Second',  params: {    src: 从Index页面传来的数据，  }})

router.push()方法新增mode参数，可将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下，如果目标页面的URL已经存在于页面堆栈中，最近的URL页面将移动到堆栈顶部，移动页面为新页面，原始页面仍存在于堆栈中，页面堆栈数量保持不变；如果目标页面的URL在页面堆栈中没有URL页面，则按标准模式跳转，页面堆栈数量将增加1。

用法示例如下：

router.push({  url: 'pages/Second',  params: {    src: 从Index页面传输的数据，  }}, router.RouterMode.Single)

通过调用router.replace()方法，跳转到Ability中的指定页面。即使用新页面替换当前页面，并销毁被替换的当前页面，页面堆栈的数量保持不变。

用法示例如下：

router.replace({  url: 'pages/Second',  params: {    src: 从Index页面传来的数据，  }})

router.replace()方法增加了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard标准模式。

在单实例模式下，如果目标页面的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@Componentstruct 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%')  }}

通过调用router.getParams()获取Index页面传输的自定义参数的方法。

import router from '@ohos.router';@Entry@Componentstruct Second {  @State src: string = router.getParams()?.['src'];  // 刷新页面显示  ...}

可以调用router.back()方法返回到上一页。

最后，完整的Second，完整的Second.ets代码如下：

// router模块import导入 router from '@ohos.router';@Entry@Componentstruct 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-7所示。

在Index页面中，点击“跳转”，从Index页面跳转到Second页面，接收Second页面中的参数并刷新页面。界面效果如图2-8所示。

点击Second页面“返回”后，将返回如图2-7所示的Index页面。

以上是页面跳转、传参和接收参数的完整过程。

不劳无获，学好HarmonyOS应用开发，挑战高薪！

利用618活动季节，给自己充电。少玩手机，多学习才是王道！目前当当和JD.COM已经开启了购书50%折扣的平台推广活动，非常实惠！

• 柳伟卫. 鸿蒙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