ArkUI实战开发-页面跳转（Router、Ability）

原创

小帅聊鸿蒙

发布于 2024-10-08 16:04:03

6820

页面跳转可以分为页面内跳转和页面间跳转，页面内跳转是指所跳转的页面在同一个 Ability 内部，它们之间的跳转可以使用 Router 或者 Navigator 的方式；页面间跳转是指所跳转的页面属与不同的 Ability ，这种跳转需要借助 featureAbility 实现，跳转示意图如下所示：

本节将简单介绍这两种方式的页面跳转。

页面内跳转

页面内跳转的实现比较简单，直接使用ArkUI开发框架提供的 Router 或者 Navigator 就可以了， Navigator 本质上是对 Router 的封装，这里就简单介绍一下 Router 的使用，想了解 Navigator 的小伙伴请参考官网文档。

router定义介绍

declare namespace router {
  function push(options: RouterOptions):void;
  function replace(options: RouterOptions):void;
  function back(options?: RouterOptions ):void;
  function clear():void;
  function getLength():string;
  function getState():RouterState;
  function enableAlertBeforeBackPage(options: EnableAlertOptions):void;
  function disableAlertBeforeBackPage():void;
  function getParams(): Object;
}

push：打开新的页面，新页面在栈顶位置， RouterOptions 定义了以下参数：
- url：目标页面的路径，该路径必须在 config.json 的 pages 下配置，否则不起作用。
- params：可选参数，向目标页面传递参数。
replace：新页面替换当前页面并把当前页面销毁。
back：返回上一页。
clear：清空路由栈里的其它页面。
getLength：获取当前路由栈里的页面数量。
getState：获取当前页面的状态， RouterState参数说明如下：
- index：当前页面是第几个打开的。
- path：当前页面的路径。
- name：当前页面的名称。
enableAlertBeforeBackPage：
disableAlertBeforeBackPage：
getParams：获取通过路由传递过来的参数。

router使用介绍

引入router 使用 router 之前，先要引入 router ，引入方式如下：

    import router from '@ohos.router';

页面跳转 页面跳转使用 router.push 方法，简单样例如下所示：

    // 第一个页面
    @Entry @Component struct ComponentTest {
      build() {
        Column({space: 10}) {
          Text('第一个页面')
            .fontSize(30)
            .width('100%')
            .textAlign(TextAlign.Center)

          Button('打开下一页')
            .onClick(() => {
              router.push({          // 使用push入栈一个新页面
                url: "pages/second"  // 通过url指定新打开的页面
              })
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }

    // 第二个页面
    @Entry @Component struct Second {

      build() {
        Column({space: 10}) {
          Text('第二个页面')
            .fontSize(30)
            .width('100%')
            .textAlign(TextAlign.Center)

          Button('返回上一页')
            .onClick(() => {
              router.back(); // 返回上一页，当前页面会销毁
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }

参数传递 当通过 router 打开新页面需要传递参数时，可以使用 RouterOptions 的 params 参数传递一个对象，然后在接收方以 router.getParams() 的方式拿到传递过来的对象，取值的话以 .key 的形式取值（注意：从 3.1.6.5 版本起，取值方式变更为 ['key'] 的形式），样例如下：

    // 第一个页面
    @Entry @Component struct ComponentTest {

      build() {
        Column({space: 10}) {
          Text('第一个页面')
            .fontSize(30)
            .width('100%')
            .textAlign(TextAlign.Center)

          Button('打开下一页')
            .onClick(() => {
              router.push({
                url: "pages/second",  // 打开新页面
                params: {value: 'Hi'} // 给新页面传递一个对象，key为value，取值以.value的形式
              })
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }

    // 第二个页面
    @Entry @Component struct Second {

      // 3.1.5.5版本之前，取值方式为：router.getParams().key
      private value: string = router.getParams().value;

      // 从3.1.6.5版本起，取值方式为：router.getParams()['key']
      private value: string = router.getParams()['value'];

      build() {
        Column({space: 10}) {
          Text('第二个页面：' + this.value) // 使用获取过来的参数
            .fontSize(30)
            .width('100%')
            .textAlign(TextAlign.Center)

          Button('返回上一页')
            .onClick(() => {
              router.back();              // 返回上一页
            })
        }
        .size({width: '100%', height: '100%'})
      }
    }

页面间跳转

页面间跳转需要借助 featureAbility 模块的 startAbility() 方法，该方法和 router 的功能类似，可以支持参数传递以及打开指定页面等。

featureAbility定义介绍

declare namespace featureAbility {
  /**省略部分方法*/
  function startAbility(parameter: StartAbilityParameter, callback: AsyncCallback<number>): void;
  function startAbility(parameter: StartAbilityParameter): Promise<number>;
  function startAbilityForResult(parameter: StartAbilityParameter, callback: AsyncCallback<AbilityResult>): void;
  function startAbilityForResult(parameter: StartAbilityParameter): Promise<AbilityResult>;
}

startAbility：打开指定 Ability ，在不指定开目标 Ability 里的页面时，则默认打开 Ability 的第一个页面。
- parameter：设置打开 Ability 的参数，说明如下：
  - want：打开目标 Ability 的配置项。
    - bundleName：目标 Ability 的包名称。
    - abilityName：目标 Ability 的全路径。
    - params：传递给目标 Ability 的参数。可以在该参数里指定需要打开的页面。

打开Ability的默认首页面

创建第二个 Ability ，依次点击 File -> new -> Ablity -> Empty Page Ability(eTS) ，添加 SettingAbility ，如下图所示：

点击 Finish 后， OpenHarmony 代码结构如下图所示：

在 default 的 pages 下的 index.ets 添加跳转功能：引入 featureAbility 模块，然后通过 featureAbility 的 startAbility() 方法打开目标 Ability。

    // 引入featureAbility
    import featureAbility from '@ohos.ability.featureAbility';

    @Entry @Component struct Index {

      build() {
        Column() {
          Button('open about ability')
            .onClick(() => {
            	// 打开目标Ability
              featureAbility.startAbility({
                want: {
                  // 目标Ability所在的bundleName，也就是config.json里配置的bundleName
                  bundleName: "com.example.myapplication",
                  // 目标Ability的全路径
                  abilityName: "com.example.myapplication.SettingAbility"
                }
              })
              .then((data) => {
                console.info('Operation successful. Data: ' + JSON.stringify(data))
              })
              .catch((error) => {
                console.error('Operation failed. Cause: ' + JSON.stringify(error));
              })
            })
        }
        .padding(10)
        .width('100%')
        .height('100%')
      }
    }

修改SettingAbility的默认首页面，添加如下文案：

    @Entry @Component struct Index {
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Text('我是SettingAbility的默认首页面')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('100%')
      }
    }

打开Ability的指定页面

在 SettingAbility 的 pages 下添加第二个页面：second.ets，代码如下所示：

    @Entry @Component struct Second {
      build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Text('你好，我是SettingAbility的第二个页面')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('100%')
      }
    }

修改打开 Ability 的代码，添加 url 参数，代码如下：

    featureAbility.startAbility({
      want: {
        bundleName: "com.example.myapplication",
        abilityName: "com.example.myapplication.SettingAbility",
        // 添加uri参数，指定打开SettingAbility下的second页面。
        uri: "pages/second"
      }
    })
    .then((data) => {
      console.info('Operation successful. Data: ' + JSON.stringify(data))
    })
    .catch((error) => {
      console.error('Operation failed. Cause: ' + JSON.stringify(error));
    })