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

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