【最新鸿蒙应用开发】——类Web开发范式1—

【最新鸿蒙应用开发】——类Web开发范式1——生命周期

news2024/11/8 16:40:39

兼容JS的类Web开发范式

类Web命令式开发的生命周期

1. 应用生命周期

1.1. app.js

每个应用可以在app.js自定义应用级生命周期的实现逻辑，包括：

onCreate：在应用生成时被调用的生命周期函数。
onDestroy：在应用销毁时被调用的生命周期函数。

以下示例仅在生命周期函数中打印对应日志：

// app.js
export default {
  onCreate() {
    console.info('Application onCreate');
  },
  onDestroy() {
    console.info('Application onDestroy');
  },
}

在app.js中可以定义如下应用生命周期函数：

属性	类型	描述	触发时机
onCreate	() => void	应用创建	当应用创建时调用。
onShow6+	() => void	应用处于前台	当应用处于前台时触发。
onHide6+	() => void	应用处于后台	当应用处于后台时触发。
onDestroy	() => void	应用销毁	当应用退出时触发。

1.2. 应用对象（API10+）

属性	类型	描述
getApp	Function	提供getApp()全局方法，可以在页面js文件中获取app.js中暴露的数据对象。

说明

应用对象是全局数据，其在整个应用消亡之前都会一直占用JS内存。尽管应用对象可为不同页面共享数据提供便利，但因为小型设备本身内存比较小，也应谨慎使用。如果过度使用，则容易造成应用在进入复杂page页面时，内存不够而出现异常。

示例如下：

在 app.js 中声明应用对象:

// app.js
export default {
    data: {
        test: "by getAPP"
    },
    onCreate() {
        console.info('Application onCreate');
    },
    onDestroy() {
        console.info('Application onDestroy');
    },
};

在具体的页面中访问应用对象：

// index.js
export default {
    data: {
        title: ""
    },
    onInit() {
        if (typeof getApp !== 'undefined') {
            var appData = getApp().data;
            if (typeof appData !== 'undefined') {
                this.title = appData.name; // read from app data
            }
        }
    },
    clickHandler() {
        if (typeof getApp !== 'undefined') {
            var appData = getApp().data;
            if (typeof appData !== 'undefined') {
                appData.name = this.title; // write to app data
            }
        }
    }
}

2. 页面生命周期

2.1. 在页面JS文件中可以定义如下页面生命周期函数：

属性	类型	描述	触发时机
onInit	() => void	页面初始化	页面数据初始化完成时触发，只触发一次。
onReady	() => void	页面创建完成	页面创建完成时触发，只触发一次。
onShow	() => void	页面显示	页面显示时触发。
onHide	() => void	页面消失	页面消失时触发。
onDestroy	() => void	页面销毁	页面销毁时触发。
onBackPress	() => boolean	返回按钮动作	当用户点击返回按钮时触发。 - 返回true表示页面自己处理返回逻辑。 - 返回false表示使用默认的返回逻辑。 - 不返回值会作为false处理。
onActive()5+	() => void	页面激活	页面激活时触发。
onInactive()5+	() => void	页面暂停	页面暂停时触发。
onNewRequest()5+	() => void	FA重新请求	FA已经启动时收到新的请求后触发。