小程序生命周期

1. 生命周期

1.1 什么是生命周期？

生命周期就是指一个对象的生老病死。
基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程。

小程序生命周期.png

1.2 用途

在技术中心，我们可以理解生命周期为从一个应用从创建到销毁的过程。在项目层面，我们每一个完整的项目中都会在不同时间不同位置处理不同问题及不同需求，也就是在特点时间执特定函数。

2. 小程序的生命周期

根据官网介绍，小程序生命周期包含7个阶段：

阶段	类型	最低版本	说明
onLaunch	function	/	监听小程序初始化
onShow	function	/	监听小程序启动或切前台
onHide	function	/	监听小程序切后台
onError	function	/	错误监听函数
onPageNotFound	function	1.9.90	页面不存在监听函数
onUnhandleRejection	function	2.10.0	未处理的 Promise 拒绝事件监听函数
onThemeChange	function	2.11.0	监听系统主题变化

注:

接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

2.1 onLaunch

触发时机：

小程序一启动时触发，被隐藏重新打开不触发，被销毁再打开才会触发。

作用：

• 做初始化使用
• 云开发的初始化
• 发送请求获取用户个人信息
• 获取本地存储数据等

代码示例：

App({
    // 小程序一启动时触发，被隐藏重新打开不触发，被销毁再打开才会触发
    onLaunch (options) {
        console.log('触发了 onLaunch');
    },
})

2.2 onShow

触发时机：

与 onHide 是一对，当应用重新被显示的时候或者第一次启动时都会触发

作用：

• 重新启动定时器等执行类模块
• 重新出发异步请求获取最新数据
• 重新启动播放器等

代码示例：

App({
    // 当应用重新被显示的时候或者第一次启动时都会触发
    onShow (options) {
        console.log('触发了 onShow');
    },
})

2.3 onHide

触发时机：

当整个小程序隐藏时会触发，如切换到其他APP

作用：

• 可以停止一些正在执行操作，如暂停定时器、暂停音视频播放等

代码示例：

App({
    // 当整个小程序隐藏时会触发，如切换到其他APP
    onHide (options) {
        console.log('触发了 onHide');
    },
})

2.4 onError

触发时机：

小程序运行出错时触发

作用：

• 收集错误信息，发送至后台，进行错误日志的记录
• 进行程序出错后的操作，例如弹窗提醒等

代码示例：

App({
    // 小程序运行出错时触发
    onError (options) {
        console.log('触发了 onError');
    },
})

2.5 onPageNotFound

触发时机：

页面不存在时触发

举例：

• 扫二维码进入小程序
• 二维码指定路径为index
• 后面程序中删除了index页面，修改其他页面（如home）作主页
• 此时用户扫码，提示页面不存在，触发该周期

作用：

• 监听报错，处理后续操作，如提示用户或者跳转新页面

代码示例：

App({
    // 页面不存在时触发
    onPageNotFound (options) {
        wx.redirectTo({
            url: 'pages/...'
        }) // 如果是 tabbar 页面，请使用 wx.switchTab
    },
})

2.5 onPageNotFound

触发时机：

页面不存在时触发

举例：

• 扫二维码进入小程序
• 二维码指定路径为index
• 后面程序中删除了index页面，修改其他页面（如home）作主页
• 此时用户扫码，提示页面不存在，触发该周期

作用：

• 监听报错，处理后续操作，如提示用户或者跳转新页面

代码示例：

App({
    // 页面不存在时触发
    onPageNotFound (options) {
        wx.redirectTo({
            url: 'pages/...'
        }) // 如果是 tabbar 页面，请使用 wx.switchTab
    },
})

2.6 onUnhandledRejection

触发时机：

promise中的reject未被捕获处理时触发

作用：

• 用于统一捕获处理，可以在该生命周期中处理错误情况，一般由于异步代码出错导致
• 提示：如果自己捕获了reject那么此生命周期不会触发

代码示例：

App({
    // onLaunch
    onLaunch() {
        new Promise((resolve,reject)=>{
            // 触发reject 
            reject({"msg":"错误提示"})
        }).catch(err=>{
            // catch了 reject 那么 onUnhandledRejection 就不会触发了
            console.log("捕获reject");
            console.log(err);
        })
    },

    // promise中的reject未被捕获处理时触发
    onUnhandledRejection(err){
        console.log("onUnhandledRejection 当发现未被捕获的reject时触发");
        console.log(err);
    }
})

2.7 onThemeChange

触发时机：

手机系统的主题模式（如黑夜模式）切换时触发

作用：

• 小程序可以随系统主题切换主题或者更换UI风格

代码示例：

App({
    // promise中的reject未被捕获处理时触发
    onThemeChange(theme){
        console.log(theme); // 'dark' | 'light'
    }
})