很多同学容易将小程序生命周期和页面的生命周期混淆为一起,这两个其实应该是不同却又相互关联的生命周期。
1、小程序生命周期
- (1)首先小程序的生命周期函数是在app.js里面调用的,App(Object)函数用来注册一个小程序。接受一个 Object 参数,指定其小程序的生命周期回调;一般有
onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。 - (2)看文字对概念有点模糊对不对?理解概念的最好方法就是上手实际操作一遍。那么,我们来看看当打开一个小程序的时候,到底是onLaunch、onShow、onHide哪个先调用以及什么时候开始调用的。
onLaunch() { console.log('onLaunch监听小程序初始化');
}
onShow() { console.log('onShow监听小程序显示');
}
onHide() { console.log('onLaunch监听小程序隐藏');
}
打开小程序 点击右上角按钮隐藏小程序有再次进入
- (3)从中我们可以知道小程序的生命周期函数的调用顺序为:
onLaunch>onShow>onHide
2、页面的生命周期
-
(1)页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
-
(2)各个页面生命周期函数的先后顺序
onLoad(options) { console.log('onLoad监听页面加载,只执行一次');
}
onReady() { console.log('onReady监听页面初次渲染完成,只执行一次');
}
onShow() { console.log('onShow监听页面显示,执行多次');
}
onHide() { console.log('onHide监听页面隐藏');
}
onUnload() { console.log('onUnload监听页面卸载');
}
从中我们可以知道小程序的生命周期函数的调用顺序为:onLoad>onReady>onShow;至于onHide函数就是当隐藏页面的时候触发。
小程序的下拉刷新和触底
| 方法 | 类型 | 描述 |
|---|---|---|
| onPullDownRefresh() | function | 页面相关事件处理函数——监听用户下拉动作 |
| 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新 | ||
| onReachBottom() | function | 页面上拉触发底事件的处理函数 |
| 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance |