鸿蒙应用开发中的生命周期详解：UIAbility、页面与组件

梦想不只是梦与想

已于 2025-04-20 19:13:41 修改

阅读量1.2k

点赞数 29

文章标签： harmonyos 华为鸿蒙

于 2025-04-18 00:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/wangsen927/article/details/147309360

版权

本文同步发表于我的微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新

鸿蒙(HarmonyOS)应用开发中，理解UIAbility、页面和组件的生命周期至关重要。这些生命周期方法定义了应用从创建到销毁的整个过程，掌握它们可以帮助开发者更好地管理资源、优化性能并提供流畅的用户体验。本文将详细解析这三类生命周期，并提供实际代码示例。

一、UIAbility生命周期

UIAbility是鸿蒙应用的基本交互单元，代表一个具有用户界面的应用能力，系统通过调度UIAbility来响应用户操作。每个UIAbility实例对应最近任务列表中的一个任务。

1. 核心生命周期状态

UIAbility的生命周期主要包括四个状态：Create、Foreground、Background和Destroy。

(1) Create状态

触发时机：UIAbility实例创建时触发，系统调用onCreate回调。

典型用途：进行应用初始化操作，如变量定义、资源加载等。

import UIAbility from '@ohos.app.ability.UIAbility';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import Want from '@ohos.app.ability.Want';

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
        // 应用初始化操作，如读取系统状态、初始化变量等
        console.log('EntryAbility onCreate');
        // 示例：读取系统电量状态
        // 这里可以添加获取系统电量状态的代码
    }
}

实际应用场景：用户打开电池管理应用时，在UI页面可见前，可以在onCreate中读取当前系统电量情况，用于后续UI展示。

(2) WindowStage相关状态

在Create和Foreground状态之间，系统会创建WindowStage（窗口阶段），包含两个关键回调：

onWindowStageCreate：WindowStage创建完成后触发
onWindowStageDestroy：UIAbility销毁前触发

import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
    onWindowStageCreate(windowStage: window.WindowStage) {
        // 设置UI页面加载
        windowStage.loadContent('pages/Index', (err, data) => {
            if (err) {
                console.error('Failed to load the content. Cause:' + JSON.stringify(err));
                return;
            }
            console.log('Succeeded in loading the content. Data: ' + JSON.stringify(data));
        });
        
        // 设置WindowStage事件订阅（获焦/失焦等）
        try {
            windowStage.on('windowStageEvent', (data) => {
                console.log('Window stage event: ' + data);
                // 可根据不同事件类型执行不同操作
            });
        } catch (exception) {
            console.error('Failed to enable window stage event. Cause:' + JSON.stringify(exception));
        }
    }

    onWindowStageDestroy() {
        // 释放UI资源，如注销事件监听
        console.log('EntryAbility onWindowStageDestroy');
    }
}

实际应用场景：当用户玩游戏时收到消息通知，游戏应用会从获焦状态变为失焦状态，消息应用变为获焦状态。可以在onWindowStageCreate中设置获焦/失焦事件回调。

(3) Foreground和Background状态

onForeground：UIAbility切换至前台时触发（UI页面即将可见）
onBackground：UIAbility切换至后台时触发（UI页面完全不可见）

export default class EntryAbility extends UIAbility {
    onForeground() {
        // 申请系统资源，如打开定位功能
        console.log('EntryAbility onForeground');
        // 示例：开启定位
        // 这里可以添加开启定位服务的代码
    }

    onBackground() {
        // 释放UI不可见时无用的资源，如停止定位
        console.log('EntryAbility onBackground');
        // 示例：关闭定位以节省电量
        // 这里可以添加关闭定位服务的代码
    }
}

实际应用场景：地图应用切换到前台时在onForeground中开启定位功能，切换到后台时在onBackground中停止定位以节省资源。

(4) Destroy状态

onDestroy：UIAbility销毁时触发，用于释放系统资源、保存数据等。

export default class EntryAbility extends UIAbility {
    onDestroy() {
        // 释放系统资源、保存数据等
        console.log('EntryAbility onDestroy');
        // 示例：保存用户偏好设置
        // 这里可以添加保存应用状态的代码
    }
}

2. 完整生命周期流程

[应用启动]
    ↓
onCreate → 初始化非UI资源
    ↓
onWindowStageCreate → 加载UI内容、订阅窗口事件
    ↓
onForeground → 申请必要资源
    ↓
[应用运行]
    ↑
onBackground ← 释放非必要资源
    ↓
onWindowStageDestroy → 释放UI资源
    ↓
onDestroy → 最终清理

二、页面生命周期

在鸿蒙中，页面是由@Entry装饰的组件作为根节点的UI组合，其生命周期仅对入口组件生效。

1. 核心生命周期方法

(1) onPageShow

触发场景：页面显示时触发，包括：

首次进入页面
从后台返回页面
路由跳转后返回页面

用途：恢复数据（如刷新列表）、重新申请资源等。

(2) onPageHide

触发场景：页面隐藏时触发，包括：

跳转至其他页面
应用进入后台

用途：保存临时状态、释放页面独占资源。

(3) onBackPress

触发场景：用户点击物理/导航返回键时触发。

返回值：

返回true：拦截默认返回行为（如显示确认弹窗）
返回false：使用默认路由返回逻辑

2. 代码示例

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

    // 页面显示时触发
    onPageShow() {
        console.log('IndexPage onPageShow');
        // 示例：刷新页面数据
        this.message = 'Refreshed Data';
        // 这里可以添加数据刷新逻辑
    }

    // 页面隐藏时触发
    onPageHide() {
        console.log('IndexPage onPageHide');
        // 示例：保存表单数据
        // 这里可以添加数据保存逻辑
    }

    // 返回键按下时触发
    onBackPress() {
        console.log('IndexPage onBackPress');
        // 示例：显示确认对话框
        // 返回true表示拦截默认返回行为
        return false; // 使用默认返回逻辑
    }

    build() {
        Column() {
            Text(this.message)
                .fontSize(30)
                .margin({ bottom: 20 })
            Button('Go to Next Page')
                .onClick(() => {
                    router.pushUrl({ url: 'pages/NextPage' });
                })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
    }
}

3. 页面生命周期与UIAbility生命周期的关系

当应用从后台回到前台时：

先触发UIAbility的onForeground
然后触发页面的onPageShow

当应用从前台进入后台时：

先触发页面的onPageHide
然后触发UIAbility的onBackground

三、组件生命周期

鸿蒙中的自定义组件（被@Component装饰）有其特定的生命周期，主要由ArkUI框架管理。

1. 核心生命周期方法

(1) aboutToAppear

触发时机：组件实例创建后，build()执行前。

允许操作：初始化数据、订阅事件，可修改状态变量（如@State）。

(2) aboutToDisappear

触发时机：组件销毁前（如if条件不满足、ForEach数组变化）。

禁止操作：修改状态变量（尤其是@Link），可能导致应用行为异常。

(3) onDidBuild

触发时机：build()执行完成后。

限制：不建议在此修改状态变量或触发动画，可能导致UI不稳定。

2. 代码示例

@Component
struct MyComponent {
    @State count: number = 0;
    private timer: number = 0;

    // 组件即将显示
    aboutToAppear() {
        console.log('MyComponent aboutToAppear');
        // 初始化数据或启动定时器
        this.timer = setInterval(() => {
            this.count++;
        }, 1000);
    }

    // 组件即将消失
    aboutToDisappear() {
        console.log('MyComponent aboutToDisappear');
        // 清理工作，如清除定时器
        clearInterval(this.timer);
    }

    // 构建完成后
    onDidBuild() {
        console.log('MyComponent onDidBuild');
        // 一般不在此处修改状态
    }

    build() {
        Column() {
            Text(`Count: ${this.count}`)
                .fontSize(20)
                .margin({ bottom: 10 })
            Button('Reset Count')
                .onClick(() => {
                    this.count = 0;
                })
        }
    }
}

3. 组件生命周期的执行顺序

创建时：

父组件aboutToAppear
子组件aboutToAppear
父组件build
子组件build

销毁时：

子组件aboutToDisappear
父组件aboutToDisappear

4. 特殊场景下的组件生命周期

(1) 条件渲染

@State showComponent: boolean = true;

build() {
    Column() {
        if (this.showComponent) {
            MyComponent()
        }
        Button('Toggle Component')
            .onClick(() => {
                this.showComponent = !this.showComponent;
            })
    }
}