HarmonyOS鸿蒙Next应用页面和组件生命周期函数,请提供源码和步骤讲解

HarmonyOS鸿蒙Next应用页面和组件生命周期函数,请提供源码和步骤讲解 鸿蒙应用页面和组件生命周期函数,请提供源码和步骤讲解

3 回复

一、结论

层级 核心作用 典型场景(金融类应用)
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](/user/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()(刷新用户资产)

三、代码实现和详细解释

可从以下模板代码进行生命周期函数的使用参考:

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

// 自定义组件:行情卡片([@Component](/user/Component))
[@Component](/user/Component)
struct MarketCard {
  [@State](/user/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](/user/Entry))
[@Entry](/user/Entry)
[@Component](/user/Component)
struct HomePage {
  [@State](/user/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()
  }
}

更多关于HarmonyOS鸿蒙Next应用页面和组件生命周期函数,请提供源码和步骤讲解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next应用页面生命周期函数包括onPageShow、onPageHide、onBackPress等。组件生命周期函数包括aboutToAppear、aboutToDisappear。

示例源码(ArkTS):

@Entry
@Component
struct Index {
  aboutToAppear() {
    // 组件即将出现
  }

  onPageShow() {
    // 页面显示
  }

  onPageHide() {
    // 页面隐藏
  }

  aboutToDisappear() {
    // 组件即将消失
  }
}

步骤:

  1. 在ArkTS组件中使用装饰器定义生命周期函数
  2. 系统会在对应阶段自动调用
  3. 页面生命周期通过页面路由触发
  4. 组件生命周期随所属页面状态变化触发

在HarmonyOS Next中,页面和组件的生命周期管理是应用开发的核心。以下是关键生命周期函数、示例源码及步骤讲解。

一、页面生命周期(基于UIAbilityPage

页面生命周期关联UIAbilityPage组件。

1. UIAbility生命周期

  • onCreate(): Ability创建时触发,用于初始化。
  • onWindowStageCreate(): 窗口创建时触发,用于加载页面。
  • onForeground(): Ability切换到前台时触发。
  • onBackground(): Ability切换到后台时触发。
  • onWindowStageDestroy(): 窗口销毁时触发。
  • onDestroy(): Ability销毁时触发。

示例代码(UIAbility)

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  // Ability创建
  onCreate(want, launchParam) {
    console.log('Ability onCreate');
  }

  // 窗口创建
  onWindowStageCreate(windowStage: window.WindowStage) {
    console.log('Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        console.error('Failed to load content.');
        return;
      }
      console.log('Succeeded in loading content.');
    });
  }

  // Ability切换到前台
  onForeground() {
    console.log('Ability onForeground');
  }

  // Ability切换到后台
  onBackground() {
    console.log('Ability onBackground');
  }

  // 窗口销毁
  onWindowStageDestroy() {
    console.log('Ability onWindowStageDestroy');
  }

  // Ability销毁
  onDestroy() {
    console.log('Ability onDestroy');
  }
}

2. Page页面生命周期

  • aboutToAppear(): 页面即将显示时触发。
  • onPageShow(): 页面显示时触发。
  • onPageHide(): 页面隐藏时触发。
  • aboutToDisappear(): 页面即将销毁时触发。

示例代码(Page)

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  // 页面即将显示
  aboutToAppear() {
    console.log('Page aboutToAppear');
  }

  // 页面显示
  onPageShow() {
    console.log('Page onPageShow');
  }

  // 页面隐藏
  onPageHide() {
    console.log('Page onPageHide');
  }

  // 页面即将销毁
  aboutToDisappear() {
    console.log('Page aboutToDisappear');
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

二、自定义组件生命周期

自定义组件使用@Component装饰器,生命周期函数与Page类似。

示例代码(自定义组件)

@Component
export struct CustomComponent {
  @State count: number = 0;

  // 组件即将出现
  aboutToAppear() {
    console.log('Component aboutToAppear');
  }

  // 组件即将销毁
  aboutToDisappear() {
    console.log('Component aboutToDisappear');
  }

  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(30)
        .onClick(() => {
          this.count++;
        })
    }
  }
}

三、步骤讲解

  1. 创建UIAbility:在entry/src/main/ets/entryability中定义Ability,重写生命周期函数。
  2. 创建Page:在pages目录中创建页面,使用@Entry装饰器,并实现页面生命周期函数。
  3. 创建自定义组件:使用@Component装饰器,可在aboutToAppearaboutToDisappear中处理资源初始化和释放。
  4. 生命周期触发顺序
    • 打开页面:Ability onCreateonWindowStageCreate → Page aboutToAppearonPageShow
    • 切换后台:Page onPageHide → Ability onBackground
    • 切换前台:Ability onForeground → Page onPageShow
    • 关闭页面:Page aboutToDisappearonPageHide → Ability onWindowStageDestroyonDestroy

四、注意事项

  • 避免在生命周期函数中执行耗时操作,防止界面卡顿。
  • 资源释放应在aboutToDisappearonBackground中完成。
  • 页面生命周期与Ability生命周期协同管理,确保状态一致。

以上代码基于HarmonyOS Next SDK,实际开发时请参考官方文档调整。

回到顶部