//App.vue
<script>
export default {
onLaunch: function() {
console.log('应用生命周期onLaunch:应用初始化完成');
},
onShow: function() {
console.log('应用生命周期onShow:应用启动完成')
},
onHide: function() {
console.log('应用生命周期onHide:应用进入到后台状态')
}
}
</script>
//首页index.vue
<template></template>
<script>
export default {
onLoad() {
console.log('页面生命周期onLoad:页面加载')
},
onShow() {
console.log('页面生命周期onShow:页面显示')
},
onReady(){
console.log('页面生命周期onReady:页面初次渲染完成')
},
onHide() {
console.log('页面生命周期onHide:页面隐藏')
},
onUnload() {
console.log('页面生命周期onUnload:页面卸载')
},
onBackPress(){
console.log('页面生命周期onBackPress:页面返回')
},
onShareAppMessage() {
console.log('页面生命周期onShareAppMessage:分享页面')
},
onReachBottom() {
console.log('页面生命周期onReachBottom:上拉页面触底')
},
onPageScroll(){
console.log('页面生命周期onPageScroll:页面滚动')
},
onPullDownRefresh() {
console.log('页面生命周期onPullDownRefresh:下拉页面')
uni.stopPullDownRefresh();
},
onNavigationBarButtonTap(){
console.log('页面生命周期onNavigationBarButtonTap:标题栏按钮点击')
}
}
</script>
打印结果:
应用生命周期onLaunch:应用初始化完成
应用生命周期onShow:应用启动完成
页面生命周期onLoad:页面加载
页面生命周期onShow:页面显示
页面生命周期onReady:页面初次渲染完成
切换到其它页面,再切换回首页
应用生命周期onHide:应用进入到后台状态
页面生命周期onHide:页面隐藏
应用生命周期onShow:应用启动完成
页面生命周期onShow:页面显示
总结:
应用生命周期函数要先于页面生命周期函数执行。
应用生命周期执行顺序
onLaunch > onShow > onHide,其他生命周期函数需要相应动作触发才会执行。比如 onError 函数在应用出现错误才会被触发。
页面生命周期执行顺序
onLoad > onShow > onReady > onHide,其他生命周期函数需要相应动作触发才会执行。比如 onPullDownRefresh 函数在页面下拉的时候才会被触发。