关于小程序的生命周期,大致可以将其分为两类:应用生命周期、页面生命周期。
生命周期强调的是时间段,生命周期函数强调的是时间点。
# 生命周期函数
官方文档
# 一、APP 生命周期
小程序从启动 -> 运行 -> 销毁依次调用的函数叫做应用的生命周期函数。
# 1、过程图示:
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20220923151834.png)
# 2、代码示例:
- app.js
App({
/**
* 当小程序初始化✨完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {},
/**
* 当小程序启动,或从【后台进入前台】显示,会触发 onShow
*/
onShow: function (options) {},
/**
* 当小程序从【前台进入后台】,会触发 onHide
*/
onHide: function () {},
/**
* 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {}
})
项目开发中常用的生命周期函数有:
onLaunch
# 二、页面生命周期
小程序的每个页面从加载 -> 渲染 -> 销毁依次调用的函数叫做页面的生命周期函数。
# 1、过程图示
提示
从下面的图示,我们可以明显的发现,小程序是采用的双线程模型
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20220923153903.png)
# 2、代码示例
- 页面.js 文件
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 监听页面✨加载(一个页面只触发一次)
*/
onLoad: function (options) {},
/**
* 监听页面初次✨渲染完成(一个页面只触发一次)
*/
onReady: function () {},
/**
* 监听页面显示
*/
onShow: function () {},
/**
* 监听页面隐藏
*/
onHide: function () {},
/**
* 监听页面卸载(一个页面只触发一次)
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉🎈动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉🎈触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
项目开发中常用的生命周期函数有:
onLoad
、onReady
# 三、刷新事件
页面的生命周期函数中的上拉、下拉的行为是值得我们关注的行为。
# 1、下拉刷新
下拉刷新常用于重新加载页面数据
配置:
- 页面.json 文件
{
"usingComponents": {},
// 1、启用下拉刷新
"enablePullDownRefresh": true
// 2、窗口样式配置
// ……
}
使用:
- 页面.js 文件
Page({
data: {
count: 0
},
addCount() {
this.setData({
count: this.data.count + 1
})
}
// 1、下拉动作监听
onPullDownRefresh: function() {
// console.log('触发了页面的下拉刷新')
this.setData({
count: 0
})
// 2、关闭下拉动作
wx.stopPullDownRefresh()
}
})
# 2、上拉触底
上拉触底常用于加载更多页面数据
配置:
- 页面.json 文件
{
"usingComponents": {},
// 设置下拉触底距离
"onReachBottomDistance": 50
}
使用:
- 页面.js 文件
Page({
data: {
colorList: [],
isloding: false
},
onLoad: function(option) {
this.getColors()
}
async getColors() {
// 1、展示loading加载效果
wx.showLoading({title: '加载中'})
this.setData({
isloding: true
})
const {data: res} = await wx.p.request({
url: 'https://note-taking.cn/api/colors',
method: 'GET',
}).then(function() {
// 2、隐藏loading加载效果
wx.hideLoading()
this.setData({
isloding: false
})
})
this.setData({
// 加载时追加的存储数据🚩
colorList: [...this.data.colorList, ...res]
})
}
// 上拉触底事件监听
onReachBottom: function () {
// 节流阀设置🍗
if(this.data.isloding) return
this.getColors()
}
})