【知识点】微信小程序关于生命周期那些事

关注

原创 2024-04-03 15:48:28 2.2k 阅读 AI 写同款· GEO 优化 ›

微信小程序 ---- 生命周期 应用生命周期是指应用程序进程从创建到消亡的整个过程小程序的生命周期指的是 小程序从启动到销毁的整个过程在打开一个小程序应用的时候都需要经历一系列的初始化步骤，比如页面是否加载完成、页面是否初次渲染完成等等。在此过程中，小程序也会运行被称为生命周期钩子的函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。让开发者有机会在特定阶段运行自己的代码。阅读详情

此文主要介绍微信小程序生命周期相关知识✍，包括微信小程序的应用生命周⏳，微信小程序的页面生命周期⏳，微信小程序的组件生命周期⏳

文章目录

什么是微信小程序的生命周期

小程序的生命周期是指小程序应用从启动到销毁的一整个完整的生命过程，而这个过程中则会伴随着不同生命状态的钩子函数的触发。
在这里插入图片描述

生命周期的分类及钩子函数

微信小程序的生命周期主要包含三类，分别是，应用的生命周期（整个App的生命周期）,页面的生命周期（单个页面(page)的生命周期）,组件的生命周期（组件(component)的生命周期），这三类生命周期分别对应不同的钩子函数

应用的生命周期

必须在 app.js 中调用

应用生命周期钩子函数

钩子函数	说明
onLaunch	小程序初始化完成时触发，全局只触发一次
onShow	小程序启动，或从后台进入前台显示时触发
onHide	小程序从前台进入后台时触发
onError	小程序发生脚本错误或 API 调用报错时触发
onPageNotFound	小程序要打开的页面不存在时触发
onUnhandledRejection	小程序有未处理的 Promise 拒绝时触发
onThemeChange	系统切换主题时触发

应用生命周期执行过程
- ⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
- ⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
- ⼩程序从前台进⼊后台，触发 onHide⽅法
- ⼩程序从后台进⼊前台显示，触发 onShow⽅法
- ⼩程序后台运⾏⼀定时间（默认为30分钟），或系统资源占⽤过⾼，会被销毁

页面的生命周期

在每个页面注册函数Page()的参数中

页面生命周期钩子函数

钩子函数	说明
onLoad	监听页面加载
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

页面生命周期执行过程
- ⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
- ⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
- ⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
- 当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
- 当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
- 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

组件的生命周期

生命周期方法可以直接定义在 Component 构造器的第一级参数中。
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高

Component({
	// 新方法 - 推荐
    lifetimes: {
        attached: function () {
            // 在组件实例进入页面节点树时执行
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
    },
    
    // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容 
    attached: function () { // 在组件实例进入页面节点树时执行 
    },
    detached: function () { // 在组件实例被从页面节点树移除时执行 
    },
    // ... 
})

组件生命周期钩子函数

钩子函数	说明
created	生命周期回调—监听页面加载
attached	生命周期回调—监听页面显示
ready	生命周期回调—监听页面初次渲染完成
moved	生命周期回调—监听页面隐藏
detached	生命周期回调—监听页面卸载
error	每当组件方法抛出错误时执行

组件生命周期执行过程
- ⼩程序注册完成后，加载⻚⾯，如果页面中引用组件，则先触发触发created⽅法，只触发一次，之后页面的显示，隐藏，不会触发该方法执行
- 组件实例化完成之后，触发attached方法，只触发一次，之后页面的显示，隐藏，不会触发该方法执行
- ⾸次显示组件，会触发onReady⽅法，渲染⻚⾯元素和样式，之后只触发一次，页面的显示，隐藏，不会触发该方法执行
- 当⼩程序后台运⾏或跳转到其他⻚⾯时，销毁当前页面，则才会触发detached方法

在这里插入图片描述