【HarmonyOS 5】鸿蒙页面和组件生命周期函数

简介: 【HarmonyOS 5】鸿蒙页面和组件生命周期函数

【HarmonyOS 5】鸿蒙页面和组件生命周期函数

##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财#


在 HarmonyOS Next 5.1 及以上版本中,生命周期体系呈现多层次结构,涵盖从应用启动到销毁的完整流程,各层级生命周期既独立又相互关联:
App 级:应用进程的创建与销毁
Application 级:应用全局上下文的生命周期
Ability 级:应用功能单元的生命周期
页面级:被 @Entry 装饰的组件生命周期
组件级:自定义组件的生命周期

一、生命周期体系总览

层级

核心作用

典型场景(金融类应用)

App进程

管理应用进程的创建与销毁

进程启动时加载加密模块,销毁前清理敏感缓存

Application

全局资源初始化与配置管理

初始化全局加密服务、注册崩溃监控

Ability

功能单元的窗口与生命周期管理

金融首页Ability加载用户资产数据

页面(@Entry)

页面级UI展示与交互状态管理

转账页面显示时刷新余额,隐藏时保存未完成表单

组件(@Component)

独立UI单元的渲染与资源释放

行情组件销毁时取消实时数据订阅

二、各层级生命周期详解

1. 组件生命周期(@Component)

自定义组件是UI的最小单元,生命周期聚焦于“渲染-交互-销毁”的完整流程,5.1+版本新增onWillDestroy回调,强化资源清理能力。

生命周期函数

触发时机

金融场景应用

build()

组件首次渲染或状态(@State)更新时

构建UI结构(如行情卡片、交易按钮),不可执行耗时操作

onDidBuild()

build执行完毕后

初始化组件私有数据(如计算卡片尺寸适配布局)

onReady()

组件挂载到渲染树(可获取DOM信息)

启动组件内动画(如金额数字滚动效果)

onWillDestroy()

组件即将从渲染树移除前(5.1+新增)

取消组件内定时器(如倒计时器)、解绑事件监听

onDestroy()

组件完全销毁时

释放组件占用的系统资源(如图片缓存、临时变量)

2. 页面生命周期(@Entry)

页面是被@Entry装饰的特殊组件,继承组件生命周期的同时,新增页面级交互相关函数,是用户视觉感知的直接载体。

生命周期函数

触发时机

金融场景应用

(继承组件生命周期)

-

同组件生命周期,新增页面专属逻辑

onPageShow()

页面切换至前台(如从后台切回)

刷新实时行情数据、验证用户会话有效性

onPageHide()

页面切换至后台(如跳转至其他页面)

暂停行情推送、保存未提交的交易表单

onBackPress()

用户点击返回按钮(物理/虚拟)

拦截返回(如提示“交易未完成,是否离开?”)

onWindowStageShow()

页面所在窗口显示时

恢复窗口级交互(如启用手势密码输入)

onWindowStageHide()

页面所在窗口隐藏时

禁用窗口级交互(如暂停指纹识别监听)

3. Ability生命周期(Stage模型)

Ability是应用的功能单元(如“首页”“交易”均为独立Ability),其生命周期围绕窗口舞台(WindowStage)的创建与销毁,是UI展示的载体。

生命周期函数

触发时机

金融场景应用

onCreate(want, launchParam)

Ability首次创建时

初始化Ability级资源(如用户Token存储)

onWindowStageCreate(windowStage)

窗口舞台创建时

加载页面(如加载交易页面UI)、设置窗口属性(如禁止截屏)

onWindowStageActive()

窗口获得焦点时(如用户切回)

恢复Ability交互(如启用按钮点击事件)

onWindowStageInactive()

窗口失去焦点时(如用户切走)

暂停Ability交互(如禁用输入框编辑)

onWindowStageDestroy()

窗口舞台销毁时

释放窗口资源(如销毁自定义弹窗)

onDestroy()

Ability销毁时

清理Ability级数据(如移除临时交易缓存)

4. Application生命周期

Application是应用全局上下文,管理所有Ability共享的资源,生命周期贯穿应用从启动到销毁的全流程。

生命周期函数

触发时机

金融场景应用

onCreate()

应用首次启动时

初始化全局服务(如网络请求拦截器、加密工具)

onDestroy()

应用进程销毁时

清理全局资源(如关闭数据库连接、注销推送服务)

onConfigurationUpdated(config)

系统配置变化时(如屏幕旋转)

适配横竖屏布局(如行情图表旋转后重绘)

onTrimMemory(level)

系统内存不足时(level表示紧急程度)

释放非必要资源(如清除非核心行情缓存)

5. App进程生命周期

App进程是应用运行的载体,其生命周期与系统进程管理强相关,是所有层级生命周期的基础。

状态

触发时机

与其他生命周期的关联

启动

用户点击图标/被其他应用唤醒

触发Application.onCreate()Ability.onCreate()

运行

至少一个Ability处于活跃状态

各层级生命周期正常响应(如页面切换、交互)

终止

用户退出/系统回收内存

触发Ability.onDestroy()Application.onDestroy()

三、生命周期调用顺序(完整流程)

以金融类应用“启动首页”为例,各生命周期触发顺序如下:

App进程启动 → Application.onCreate()(初始化加密服务)
→ Ability.onCreate()(加载用户Token)
→ Ability.onWindowStageCreate()(加载首页UI)
→ Ability.onWindowStageActive()(窗口获焦)
→ 页面build()(绘制首页布局)
→ 页面onDidBuild()(初始化行情数据)
→ 页面onWindowStageShow()(窗口显示)
→ 页面onReady()(绑定实时行情监听器)
→ 页面onPageShow()(刷新用户资产)


四、代码示例(5.1+版本,金融场景适配)

1. 组件与页面生命周期(行情卡片组件+首页页面)

// 自定义组件:行情卡片(@Component)
@Component
struct MarketCard {
  @State price: number = 0
  private timerId: number = -1
  build() {
    Column() {
      Text(`实时金价:${this.price.toFixed(2)}元/g`)
        .fontSize(16)
        .padding(10)
    }
    .backgroundColor('#f5f5f5')
    .borderRadius(8)
  }
  // 组件挂载后启动行情刷新
  onReady() {
    console.log('行情卡片:开始监听实时价格')
    this.timerId = setInterval(() => {
      this.price += Math.random() * 2 - 1 // 模拟价格波动
    }, 3000)
  }
  // 组件销毁前清理定时器(5.1+新增)
  onWillDestroy() {
    console.log('行情卡片:即将销毁,准备清理资源')
  }
  // 组件销毁时停止刷新
  onDestroy() {
    console.log('行情卡片:销毁,停止价格监听')
    clearInterval(this.timerId) // 金融场景:必须清理定时器,避免内存泄漏
  }
}
// 页面:首页(@Entry)
@Entry
@Component
struct HomePage {
  @State userBalance: number = 0
  build() {
    Column({ space: 20 }) {
      Text('我的资产')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      
      Text(`总资产:${this.userBalance.toFixed(2)}元`)
        .fontSize(18)
      
      MarketCard() // 引入行情卡片组件
      
      Button('去交易')
        .onClick(() => router.pushUrl({ url: 'pages/TradePage' }))
    }
    .width('100%')
    .padding(16)
  }
  // 页面显示时刷新资产(金融场景:敏感数据实时更新)
  onPageShow() {
    console.log('首页显示:刷新用户资产')
    this.fetchUserBalance() // 调用接口获取最新资产
  }
  // 页面隐藏时保存未完成操作
  onPageHide() {
    console.log('首页隐藏:保存浏览记录')
    this.saveBrowseHistory()
  }
  // 处理返回按钮(拦截退出,提示确认)
  onBackPress(): boolean {
    console.log('首页返回:检查是否有未提交订单')
    if (this.hasUnfinishedOrder()) {
      // 金融场景:未完成订单时拦截返回
      promptAction.showToast({ message: '有未完成订单,确认离开?' })
      return true // 拦截系统默认返回
    }
    return false
  }
  // 模拟资产获取
  private fetchUserBalance() {
    // 实际场景:调用加密接口获取数据
    this.userBalance = 50000 + Math.random() * 10000
  }
  // 模拟保存浏览记录
  private saveBrowseHistory() {
    // 实际场景:存入本地数据库(需加密)
  }
  // 模拟检查未完成订单
  private hasUnfinishedOrder(): boolean {
    return false // 实际场景:根据本地缓存判断
  }
}

2. Ability生命周期(首页Ability)

// EntryAbility.ts(首页Ability)
import UIAbility from '@ohos.app.ability.UIAbility'
import window from '@ohos.window'
import { EncryptUtil } from '../common/EncryptUtil' // 金融场景:加密工具类
export default class HomeAbility extends UIAbility {
  onCreate(want, launchParam) {
    console.log('首页Ability:初始化,加载用户Token')
    // 金融场景:解密并加载本地存储的用户Token
    EncryptUtil.init()
  }
  // 创建窗口舞台,加载首页页面
  onWindowStageCreate(windowStage: window.WindowStage) {
    console.log('首页Ability:创建窗口舞台')
    // 金融场景:设置窗口不可截屏(保护资产信息)
    windowStage.getMainWindow((err, mainWindow) => {
      mainWindow.setWindowSecure(true)
    })
    // 加载首页页面
    windowStage.loadContent('pages/HomePage', (err, data) => {})
  }
  // 窗口获焦时启用交互
  onWindowStageActive() {
    console.log('首页Ability:窗口获焦,启用按钮点击')
  }
  // 窗口失焦时暂停交互
  onWindowStageInactive() {
    console.log('首页Ability:窗口失焦,禁用交互')
  }
  // 窗口销毁时清理资源
  onWindowStageDestroy() {
    console.log('首页Ability:窗口销毁,清理加密工具')
    EncryptUtil.destroy()
  }
  onDestroy() {
    console.log('首页Ability:销毁,清理Token')
    // 金融场景:清除内存中的敏感数据
  }
}

3. Application生命周期(全局配置)

// app.ets(Application)
import AbilityStage from '@ohos.app.ability.AbilityStage';
import { CrashReporter } from '../common/CrashReporter' // 金融场景:崩溃监控
export default class MyApplication extends AbilityStage {
  onCreate() {
    console.log('Application:应用启动,初始化全局服务')
    // 金融场景:初始化崩溃监控(记录异常交易)
    CrashReporter.init()
  }
  // 系统配置变化(如屏幕旋转)
  onConfigurationUpdated(config) {
    console.log('Application:配置变化,适配布局')
  }
  // 内存不足时释放非核心资源
  onTrimMemory(level) {
    console.log(`Application:内存不足(等级${level}),清理行情缓存`)
    // 金融场景:保留交易相关缓存,清除历史行情缓存
  }
  onDestroy() {
    console.log('Application:应用销毁,清理全局资源')
    // 金融场景:关闭数据库连接,清除内存中敏感数据
    CrashReporter.destroy()
  }
}
目录
相关文章
|
13天前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
108 12
|
14天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
|
4月前
|
JavaScript 开发工具 开发者
【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例
【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例
102 3
|
4月前
|
开发者
鸿蒙仓颉开发语言实战教程:自定义组件
本文介绍了如何在仓颉开发语言中创建自定义组件,以封装和管理项目中的 tabbar 组件为例。通过创建独立的组件文件 yltabbar.cj,并使用 @Component 和 @Link 等修饰符实现组件化开发与参数传递,提升代码复用性和项目可维护性。适合希望深入掌握仓颉语言组件开发的 HarmonyOS 开发者学习参考。 #HarmonyOS #仓颉 #购物
|
16天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
110 3
|
4月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
138 0
鸿蒙仓颉语言开发教程:页面和组件的生命周期
仓颉语言中的生命周期指页面或组件从加载到消失的过程。与ArkTs不同,仓颉需在生命周期方法前添加`protected open`修饰符,如`aboutToAppear()`、`onPageShow()`等。部分函数如`onBackPress()`返回布尔值,决定是否拦截系统返回操作。仅`@Entry`组件支持全部生命周期,普通组件仅支持`aboutToAppear`和`aboutToDisappear`。掌握正确写法可避免踩坑。
|
4月前
|
缓存
鸿蒙5开发宝藏案例分享---Swiper组件性能优化实战
本文分享了鸿蒙系统中Swiper组件的性能优化技巧,包括:1) 使用`LazyForEach`替代`ForEach`实现懒加载,显著降低内存占用;2) 通过`cachedCount`精准控制缓存数量,平衡流畅度与内存消耗;3) 利用`onAnimationStart`在抛滑时提前加载资源,提升构建效率;4) 添加`@Reusable`装饰器复用组件实例,减少创建开销。实际应用后,图库页帧率从45fps提升至58fps,效果显著。适合处理复杂列表或轮播场景,欢迎交流经验!
|
14天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
110 2
|
15天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
110 2