生命周期是指一个程序或者软件从创建、到开始、暂停、唤起、停止、卸载的过程,由于微信小程序分为全局和页面两部分,所有从这两部分来讲解微信小程序的生命周期
1、全局生命周期
全局生命周期指的是使用App() 函数注册一个小程序,接受一个object参数,其指定小程序的生命周期回调等。
App() 必须在
app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果
(1)onLaunch(Object object):生命周期回调——监听小程序初始化,全局只触发一次;
参数:与 wx.getLaunchOptionsSync 一致;
(2)onShow(Object object):生命周期回调——小程序启动,或从后台进入前台显示时触发;
参数:与 wx.onAppShow 一致;
(3)onHide():小程序从前台进入后台时触发;
(4)onError(String error):生命周期回调——小程序发生脚本错误或 API 调用报错时触发;
参数:与 wx.onError 一致
以下回调函数从高版本开始支持,低版本需做兼容处理,了解基本功能即可。
(5)onPageNotFound(Object object):小程序要打开的页面不存在时触发;
(6)onUnhandledRejection(Object object):小程序有未处理的 Promise 拒绝时触发;
(7)onThemeChange(Object object):系统切换主题时触发。
// app.js App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果
App({
onLaunch (options) {
console.log(options);
},
onShow (options) {
console.log(options);
},
onHide () {
console.log();
},
onError (msg) {
console.log(msg)
},
})
2、页面生命周期
使用Page(Object object)函数注册小程序中的一个页面。接受一个 Object
类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
(1)onLoad(Object query):页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数;
参数:
名称 | 类型 | 说明 |
query | Object | 打开当前页面路径中的参数 |
(2)onShow():页面显示/切入前台时触发;
(3)onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互;
(4)onHide():页面隐藏/切入后台时触发。 如底部 tab
切换到其他页面,小程序切入后台等;
(5)onUnload():页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
(6)onPullDownRefresh():监听用户下拉刷新事件。
- 需要在
app.json
的window选项中或页面配置中开启enablePullDownRefresh
。- 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
- 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
(7)onReachBottom():监听用户上拉触底事件。
(8)onPageScroll(Object object):监听用户滑动页面事件。
(9)onAddToFavorites(Object object):监听用户点击右上角菜单“收藏”按钮的行为,并自定义收藏内容。
(10)onShareAppMessage(Object object):监听用户点击页面内转发按钮(button 组件 open-type="share"
)或右上角菜单“转发”按钮的行为,并自定义转发内容
(11)onShareTimeline():监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。
// 页面生命周期
onLoad(){
console.log("onLoad-------生命周期回调—监听页面加载【请求页面初始化数据】");
},
onShow(){
console.log("onShow-------生命周期回调—监听页面显示");
},
onReady(){
console.log("onReady-------生命周期回调—监听页面初次渲染完成");
},
onHide(){
console.log("onHide--------生命周期回调—监听页面隐藏");
},
onUnload(){
console.log("onUnload-----------生命周期回调—监听页面卸载");
},
onPullDownRefresh(){
console.log("onPullDownRefresh-----监听用户下拉动作");
},
onReachBottom(){
console.log("onReachBottom-------页面上拉触底事件的处理函数");
},
onShareAppMessage(){
console.log("onShareAppMessage---------用户点击右上角转发");
},
onShareTimeline(){
console.log("onShareTimeline-----------用户点击右上角转发到朋友圈");
},
onAddToFavorites(){
console.log("onAddToFavorites----------用户点击右上角收藏");
},
onPageScroll(){
console.log("onPageScroll-----------页面滚动触发事件的处理函数");
},
onTabItemTap(){
console.log("onTabItemTap-----------当前是 tab 页时,点击 tab 时触发");
}
3、全局生命周期以及页面生命周期的触发顺序
1、首次进入小程序,全局生命周期加载
2、页面生命周期加载