第十九讲_HarmonyOS应用页面和自定义组件生命周期

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

  • [1. 什么叫页面](#1. 什么叫页面)
  • [2. 什么叫自定义组件](#2. 什么叫自定义组件)
  • [3. 页面的生命周期](#3. 页面的生命周期)
  • [4. 自定义组件的生命周期](#4. 自定义组件的生命周期)
  • [5. 一个页面的生命周期流程](#5. 一个页面的生命周期流程)

1. 什么叫页面

页面:即HarmonyOS应用的UI页面。

  • 由一个或者多个自定义组件组成
  • @Entry装饰的自定义组件为页面的入口组件,一个页面有且仅能有一个@Entry
  • 只有被@Entry装饰的组件才可以调用页面的生命周期

2. 什么叫自定义组件

自定义组件@Component装饰的UI单元。

  • 可以组合多个系统组件实现UI的复用
  • 可以调用组件的生命周期

3. 页面的生命周期

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

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

4. 自定义组件的生命周期

  • aboutToAppear():组件即将出现时回调,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。
  • aboutToDisappear():在自定义组件析构销毁之前执行。

5. 一个页面的生命周期流程

@Entry装饰的组件(即页面)生命周期的流程图:

typescript 复制代码
/**
 * 被@Component修饰就是一个组件
 * 被@Entry修饰的组件就是一个页面
 */
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  // 自定义组件的新实例后,在执行其build()函数之前执行
  aboutToAppear() {
    console.warn("组件被实例化了")
  }

  // 页面每次显示时触发一次,包括路由过程、应用进入前台等场景
  onPageShow() {
    console.warn("页面被显示了");
  }

  // 页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景
  onPageHide() {
    console.warn("页面被隐藏了")
  }

  // 当用户点击返回按钮时触发
  onBackPress() {
    console.warn("返回")
  }

  // 自定义组件的新实例后,在执行其build()函数之前执行
  aboutToDisappear() {
    console.warn("组件被销毁了")
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
bash 复制代码
09-05 22:16:29.093 16926-23064/? W 0FEFE/JsApp: 组件被实例化了
09-05 22:16:29.094 16926-23064/? W 0FEFE/JsApp: 页面被显示了
09-05 22:16:42.125 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被隐藏了
09-05 22:16:50.207 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 页面被显示了
09-05 22:16:53.945 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 返回
09-05 22:16:53.995 16926-23064/com.dake.myapplication W 0FEFE/JsApp: 组件被销毁了
相关推荐
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
遇到困难睡大觉哈哈7 小时前
鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍
华为·harmonyos·鸿蒙
lonelyhiker8 小时前
javascript的原型链
开发语言·javascript·原型模式
MarkHD9 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
塞尔维亚大汉10 小时前
OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【用户态内存调测】
操作系统·harmonyos