HarmonyOS NEXT 应用开发实战(五、页面的生命周期及使用介绍)

HarmonyOS NEXT是华为推出的最新操作系统,arkUI是其提供的用户界面框架。arkUI的页面生命周期管理对于开发者来说非常重要,因为它涉及到页面的创建、显示、隐藏、销毁等各个阶段。以下是arkUI页面生命周期的介绍及使用举例。

页面的生命周期的作用

页面的生命周期管理在应用开发中具有重要作用,主要体现在以下几个方面:

  1. 资源管理:在不同的生命周期阶段,开发者可以合理分配和释放资源,例如在页面创建时分配内存,在页面销毁时释放内存,从而避免内存泄漏。

  2. 状态保存:通过生命周期方法,可以在页面隐藏时保存当前状态,以便在重新显示时恢复。这样可以提升用户体验,用户返回页面时能够继续之前的操作。

  3. 数据加载和更新:在页面显示时加载数据,确保用户能够看到最新信息。在页面展示前,可以进行必要的数据预处理,提高界面的响应速度和流畅度。

  4. 用户交互处理:根据页面在生命周期中不同的状态,适时处理用户交互,比如在页面隐藏时暂停动画或停止网络请求,减少不必要的操作。

  5. 事件管理:能够更好地管理用户事件,在合适的时机绑定/解绑事件监听器,避免多次绑定导致的性能问题。

  6. 调试和日志记录:通过生命周期方法,可以在各个阶段记录日志,帮助开发者调试应用,了解应用的状态变化和用户行为。

arkUI的自定义组件和页面的关系

  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。
  • 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。
  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
  • onBackPress:当用户点击返回按钮时触发。

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • aboutToDisappear:在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期

// Index.ets
import router from '@ohos.router';// Page
@Entry
@Component
struct MyComponent {@State showChild: boolean = true;// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');}// 组件生命周期aboutToAppear() {console.info('MyComponent aboutToAppear');}// 组件生命周期aboutToDisappear() {console.info('MyComponent aboutToDisappear');}build() {Column() {// this.showChild为true,创建Child子组件,执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false,删除Child子组件,执行Child aboutToDisappearButton('create or delete Child').onClick(() => {this.showChild = false;})// push到Page2页面,执行onPageHideButton('push to next page').onClick(() => {router.pushUrl({ url: 'pages/Page2' });})}}
}// 组件
@Component
struct Child {@State title: string = 'Hello World';// 组件生命周期aboutToDisappear() {console.info('[lifeCycle] Child aboutToDisappear')}// 组件生命周期aboutToAppear() {console.info('[lifeCycle] Child aboutToAppear')}build() {Text(this.title).fontSize(50).onClick(() => {this.title = 'Hello ArkUI';})}
}

以上示例,Index页面包含两个自定义组件,一个是被@Entry装饰的MyComponent,也是页面的入口组件,即页面的根节点;一个是Child,是MyComponent的子组件。只有@Entry装饰的节点才可以使页面级别的生命周期方法生效,所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。

以上示例需要注意的是,区分组件的生命周期和页面的声明周期。只有被@Entry装饰的组件才可以调用页面的生命周期。

// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');}
  • 应用冷启动的初始化流程为:MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。
  • 点击“delete Child”,if绑定的this.showChild变成false,删除Child组件,会执行Child aboutToDisappear方法。
  • 点击“push to next page”,调用router.pushUrl接口,跳转到另外一个页面,当前Index页面隐藏,执行页面生命周期Index onPageHide。此处调用的是router.pushUrl接口,Index页面被隐藏,并没有销毁,所以只调用onPageHide。跳转到新页面后,执行初始化新页面的生命周期的流程。
  • 如果调用的是router.replaceUrl,则当前Index页面被销毁,执行的生命周期流程将变为:Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。上文已经提到,组件的销毁是从组件树上直接摘下子树,所以先调用父组件的aboutToDisappear,再调用子组件的aboutToDisappear,然后执行初始化新页面的生命周期流程。
  • 点击返回按钮,触发页面生命周期Index onBackPress,且触发返回一个页面后会导致当前Index页面被销毁。
  • 最小化应用或者应用进入后台,触发Index onPageHide。当前Index页面没有被销毁,所以并不会执行组件的aboutToDisappear。应用回到前台,执行Index onPageShow。
  • 退出应用,执行Index onPageHide --> MyComponent aboutToDisappear --> Child aboutToDisappear。

页面周期使用举例

比如以下场景,就需要用到页面周期,从一个页面跳转到另一个页面,跳转后的页面需要拿到第一个页面传递过来的参数信息。就需要在第二个页面的生命周期里获取,举例如下:

// Page1.ets
import router from '@ohos.router';@Entry
@Component
struct Page1 {// 页面生命周期方法onPageShow() {console.info('Page1 onPageShow');}// 跳转到Page2并传递数据navigateToPage2() {const data = { message: 'Hello from Page1' };router.pushUrl({ url: 'pages/Page2', params: data });}build() {Column() {Text('This is Page 1').fontSize(30);Button('Go to Page 2').onClick(() => this.navigateToPage2());}}
}// Page2.ets
import router from '@ohos.router';@Entry
@Component
struct Page2 {// 变量用于接收从Page1传来的数据@State message: string = '';// 页面生命周期方法onPageShow() {console.info('Page2 onPageShow');const params = router.getParams(); // 获取传递的参数this.message = params.message; // 赋值给本地状态}// 返回上一页goBack() {router.back(); // 返回上一页面}build() {Column() {Text(this.message).fontSize(30); // 显示接收到的消息Button('Go Back').onClick(() => this.goBack());}}
}

上述示例中,页面路由仍使用了旧的router,仅作为示例。 看官方文档router 已经被标记为「不推荐」了,同时官方推荐使用 Navigation。Navigation 提供了简单易用的分栏模式,如果你有平板/折叠屏适配需求,那么强烈建议你使用 Navigation。关于Navigation路由的介绍,这是后话,后续单独整理一份文档,这里先略过。关于router切换Navigation介绍,可参见官方文档:文档中心-Router切换Navigation

写在最后

最后,推荐下笔者的业余开源app影视项目“爱影家”,推荐分享给与我一样喜欢免费观影的朋友。【注:该项目仅限于学习研究使用!请勿用于其他用途!】

开源地址:爱影家app开源项目介绍及源码

https://gitee.com/yyz116/imovie

💖技术交流

 

 

其他资源

HarmonyOS NEXT应用开发(一、打造最好用的网络通信模块组件)-CSDN博客

OpenHarmony三方库中心仓

UIAbility组件生命周期

页面和自定义组件生命周期

鸿蒙开发ArkTS 页面和自定义组件的生命周期 - 亲爱的老王哥 - 博客园

一、鸿蒙ArkTS/ArkUI实战-页面和自定义组件生命周期 - 简书

官方 Router切换Navigation 指导

【HarmonyOS】听说你还在用 router 做页面路由?我们知道鸿蒙上使用 router 模块进行页面跳转,转眼几 - 掘金

「HarmonyNextOS」页面路由跳转Router更换为Navigation_harmonyos next 页面跳转-CSDN博客

文档中心-设置组件导航和页面路由

【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 )_wx5c66153045676的技术博客_51CTO博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/452654.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊聊Go语言的异常处理机制

背景 最近因为遇到了一个panic问题,加上之前零零散散看了些关于程序异常处理相关的东西,对这块有点兴趣,于是整理了一下golang对于异常处理的机制。 名词介绍 Painc golang的内置方法,能够改变程序的控制流。 当函数调用了pan…

T113 内核中 adbd相关配置1

准备工作 1. 配置 系统:ubuntu24.04docker(ubuntu18.04) 软件vscode, sdk:Tina-linux(BingPi-M2) 2. 构建环境直接使用自带的 source ./build/envsetup.sh lunch 选择 6 编译开启16线程 make -j16boot编译 mboot 打包…

设计模式——装饰者模式(8)

一、定义 指在不改变现有对象结构的情况下,动态地给该对象增加一些职责(即增加其额外功能)的模式。我们先来看一个快餐店的例子。快餐店有炒面、炒饭这些快餐,可以额外附加鸡蛋、火腿、培根这些配菜,当然加配菜需要额…

【网络安全】简单P1:通过开发者工具解锁专业版和企业版功能

未经许可,不得转载。 文章目录 前言发现过程前言 在探索一个SaaS平台的过程中,我发现了一个漏洞,使得我能够在无需订阅的情况下解锁高级(专业/企业)功能。 发现过程 我使用一个没有任何高级功能的基本用户账户进行常规登录。在浏览平台时,我注意到某些按钮和功能上带有…

基于微信小程序的购物系统【附源码、文档】

博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…

web前端--html 5---qq注册

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>qq注册</title> <link rel"impo…

[Linux#66][TCP->IP] 面向字节流 | TCP异常 | filesocket | 网络层IP

目录 1. 面向字节流 思考&#xff1a;对于UDP协议来说&#xff0c;是否也存在“粘包问题”呢&#xff1f; 2.TCP 异常情况 3.知识 1.UDP实现可靠传输(经典面试题) 2. 网络抓包 | 爬虫 3.打通文件和 socket 的关系 4.网络层&#xff1a;IP 前置知识 1. 面向字节流 udp…

java逻辑运算符 C语言结构体定义

1. public static void main(String[] args) {System.out.println(true&true);//&两者均为true才trueSystem.out.println(false|false);// | 两边都是false才是falseSystem.out.println(true^false);//^ 相同为false&#xff0c;不同为trueSystem.out.println(!false)…

git 安装

文章目录 一、ubuntu 安装 git二、centos 安装 git三、检查安装 git 一、ubuntu 安装 git sudo apt-get install get -y二、centos 安装 git sudo s install git -y三、检查安装 git git --version出现此标志git版本号&#xff0c;表示git安装完成。

《Effective C++》 笔记

让自己习惯C&#xff0c;Accustoming Yourself to C 1. 视C为一个语言联邦&#xff0c;View Cas a federation of languages. 将 C视为一个由相关语言组成的联邦而非单一语言。在其某个次语言&#xff08;sublanguage&#xff09;中&#xff0c;各种守则与通例都倾向简单、直观…

【win11】终端/命令提示符/powershell美化

文章目录 1.设置字体1.1. 打开win11的终端/命令提示符/powershell其中之一1.2. 打开终端设置&#xff0c;修改所有终端默认字体为新宋体 2. 修改powershell背景色为蓝色 win11的默认终端/命令提示符/powershell主题风格让人感觉与win10撕裂太大&#xff0c;尤其是字体、背景色&…

Excel:vba实现筛选出有批注的单元格

实现的效果&#xff1a;代码&#xff1a; Sub test() Dim cell As RangeRange("F3:I10000").ClearlastRow Cells(Rows.Count, "f").End(xlUp).Row MsgBox lastrow For Each cell In Range("a1:a21")If Not cell.Comment Is Nothing ThenMsgBox…

从DexMV、VideoDex、MimicPlay到SeeDo:从人类视频中学习:机器人的主流训练方法之一

前言 在此文《UMI——斯坦福刷盘机器人&#xff1a;从手持夹持器到动作预测Diffusion Policy(含代码解读)》的1.1节开头有提到 机器人收集训练数据一般有多种方式&#xff0c;比如来自人类视频的视觉演示 有的工作致力于从视频数据——例如YouTube视频中进行策略学习 即最常见…

推荐一款非常优秀的3D建模软件:PTC Creo

PTC Creo是美国PTC公司最新研发出来的一款超级强大的3D建模辅助类大型软件&#xff0c;这款软件是针对产品设计以及开发的软件&#xff0c;它具有一系列3D CAD、CAM、CAE等开发工具和套件&#xff0c;而且可用性极高。从概念设计一直到制造出产品&#xff0c;本软件都可以完成任…

Windows API 一 ----起步

目录 1.介绍主函数入口参数。 2. 简单介绍 Windows.h 这个头文件 小结&#xff0c;也聊一聊 1.介绍主函数入口参数。 第一个参数: HINSTANCE 类型的 参数&#xff0c; 称为“实例句柄“&#xff0c;这个参数唯一标志了我们写的这个程序。 第二个参数&#xff1a; HINSTANCE…

ORA-12541: TNS: 无监听程序

目录 1. 检查服务是否开启2. ip的原因 ORA-12541: TNS: 无监听程序 &#xff08;特别感谢&#xff09;参考链接&#xff1a;https://blog.csdn.net/qq_43540696/article/details/102522292 Traceback (most recent call last): File "D:\D01-software\D01010-PyCharm_co…

Java爬虫:获取直播带货数据的实战指南

在当今数字化时代&#xff0c;直播带货已成为电商领域的新热点&#xff0c;通过直播平台展示商品并进行销售&#xff0c;有效促进了产品的曝光和销售量的提升。然而&#xff0c;如何在直播带货过程中进行数据分析和评估效果&#xff0c;成为了摆在商家面前的一个重要问题。本文…

STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来

参考文档&#xff1a; STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来 - asml - 博客园 症状 最近开始学习STM32Cube,发现新建工程后无法正常调试,过了HAL_Init();之后就无法继续调试了. 无法进行让程序暂停以及停止等操作.并在输出窗口不断刷出 ERROR: Can n…

Golang | Leetcode Golang题解之第486题预测赢家

题目&#xff1a; 题解&#xff1a; func PredictTheWinner(nums []int) bool {return total(nums, 0, len(nums) - 1, 1) > 0 }func total(nums []int, start, end int, turn int) int {if start end {return nums[start] * turn}scoreStart : nums[start] * turn total…

边缘计算技术的优势与挑战

如今&#xff0c;随着5G快速无线网络的到来&#xff0c;将计算存储和物联网&#xff08;IoT&#xff09;分析的部署放在靠近数据产生的地方&#xff0c;使得边缘计算成为可能。 物联网设备和新应用的扩展需要实时计算能力。5G无线正在考虑边缘系统&#xff0c;以快速跟踪支持实…