OpenHarmony开发实战：UIAbility内和UIAbility间页面的跳转（ArkTS）

最新推荐文章于 2024-06-19 12:57:35 发布
最新推荐文章于 2024-06-19 12:57:35 发布
阅读量579 收藏 10
点赞数 7
文章标签： 鸿蒙 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84871540/article/details/138988614
版权

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

介绍

本篇Codelab基于Stage模型下的UIAbility开发，实现UIAbility内和UIAbility间页面的跳转。包含如下功能：

  1. UIAbility内页面的跳转。
  2. 跳转到指定UIAbility的首页。
  3. 跳转到指定UIAbility的指定页面（非首页）。

最终效果图如下：

相关概念
  • UIAbility组件概述：UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或多个UIAbility组件。
  • UIAbilityContext：UIAbilityContext是UIAbility的上下文环境，继承自Context，提供UIAbility的相关配置信息以及操作UIAbility和ServiceExtensionAbility的方法。
  • 页面路由：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。
  • Text：文本组件，用于呈现一段文本信息。
  • Button：按钮组件，可快速创建不同样式的按钮。
环境搭建
软件要求
  • DevEco Studio版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。
硬件要求
环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：


2. 搭建烧录环境。

1. [完成DevEco Device Tool的安装]( )
2. [完成RK3568开发板的烧录]( )

  1. 搭建开发环境。

    1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。

├──device/src/main/ets              // device模块的代码区
│  ├──pages
│  │  ├──Index.ets                  // SecondAbility的Index页面
│  │  └──Second.ets                 // SecondAbility的Second页面
│  ├──secondability
│  │  └──SecondAbility.ets          // 程序入口类
├──device/src/main/resources        // device模块的资源文件目录
├──entry/src/main/ets               // entry模块的代码区
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets     // 公共常量类
│  │  │  └──StyleConstants.ets	    // 样式常量类
│  │  ├──utils
│  │  │  ├──GlobalContext.ets       // 全局变量控制类
│  │  │  └──Logger.ets	            // 日志打印类
│  ├──entryability
│  │  └──EntryAbility.ts            // 程序入口类
│  ├──model
│  │  └──ButtonClickMethod.ets      // 按钮点击后调用的方法类
│  ├──pages
│  │  ├──Index.ets                  // EntryAbility的Index页面
│  │  └──Second.ets                 // EntryAbility的Second页面
└──entry/src/main/resources         // entry模块的资源文件目录

UIAbility内页面的跳转

entry模块中，EntryAbility内页面的跳转可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。效果图如下：

  1. 实现UIAbility内页面的跳转，我们首先需要构建两个页面。在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到EntryAbility的Index页面由一个Image组件、两个Text组件、三个Button组件组成。“Index.ets”文件的示例代码如下：
@Entry
@Component
struct Index {
  @State text: string = '';
  @State bottomMargin: string = StyleConstants.MAIN_INDEX_BUTTON_MARGIN_BOTTOM;

  build() {
    Column() {
      Image($r('app.media.right'))
        ...

      Text($r('app.string.main_index_page_name'))
        ...

      // 条件渲染：当text的值不为空时，显示该组件
      if (this.text !== '') {
        Text(this.text)
          ...
      }

      // 导航到EntryAbility的Second Page
      Button($r('app.string.to_main_second_page_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...

      // 导航到SecondAbility的Index Page
      Button($r('app.string.to_second_index_page_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...

      // 导航到SecondAbility的Second Page
      Button($r('app.string.to_second_second_page_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...
    }
    ...
  }
}
  1. 在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > Page”，命名为“Second”。可以看到EntryAbility的Second页面由一个Image组件、两个Text组件、一个Button组件组成。“Second.ets”文件的示例代码如下：
@Entry
@Component
struct Second {
  ...

  build() {
    Column() {
      Image($r('app.media.left'))
        ...

      Text($r('app.string.main_second_page_name'))
        ...

      Text(`${this.src}：${this.count}`)
        ...

      // 返回到EntryAbility的Index Page
      Button($r('app.string.back_main_index_page_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...
    }
    ...
  }
}

  1. 从entry模块的Index页面跳转到Second页面，并进行数据传递，通过页面路由router来实现。需要如下几个步骤：

    • 给两个页面导入router模块。
    • 在EntryAbility的Index页面中，点击“导航到EntryAbility的Second Page”按钮后，调用ButtonClickMethod类中的toEntryAbilitySecond方法，跳转到EntryAbility的Second页面。使用router.pushUrl实现跳转，可以通过params来向新页面传入参数，示例代码如下：
// 导入router模块
import router from '@ohos.router';
  
// 导航到EntryAbility的Second Page
toEntryAbilitySecond() {
  router.pushUrl({
    url: 'pages/Second',
    params: {
      src: textMessage,
      count: CommonConstants.NUM_VALUES[0]
    }
  });
}

* Second页面通过router.getParams()方法获取Index页面传递过来的自定义参数，并用一个Text文本展示从Index页面传递过来的数据，示例代码如下：

@Entry
@Component
struct Second {
  ...
  // 获取Index页面传递过来的自定义参数
  params = router?.getParams();
  @State src: string = this.params == undefined ? '-' : (this.params as Record<string,Object>)['src'] as string;
  @State count: number = this.params == undefined ? 0 : (this.params as Record<string,Object>)['count'] as number;
  
  build() {
    Column() {
      Image($r('app.media.left'))
        ...
  
      Text($r('app.string.main_second_page_name'))
        ...
  
      // 用一个Text文本展示从Index页面传递过来的数据      
      Text(`${this.src}：${this.count}`)
        ...
  
      // 返回到EntryAbility的Index Page
      Button($r('app.string.back_main_index_page_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...
    }
    ...
  }
}
  1. 从entry模块的Second返回到Index页面，使用router.back来实现。在EntryAbility的Second页面中，点击“返回到EntryAbility的Index Page”按钮后，返回到EntryAbility的Index页面，示例代码如下：
// 返回到EntryAbility的Index Page
router.back();

跳转到指定UIAbility的首页

实现UIAbility间页面的跳转，需要启动另外一个UIAbility，可以通过UIAbilityContext的startAbility的方法来完成。本篇Codelab是用两个模块（entry和device），实现UIAbility间页面的跳转。跳转到指定UIAbility的首页，效果图如下：

  1. 在本章节中，实现跳转到指定UIAbility的首页，我们需要新建一个模块。在“Project”窗口，右键点击“entry 文件夹”，选择“New > Module > Empty Ability > Next”，在“Module name”中给新建的模块命名为“device”，点击“Next”，在“Ability name”中给新建模块的Ability命名为“SecondAbility”，点击“Finish”。可以看到文件目录结构如下：


2. 构建SecondAbility的首页。在“Project”窗口，点击“device > src > main > ets > pages”，打开“Index.ets”文件，可以看到SecondAbility的Index页面由一个Image组件、两个Text组件、一个Button组件组成。“Index.ets”文件的示例代码如下：

@Entry
@Component
struct Index {
  ...

  build() {
    Column() {
      Image($r('app.media.left'))
        ...

      Text($r('app.string.second_index_page_name'))
        ...

      Text(`${this.src}：${this.count}`)
        ...

      // 停止SecondAbility自身
      Button($r('app.string.terminate_second_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...
    }
    ...
  }
}

  1. 从entry模块的EntryAbility的首页，跳转到SecondAbility的首页，即从EntryAbility的Index页面跳转到SecondAbility的Index页面。通过UIAbilityContext的startAbility方法来实现。

    • 首先需要在EntryAbility的“Index.ets”文件中获取UIAbilityContext，示例代码如下：
    // 获取UIAbilityContext
let context = getContext(this) as common.UIAbilityContext;

    说明： 如果需要使用UIAbilityContext中的方法，需要在对应的页面获取相应的UIAbilityContext。

    • 在EntryAbility的Index页面中，点击“导航到SecondAbility的Index Page”按钮后，调用ButtonClickMethod类中的toSecondAbilityIndex方法，拉起SecondAbility的Index页面。使用UIAbilityContext.startAbility来实现，可以通过parameters来向被拉起方传递参数，示例代码如下：
    // 导航到SecondAbility的Index Page
toSecondAbilityIndex(context: common.UIAbilityContext) {
  let want: Want = {
    'deviceId': '',
    'bundleName': CommonConstants.BUNDLE_NAME,
    'abilityName': CommonConstants.SECOND_ABILITY_NAME,
    'moduleName': CommonConstants.DEVICE_MODULE_NAME,
    'parameters': {
       src: textMessage,
       count: CommonConstants.NUM_VALUES[1]
     }
  };
  context.startAbility(want).then(() => {
    Logger.info(CommonConstants.TAG, `start second ability index page succeed with ${JSON.stringify(want)}`);
  }).catch((error: Error) => {
    Logger.error(CommonConstants.TAG, `start second ability index page failedwith ${error}`);
  });
}
    • 在SecondAbility的Index页面，获取从EntryAbility的Index页面传递过来的自定义参数，并用一个Text文本展示从Index页面传递过来的数据，示例代码如下：
    @Entry
@Component
struct Index {
  // 获取从EntryAbility的Index页面传递过来的自定义参数
  secondAbilityWant?: Want = GlobalContext.getContext().getObject('secondAbilityWant');
  @State src: string = this.secondAbilityWant?.parameters?.src as string ?? '-';
  @State count: number = this.secondAbilityWant?.parameters?.count as number ?? 0;

  build() {
    Column() {
      Image($r('app.media.left'))
        ...

      Text($r('app.string.second_index_page_name'))
        ...

      // 用一个Text文本展示从Index页面传递过来的数据
      Text(`${this.src}：${this.count}`)
        ...

      // 停止SecondAbility自身
      Button($r('app.string.terminate_second_btn_text'), { type: ButtonType.Capsule, stateEffect: true })
        ...
    }
    ...
  }
}

  2. 在SecondAbility的Index页面，点击“停止SecondAbility自身”按钮，使用UIAbilityContext.terminateSelf方法手动销毁Ability。示例代码如下：

// 停止SecondAbility自身
terminateSecondAbility(context: common.UIAbilityContext) {
  context.terminateSelf().then(() => {
    Logger.info(CommonConstants.TAG, 'terminate second ability self succeed');
  }).catch((error: Error) => {
    Logger.error(CommonConstants.TAG, `terminate second ability self failed with ${error}`);
  });
}
  1. 运行时，需要在DevEco Studio的entry模块中勾选“Deploy Multi Hap Packages”，如下图所示：

跳转到指定UIAbility的指定页面（非首页）

跳转到指定UIAbility的指定页面（非首页），本章节以从EntryAbility的Index页面跳转到SecondAbility的Second页面为例。只需要在本文档“跳转到指定UIAbility的首页”章节的基础上，另外在device模块中构建一个Second页面。效果图如下：

  1. 构建SecondAbility的Second页面。在“Project”窗口，打开“device > src > main > ets”，右键点击“pages”文件夹，选择“New > Page”，命名为“Second”。可以看到文件目录结构如下：

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

ce > src > main > ets”，右键点击“pages”文件夹，选择“New > Page”，命名为“Second”。可以看到文件目录结构如下：

[外链图片转存中…(img-HsBfLEh4-1715898937587)]
[外链图片转存中…(img-M9LIskJw-1715898937588)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84871540
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS实战开发-实现UIAbility内和UIAbility间页面的跳转
m0_70749039的博客
03-29 1279
本篇Codelab基于Stage模型下的UIAbility开发，实现UIAbility内和UIAbility间页面的跳转。包含如下功能：
OpenHarmony开发实战：Ability内页面间的跳转（ArkTS）
shudaoshanQAQ的博客
04-03 652
本篇Codelab基于Stage模型下的Ability开发
HarmonyOS/OpenHarmony应用开发-stage使用显示Want启动Ability
weixin_69135651的博客
02-07 661
HarmonyOS/OpenHarmony应用开发-stage使用显示Want启动Ability
HarmonyOS —— UIAbility 页面跳转总结
欢迎来到Gorit的博客
12-27 1126
【无标题】
weixin_69135651的博客
08-24 163
概述 Context是应用中对象的上下文，其提供了应用的一些基础信息，例如resourceManager（资源管理）、applicationInfo（当前应用信息）、dir（应用开发路径）、area（文件分区）等，以及应用的一些基本方法，例如createBundleContext()、getApplicationContext()等。
UIAbility内页面间的跳转案例示例代码
01-26
每次新建文档时，可以传入一个新的Key值（例如可以将文件的路径作为一个Key标识），此时AbilityStage中启动UIAbility时都会创建一个新的UIAbility实例；当新建的文档保存之后，回到桌面，或者新打开一个已保存的文档...
jQuery移动web开发之页面跳转和加载外部页面的实现
11-23
changePage() 页面跳转 jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面，使用$.mobile对象的changePage方法来实现。但要使用此方式的时候，要以点击一个链接或者提交表单来实现。此...
华为手表开发：WATCH 3 Pro 新建页面和跳转页面
02-17
华为手表开发：WATCH 3 Pro 新建页面和跳转页面，鸿蒙开发，参考文章：https://blog.csdn.net/qq_36051316/article/details/129036051，有问题可以加群 qq ：434606064 提问纠正
php开发中的页面跳转方法总结
01-20
页面自动跳转在WEB开发中经常用到，而且根据需求可以采用不同的跳转方式，比如提示操作信息后延时跳转等， 本文总结了WEB开发中常见的几种页面跳转方法。 PHP header()函数跳转 PHP的header()函数非常强大，其中在...
PHP服务器页面间跳转实现方法
10-27
在ASP中,我们可以使用Server.Transfer来实现在服务器端重定向,PHP中虽然没有这样的函数,但是要实现类似的跳转也不难
鸿蒙开发基础-UIAbility内页面间的跳转
m0_62167422的博客
01-09 644
基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。
Ability跳转指定Slice的方法
xiaoxijinger的博客
07-28 568
今天我们继续介绍一下Ability跳转指定Slice的方法，并配上了对应的代码示例，喜欢的同学记得收藏一下。 Ability跳转指定Slice Ability之间是可以实现跳转的，也可以实现从一个Page Ability 跳转到指定的Slice。同时也可以实现传值的效果。 第一步：在layout文件夹下创建一个ability_main.xml，分别添加两个按钮 第二步：创建MainAbilitySlice类，添加两个Button，绑定事件。 第三步：创建一个HomeAbility ，其中包含两个Slic
鸿蒙开发（四）UIAbility和Page交互
zhaojun的博客
02-02 2567
通过上一篇的学习，相信大家对UIAbility已经有了初步的认知。在上篇中，我们最后实现了一个小demo，从一个UIAbility调起了另外一个UIAbility。当时我提到过，暂不实现比如点击EntryAbility中的控件去触发跳转，而是在EntryAbility加载完后直接打开FuncUIAbility。本篇，带着大家一起学习下UIAbility和Page之间的交互。
【鸿蒙应用开发系列】- 打开页面与页面间数据交互
枫的专栏
09-06 1474
在鸿蒙系统中，有两种方式可以启动一个页面，分别是 startAbility、startAbilityForResult， startAbilityForResult相对于startAbility，增加了页面关闭后返回的结果回传功能，那我们应该怎么使用、这两个方法达到一个开启新页面以及参数传递的功能呢，比如A页面，拉起B页面，传递一个字符串数据 “您好，这条消息来自A”，
鸿蒙系统学习六-Ability之间跳转和传参
luwei233的博客
08-17 5097
AbilitySlice 间跳转 present 当发起的 AbilitySlice 和目标的 AbilitySlice 处于同一个 Page 时，您可以通过 present()方法实现跳转 界面一如图：点击跳转界面二并传递参数，AbilitySlice之前传参也通过Intent，如下代码所示： public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent)
【鸿蒙 HarmonyOS】界面跳转 ( AbilitySlice 之间的界面跳转 | AbilitySlice 之间的值传递 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
12-20 4116
一、AbilitySlice 之间的界面跳转、 二、完整代码示例、 三、运行结果
ability鸿蒙,鸿蒙 Ability 讲解(Data Ability讲解)
weixin_39623273的博客
05-28 1193
四、Data Ability讲解使用 Data 模板的 Ability(以下简称“Data”)有助于应用管理其自身和其他应用存储数据的访问，并提供与其他应用共享数据的方法。Data 既可用于同设备不同应用的数据共享，也支持跨设备不同应用的数据共享。数据的存放形式多样，可以是数据库，也可以是磁盘上的文件。Data 对外提供对数据的增、删、改、查，以及打开文件等接口，这些接口的具体实现由开发者提供。说...
【面试实战】# 并发编程之线程池配置实战
最新发布
暴躁的菜鸡的博客
06-19 968
IO密集型任务: 使用公式计算线程池大小。CPU密集型任务: 使用公式计算线程池大小。混合型任务: 综合IO和CPU的公式进行计算和调整。W: 平均等待时间C: 平均计算时间实际应用: 根据QPS或TPS、响应时间、期望的CPU利用率等参数进行计算，并定期监控系统负载进行调整。合理的线程池配置可以显著提升系统的处理能力和资源利用率，因此根据具体需求和系统指标进行精细配置是至关重要的。
用华为鸿蒙UIability实现页面间跳转和数据传递
04-10
华为鸿蒙UIability提供了多种方式实现页面间的跳转和数据传递，包括startAbility、startAbilityForResult、startAbilityAndExpectResult、startAbilityWithIntent等方法，同时也支持使用Bundle和Intent等方式传递...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值