1、应用生命周期
- 应用生命周期书写在
app.js文件中 -
onLaunch小程序第一次启动时触发。应用场景：用户首次进入获取用户信息，及权限 -
onShow小程序首次显示时，或小程序与其他应用切换显隐时触发。应用场景：小程序重新显示时，重置数据或页面效果 -
onHide小程序与其他应用切换显隐时触发。应用场景：当小程序隐藏时，关闭或暂停一些定时操作 -
onError小程序代码出现错误时触发。应用场景：错误触发时，将错误发送到后台进行记录跟踪 -
onPageNotFound小程序首页找不到时触发。应用场景：找不到首页时，跳转到其他页面 -
onThemeChange微信系统切换主题时触发，默认入参包含theme属性，取值为dark或light
// app.js
App({
//小程序第一次启动时触发，此处可用于获取用户信息
//应用场景：获取用户信息，登录校验
onLaunch(){
console.log('onLaunch')
},
//小程序显示时触发,切换应用显隐时可触发
//应用场景：重置应用的数据或页页面效果
onShow() {
console.log('onShow')
},
//小程序被隐藏时触发
//应用场景：定时器控制
onHide(){
console.log('onHide')
},
//小程序代码报错时触发
//应用场景：收集应用错误信息，传给后台
onError(err){
console.log('onError')
console.log(err)
},
//首页找不到时触发
//应用场景：首页不存在时，可执行跳转到其他页面
onPageNotFound(){
wx.navigateTo({
url: '/pages/btn/btn',
})
console.log('onPageNotFound')
},
//未处理的promise拒绝事件监听函数,当前不支持android
onUnhandledRejection(res){
console.log('onUnhandledRejection')
// res.reason//error对象
// res.promise//被拒绝的promise
},
//系统切换主题时触发
//默认入参中包含theme,取值为'dark','light'
onThemeChange(param){
console.log(onThemeChange)
}
})
2、页面生命周期
-
onLoad页面加载时触发,只会调用一次，函数入参中可获取页面路径中的参数。
应用场景：发送异步请求，初始化页面数据，获取页面传参
示例：
onLoad(query){
console.log('onLoad')
console.log(query)
}
-onShow 页面显示时触发
onShow(){
console.log("page-onShow")
}
-
onReady页面初次渲染完成后触发,只会调用一次。
对界面内容进行修改的api需在onready之后进行 -
onHide页面从前台转为后台时触发 -
onUnload页面销毁时触发 -
onPullDownRefresh下拉刷新时触发。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。 -
onReachBottom上拉加载时触发。可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。 -
onShareAppMessage监听“发送给朋友”按钮的行为。
只有定义了onShareAppMessage函数，弹窗中才会有发送给朋友按钮
函数默认入参为一个对象
{
from："button",//转发事件来源，button 或 menu
target:Object,//from为button时，target指向button，否则为undefined
webViewUrl:'',//如果有嵌入页面，则为嵌入页面的url
}
该函数需return一个Object
{
title:'转发标题',
path:'转发路径',
imageUrl:'自定义图片路径'
}
onShareAppMessage(res){
console.log('onShareAppMessage')
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
-
onAddToFavorites点击收藏时触发，当前页面内若含有嵌入页面，则默认入参中返回```webViewUrl``。
此函数需要return一个Object。用于设置收藏时的标题、图片、及query传参
{
title:'收藏标题',
imageUrl:'http://demo.png',
query:'name=xxx&age=xx'
}
示例：
onAddToFavorites(res){
console.log("onAddToFavorites")
console.log('webViewUrl: ', res.webViewUrl)
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx',
}
}
-
onShareTimeline监听分享到朋友圈按钮的行为,当前处于beta阶段，仅支持android系统（2021-03-23)，只有定义了onShareTimeline,弹窗中才会显示分享到朋友圈按钮。此函数需return一个object,用于定义自定义分享内容
{
title:'朋友圈列表页上显示标题',
query:'自定义页面路径中携带的参数',
imageUrl:'自定义图片路径'
}
示例：
onShareTimeline(){
console.log("onShareTimeline")
return {
title:'朋友圈列表页上显示标题',
query:'自定义页面路径中携带的参数',
imageUrl:'自定义图片路径'
}
}
-
onResize页面尺寸发生变化时触发,指小程序发生横纵屏切换时会触发
使小程序屏幕可以翻转，需在json文件中设置属性：
{
"pageOrientation":"auto"
}
示例：
onResize(){
console.log('onResize')
},
-
onPageScroll页面滚动时触发 -
onTabItemTaptab页中点击自己时才会触发
函数默认入参为：
{
index:'tabItem序号',
pagePath:'tabItem的页面路径',
text：'tabItem的按钮文字'
}
示例：
onTabItemTap(tab){
console.log('onTabItemTap')
console.log(tab.index)
console.log(tab.pagePath)
console.log(tab.text)
}
3、组件生命周期
- 组件中的生命周期写在
lifetimes中 -
created组件刚刚被创建时触发，不可使用setData，常用于给组件this添加自定义属性字段 -
attached组件初始化完毕后触发，绝大多数初始化工作此处进行 -
ready在组件在视图层布局完成后执行，个人理解类似于vue中的mounted -
moved在组件实例被移动到节点树另一个位置时执行 -
detached组件销毁时触发 ,类vue中的destroyed -
error每当组件方法抛出错误时执行
示例：
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
}
4、组件所在页面的生命周期
-
show组件所在的页面被展示时执行 -
hide组件所在的页面被隐藏时执行 -
resize组件所在的页面尺寸变化时执行
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
5、小程序生命周期图示
mini-pro-lifeTime.png
网友评论