第六节HarmonyOS UIAbility内页面的跳转和数据传递

一、页面跳转

在一个应用包含一个UIAbility的场景下，可以通过新建多个页面来实现和丰富应用的内容。这会涉及到UIAbility内页面的新建以及UIAbility内页面的跳转和数据传递。

打开DevEco Studio，选择一个Empty Ability工程模板，创建一个工程，例如命名为MyApplication。一些目录的介绍：

1、在src/main/ets/entryability目录下，初始会生成一个UIAbility文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现UIAbility的生命周期回调内容。

2、在src/main/ets/pages目录下，会生成一个Index页面。这也是基于UIAbility实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。

3、在src/main/ets/pages目录下，右键New->Page，新建一个Second页面，用于实现页面间的跳转和数据传递。

实现步骤：

为了实现页面的跳转和数据传递，需要新建一个页面。在原有Index页面的基础上，新建一个页面，例如命名为Second.ets。

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。

复制代码

import router from '@ohos.router';

EntryAbility.ts文件内容不变

Index.ets 第一个页面代码：

复制代码

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = 'Index Pages';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button("Next")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: {
                name: "Index页面传来的数据",
              }
            }, router.RouterMode.Single)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Second.ets 第二个页面代码：

复制代码

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State message: string = 'Second Pages';
  @State name: string = (router.getParams() as Record<string, string>)['name'];

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Text(this.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .opacity(0.6)
          .fontColor(Color.Red)
        Blank()
        Button("Next")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.replaceUrl({
              url: 'pages/ThreePage',
              params: {
                name: "Second页面传来的数据",
              }
            }, router.RouterMode.Single)
          })
        Blank()
        Button("Back")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.back();
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

ThreePage.ets 第三个页面代码：

复制代码

import router from '@ohos.router';

@Entry
@Component
struct ThreePage {
  @State message: string = 'Three Pages'
  @State name: string = (router.getParams() as Record<string, string>)['name'];

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(32)
          .fontWeight(FontWeight.Bold)
        Text(this.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .opacity(0.6)
          .fontColor(Color.Red)
        Blank()
        Button("Back")
          .width('296vp')
          .height('40vp')
          .margin({ top: 20 })
          .fontSize('16fp')
          .onClick(() => {
            router.back();
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

注意：从中也可以看出，从第一个页面跳转到第二个页面使用的是router.pushUrl（...）方式跳转页面，而第二个页面跳转到第三个页面使用的是router.replaceUrl（...）方式。

方式一： API9及以上，router.pushUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈的元素数量不变；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量会加1。

说明： 当页面栈的元素数量较大或者超过32时，可以通过调用router.clear()方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。

复制代码

router.pushUrl({
  url: 'pages/Second',
  params: {
    name: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

方式二： API9及以上，router.replaceUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。

复制代码

router.replaceUrl({
  url: 'pages/ThreePage',
  params: {
    name: 'Second页面传来的数据',
  }
}, router.RouterMode.Single)

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

操作示意：

点击Index.ets页面"Next"按钮，会跳转到Second.ets页面。

在Second.ets页面点击"Next"按钮，会跳转到ThreePage.ets页面

在Second.ets页面点击"Back"按钮，会返回到Index.ets页面

在ThreePage.ets页面点击"Back"按钮，会返回到Index.ets页面

二、页面返回与参数接收

在Second页面中，可以通过调用router.back()方法实现返回到上一个页面，或者在调用router.back()方法时增加可选的options参数（增加url参数）返回到指定页面。

说明：调用router.back()返回的目标页面需要在页面栈中存在才能正常跳转。

例如调用router.pushUrl()方法跳转到Second页面，在Second页面可以通过调用router.back()方法返回到上一个页面。

例如调用router.clear()方法清空了页面栈中所有历史页面，仅保留当前页面，此时则无法通过调用router.back()方法返回到上一个页面。

返回上一个页面：

router.back();

返回到指定页面：

router.back({ url: 'pages/Index' });

已经实现了页面的跳转，接下来，在Second页面中如何进行自定义参数的接收呢？

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

复制代码

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State name: string = (router.getParams() as Record<string, string>)['name'];
  // 页面刷新展示
  ...
}