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

HarmonyOS 鸿蒙Next 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目录下，可以通过如下图所示右键“New->Page”来新建页面。

在原有Index页面的基础上，新建一个页面命名为Second的页面。

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。

用法示例如下：

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 运行

运行项目后，初始化界面如图所示。

在Index页面中，点击“跳转”后，即可从Index页面跳转到Second页面，并在Second页面中接收参数和进行页面刷新展示，界面效果如图所示。

当在Second页面点击“返回”后，则会回到如图所示Index页面。

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

618购书大优惠

一分耕耘一分收获，学好HarmonyOS应用开发，挑战高薪！

趁着618活动季节，多给自己充充电。少玩手机，多学习才是王道！目前当当、京东，开启平台惊现购书5折优惠促销活动，可谓是非常实惠！

当然，也有童鞋不喜欢文字，就喜欢看视频，那么也有视频网课，比如，这门幕课网的“鸿蒙系统实战短视频App 从0到1掌握HarmonyOS”就非常的牛B ，可以教你从0开始开发一个类似于抖音的短视频App。共计39个小时的时长，内容也是非常全面！

参考引用


更多关于HarmonyOS 鸿蒙Next ArkTS Ability内页面的跳转和数据传递的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next ArkTS Ability内页面的跳转和数据传递的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，使用ArkTS开发框架进行Ability内页面跳转和数据传递，可以通过以下方式实现：

  1. 页面跳转：

    • 使用navigator.push或navigator.replace方法来实现页面跳转。
    • navigator.push会将新页面压入导航栈，用户可以返回上一页面。
    • navigator.replace则会替换当前页面，用户无法返回。

  2. 数据传递：

    • 在调用navigator.push或navigator.replace时，可以通过传递一个包含所需数据的对象作为参数。
    • 目标页面在onPageShown或onCreate等生命周期方法中，通过this.$router.args获取传递的数据。

示例代码：

// 源页面
navigator.push({
    uri: 'targetAbilityUri', // 目标页面的URI
    params: {
        key1: 'value1',
        key2: 'value2'
    }
});

// 目标页面
@Entry
@Component
struct TargetAbility {
    @State data: any = {};

    @OnShow
    onPageShown() {
        this.data = this.$router.args; // 获取传递的数据
    }

    build() {
        // 使用传递的数据进行页面渲染
        // ...
    }
}

注意，实际开发中URI和参数的处理可能需要根据具体需求进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部