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

简介: HarmonyOS ArkTS Ability 的数据传递包括有 Ability 内页面的跳转和数据传递、Ability 间的数据跳转和数据传递。本节主要讲解 Ability 内页面的跳转和数据传递。打开 DevEco Studio,选择一个 Empty Ability 工程模板,创建一个名为 “ArkUIPagesRouter” 的工程为演示示例。

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
目录
相关文章
|
21天前
|
监控 开发者
鸿蒙5.0版开发:使用HiLog打印日志(ArkTS)
在HarmonyOS 5.0中,HiLog是系统提供的日志系统,支持DEBUG、INFO、WARN、ERROR、FATAL五种日志级别。本文介绍如何在ArkTS中使用HiLog打印日志,并提供示例代码。通过合理使用HiLog,开发者可以更好地调试和监控应用。
65 16
|
21天前
|
监控 UED 开发者
鸿蒙next版开发:订阅应用事件(ArkTS)
在HarmonyOS 5.0中,ArkTS引入了强大的应用事件订阅机制,允许开发者订阅和处理系统或应用级别的事件,这对于监控应用行为、优化用户体验和进行性能分析至关重要。本文详细介绍了如何在ArkTS中订阅应用事件,并提供了示例代码,包括导入模块、创建观察者、设置事件参数等步骤。通过这些方法,开发者可以更智能地管理和响应应用事件。
73 11
|
21天前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
48 11
|
21天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
57 10
|
20天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
56 8
|
20天前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
45 7
|
20天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
44 7
|
21天前
|
开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(文本通用)
在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。
54 8
|
20天前
|
前端开发 API
鸿蒙next版开发:相机开发-预览(ArkTS)
在HarmonyOS 5.0中,使用ArkTS进行相机预览是核心功能之一。本文详细介绍了如何使用ArkTS实现相机预览,包括导入相机接口、创建Surface、获取相机输出能力、创建会话并开始预览,以及监听预览输出状态等步骤,并提供了代码示例。通过本文,读者可以掌握在HarmonyOS 5.0中使用ArkTS进行相机预览的基本方法。
43 6
|
20天前
|
监控 Shell API
鸿蒙next版开发:使用HiChecker检测问题(ArkTS)
在HarmonyOS 5.0中,HiChecker是一个强大的工具,帮助开发者检测应用中的潜在问题,如耗时调用和资源泄露。本文详细介绍了如何在ArkTS中使用HiChecker,包括添加检测规则、触发检测和日志输出等步骤,并提供了示例代码。通过合理使用HiChecker,开发者可以提高应用的稳定性和性能。
36 6