HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

自定义组件的生命周期

允许在生命周期函数中使用 Promise 和异步回调函数,比如网络资源获取,定时器设置等;

页面生命周期

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

onPageShow

页面加载时触发,页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

onPageHide

从第一个页面跳转第二个页面后,第一个页面会最为后台,触发onPageHide生命周期

页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。
下面是代码尝试

LifeCycle页面

import router from '@ohos.router'
@Entry
@Component
struct LifeCycle {@State message: string = '第一页'build() {Row() {Column() {Text(this.message).fontSize(25)Divider()Button('Next').onClick(() => {router.pushUrl({url:'pages/LifeCycle2'})}).fontSize(25)}.width('100%')}.height('100%')}onPageShow() {console.log('第一页:——onPageShow')}onPageHide() {console.log('第一页:——onPageHide')}onBackPress() {console.log('第一页:——onBackPress')}
}

LifeCycle2页面

import router from '@ohos.router'@Entry
@Component
struct LifeCycle2 {@State message: string = '第二页'build() {Row() {Column() {Text(this.message).fontSize(25)Divider()Button('Back').onClick((event: ClickEvent) => {router.back()}).fontSize(25)}.width('100%')}.height('100%')}onPageShow() {console.log('第二页:——onPageShow')}onPageHide() {console.log('第二页:——onPageHide')}onBackPress() {console.log('第二页:——onBackPress')}
}

效果的话大家可以从 DevEco Studio 左下角第四个日志中查看具体效果。

onBackPress

监听物理返回键,也就是手机上的回退,并不是路由连接router.back()的返回.
请添加图片描述

组件生命周期

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

aboutToAppear

在 build 构建之前渲染此生命周期。
详解:aboutToAppear 函数在创建自定义组件的新实例后,在执行其 build()函数之前执行。允许在 aboutToAppear 函数中改变状态变量,更改将在后续执行 build()函数中生效。

aboutToDisappear

组件销毁时触发,例如删除,移出等操作。
详解:aboutToDisappear 函数在自定义组件析构销毁之前执行。不允许在 aboutToDisappear 函数中改变状态变量,特别是@Link 变量的修改可能会导致应用程序行为不稳定。

例:

import router from '@ohos.router'@Entry
@Component
struct LifeCycle {@State message: string = '第一页'@State status: boolean = truebuild() {Row() {Column({ space: 20 }) {Text(this.message).fontSize(25)Divider()Button('Next').onClick(() => {router.pushUrl({ url: 'pages/LifeCycle2' })}).fontSize(25)Divider()if (this.status) {LifeCycle_son()}Button('上段文字显示/隐藏').onClick(() => {this.status = !this.status}).fontSize(25)}.width('100%')}.height('100%')}onPageShow() {console.log('第一页:——onPageShow')}onPageHide() {console.log('第一页:——onPageHide')}onBackPress() {console.log('第一页:——onBackPress')}
}@Component
struct LifeCycle_son {build() {Column() {Text('我是第一页的一个子组件').fontSize(30)}}// aboutToAppear函数在创建自定义组件的新实例后,在执行其build()函数之前执行。aboutToAppear() {console.log('我是第一页的一个子组件:aboutToAppear')}// aboutToDisappear函数在自定义组件析构销毁之前执行。aboutToDisappear() {console.log('我是第一页的一个子组件:aboutToDisappear')}
}

请添加图片描述

点击两次上段文字显示/隐藏按钮
依次出现上述的生命周期为:
请添加图片描述

可以看到,如果将组件删除的话就可以触发aboutTodisappear生命周期
再次点击显示时触发aboutToAppear生命周期。当然默认的话会先触发aboutToAppear,因为他默认组件LifeCycle_son是先存在的。

页面路由

路由跳转

router.pushUrl({ url: "路径" });

路由传参

router.pushUrl({url: "/pages/LifeCycle2",params: {id: 1,username: "Southern Wind",age: 18,},
});

接受参数username,在LifeCycle2页面router.getParams()

let username = router.getParams()['username'] as string

效果:
请添加图片描述

应用之间传参

公共数据共享创建参数

// 应用程序数据共享
AppStorage.Set('message','我要玩原神')
AppStorage.SetOrCreate('message2','Southern Wind')

其他页面获取此数据

let name:string = AppStorage.Get('message2')

注意:此Api需要用真机进行调试,模拟器没有效果的!!

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

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

相关文章

Postman基本使用、测试环境(Environment)配置

文章目录 准备测试项目DemoController测试代码Interceptor模拟拦截配置 Postman模块简单介绍Postman通用环境配置新建环境(Environment)配置环境(Environment)设置域名变量引用域名变量查看请求结果打印 Postman脚本设置变量登录成功后设置全局Auth-Token脚本编写脚本查看conso…

2种数控棋

目录 数控棋1 数控棋2 数控棋1 棋盘: 初始局面: 规则: 规则:双方轮流走棋,可走横格、竖格、可横竖转弯,不可走斜格。每一步均须按棋所在格的数字走步数,不可多不可少。 先无法走棋的一方为…

分布式ID(2):雪花算法生成ID

1 雪花算法简介 这种方案大致来说是一种以划分命名空间(UUID也算,由于比较常见,所以单独分析)来生成ID的一种算法,这种方案把64-bit分别划分成多段,分开来标示机器、时间等,比如在snowflake中的64-bit分别表示如下图(图片来自网络)所示: 41-bit的时间可以表示(1L&l…

Android Studio安卓开发--ListView学习整理

ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚动出屏幕。 1.ListView的简单用法 (1)activity_main.xml布局中加入ListView控件:(先占满整个布局的空间)…

Linux搭建dns主从服务器

一、实验要求 配置Dns主从服务器,能够实现正常的正反向解析 二、知识点 1、DNS简介 DNS(Domain Name System)是互联网上的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网。…

CHS_01.2.2.1+调度的概念、层次

CHS_01.2.2.1调度的概念、层次 调度的概念、层次知识总览调度的基本概念调度的三个层次——高级调度![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6957fdec179841f69a0508914145da36.png)调度的三个层次——低级调度调度的三个层次——中级调度补充知识&#xff…

大模型背景下计算机视觉年终思考小结(二)

1. 引言 尽管在过去的一年里大模型在计算机视觉领域取得了令人瞩目的快速发展,但是考虑到大模型的训练成本和对算力的依赖,更多切实的思考是如果在我们特定的小规模落地场景下的来辅助我们提升开发和落地效率。本文从相关数据集构造,预刷和生…

【STM32】STM32学习笔记-I2C通信外设(34)

00. 目录 文章目录 00. 目录01. I2C简介02. I2C外设简介03. I2C框图04. I2C基本结构05. 主机发送06. 主机接收07. 软件/硬件波形对比08. 预留09. 附录 01. I2C简介 I2C(Inter-Integrated Circuit)总线是一种由NXP(原PHILIPS)公司开发的两线式…

LightGlue: Local Feature Matching at Light Speed

一、论文概述 发表于: 2023 ICCV 作者信息:Philipp Lindenberger Paul-Edouard Sarlin Marc Pollefeys 对比算法:SuperGlue 代码:github.com/cvg/LightGlue 效果: 现有问题: 1) SuperGlue 与其他基于 …

mybatis xml多表查询,子查询,连接查询,动态sql

项目结构 数据库表 student_type 表 student 表 依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.30</version></dependency><dependency><groupId>org.…

使用zabbix-proxy进行分布式监控

目录 一、准备4台服务器 二、配置主从复制 1.准备环境 2.主机名解析 3.安装数据库 4.配置主库db1 5.配置从库db2 6.主从状态显示 三、db1&#xff0c;db2配置zabbix-agent 三、zabbix-server的配置 四、zabbix-proxy的配置 1.为您的平台安装和配置Zabbix-proxy a. …

beego的模块篇 - I18n国际化

1. i18n 安装导入 安装该模块&#xff1a; go get github.com/beego/i18n 导入引用包&#xff1a; import ("github.com/beego/i18n" ) conf 目录下就有 locale_en-US.ini 和 locale_zh-CN.ini 两个本地化文件。 本地化文件的文件名和后缀是随意的&#xff0c;不…