五、小程序的生命周期
1、应用生命周期
1.1、总体解析
是定义在app.js里面,小程序的生命周期
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
onLaunch | function | 否 | 监听⼩程序初始化 |
onShow | function | 否 | 监听⼩程序启动或切前台 |
onHide | function | 否 | 监听⼩程序切后台 |
onError | function | 否 | 错误监听函数 |
onPageNotFound | function | 否 | ⻚⾯不存在监听函数 |
App({
onLaunch() {},
onShow() {},
onHide() {},
onError() {},
onPageNotFound() {},
})
1.2、onLaunch
触发时机: 应用第一次启动就会触发的事件
应 用:在应用第一次启动时,获取用户个人信息
// 1 应用第一次启动就会触发的事件
onLaunch() {
// 在应用第一次启动时,获取用户个人信息
console.log('onLaunch')
},
1.3、onShow
触发时机: 应用被用户看到时触发
应 用:对应用的数据或者页面效果 重置
// 2 应用 被用户看到时触发
onShow() {
// 对应用的数据或者页面效果 重置
console.log('onShow')
},
1.4、onHide
触发时机: 应用 被隐藏时触发
应 用:暂停、清除定时器
// 3 应用 被隐藏时触发
onHide() {
// 暂停、清除定时器
console.log('onHide')
},
1.5、onError
触发时机: 应用的代码发生报错时,会触发
应 用:应用发生代码报错时,收集用户的错误信息,通过异步请求将错误信息发送到后台
// 4 应用的代码发生报错时,会触发
onError(err) {
// 应用发生代码报错时,收集用户的错误信息,通过异步请求将错误信息发送到后台
console.log('onError')
},
1.6、onPageNotFound
触发时机: 应用第一次启动时,找不大第一个入口页面,才会触发
应 用:如果页面不存在,通过js方式重新跳转页面,重新跳到第二个页面
// 页面找不到就会触发
// 应用第一次启动时,找不大第一个入口页面,才会触发
onPageNotFound() {
// 如果页面不存在,通过js方式重新跳转页面,重新跳到第二个页面
// 不能跳到tabbar页面
wx.navigateTo({
url: '/pages/demo11/demo11',
});
}
2、页面生命周期
2.1、总体解析
是定义在某个页面的 .js 文件中
属性 | 类型 | 说明 |
---|---|---|
onLoad | function | 生命周期函数–监听页面加载 |
onShow | function | ⽣命周期回调—监听⻚⾯显 |
onReady | function | ⽣命周期回调—监听⻚⾯初次渲染完成 |
onHide | function | ⽣命周期回调—监听⻚⾯隐藏 |
onUnload | function | ⽣命周期回调—监听⻚⾯卸载 |
onPullDownRefresh | function | 监听⽤⼾下拉动作 |
onReachBottom | function | ⻚⾯上拉触底事件的处理函数 |
onShareAppMessage | function | ⽤⼾点击右上⻆转发 |
onPageScroll | function | ⻚⾯滚动触发事件的处理函数 |
onResize | function | ⻚⾯尺⼨改变时触发 |
onTabItemTap | function | 当前是 tab ⻚时,点击 tab 时触发 |
Page({
onLoad: function() {},
onShow: function() {},
onReady: function() {},
onHide: function() {},
onUnload: function() {},
onPullDownRefresh: function() {},
onReachBottom: function() {},
onShareAppMessage: function() {},
onPageScroll: function() {},
onResize: function() {},
onTabItemTap: function() {}
})
2.2、onLoad
触发条件:监听页面加载
作 用:发送异步请求,初始化数据
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 发送异步请求,初始化数据
console.log('onLoad')
},
2.3、onShow
触发条件:监听页面显示
作 用:
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onShow')
},
2.4、onReady
触发条件:监听页面初次渲染完成
作 用:
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady')
},
2.5、onHide
触发条件:监听页面隐藏
作 用:
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onHide')
},
2.6、onUnload
触发条件:监听页面卸载
作 用:
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('onUnload')
},
2.7、onPullDownRefresh
触发条件:监听用户下拉动作
作 用:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 进行数据 或者 效果 重新处理
console.log('onPullDownRefresh')
},
2.8、onReachBottom
触发条件:页面上拉触底事件的处理函数, 需要让页面出现上下滚动
作 用:上拉加载下一页数据的操作
/**
* 页面上拉触底事件的处理函数
* 需要让页面出现上下滚动
*/
onReachBottom: function () {
// 上拉加载下一页数据的操作
console.log('onReachBottom')
},
2.9、onShareAppMessage
触发条件: 用户点击右上角分享
作 用:
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log('onShareAppMessage')
},
2.10、onPageScroll
触发条件:⻚⾯滚动触发事件的处理函数
作 用:
/**
* ⻚⾯滚动触发事件的处理函数
*/
onPageScroll: function () {
console.log('onPageScroll')
},
2.11、onResize
触发条件:⻚⾯尺⼨改变时触发, 小程序发送 横屏竖屏 切换时候触发
作 用:
/**
* ⻚⾯尺⼨改变时触发
* 小程序发送 横屏竖屏 切换时候触发
*/
onResize: function () {
console.log('onResize')
},
2.12、onTabItemTap
触发条件:必须要求当前是tabbar, 必须点击自己的item
作 用:
/**
* 1 必须要求当前是tabbar
* 2 必须点击自己的item
*/
onTabItemTap: function () {
console.log('onTabItemTap')
}