uni-app应用级生命周期和页面级生命周期
uniapp中应用级生命周期用于控制应用整体的生命周期行为,而页面级生命周期用于控制单个页面的生命周期行为。
一、应用级生命周期
应用级生命周期在 App.vue
中定义,主要包括以下生命周期钩子:
1.onLaunch:应用初始化时触发,仅触发一次。
onLaunch(options) { console.log("App Launch"); }
- 触发时机:应用首次启动。
- 用途:可以进行全局初始化操作,如检查用户登录状态、初始化全局变量等。
2.onShow:应用启动或从后台进入前台时触发。
onShow(options) {
console.log("App Show");
}
- 触发时机:每次从后台进入前台时。
- 用途:适合执行需要在每次应用进入前台时更新的操作,如更新用户数据、检查推送通知等。
3.onHide:应用进入后台时触发。
onHide() {
console.log("App Hide");
}
- 触发时机:应用进入后台时。
- 用途:可以在此钩子中保存应用状态或暂停某些后台任务。
4.onError:应用发生错误时触发。
onError(err) { console.log("App Error", err); }
用途:捕获并处理应用级错误,便于错误日志记录和调试。
APP.vue里面测试应用生命周期:
<script>
export default {
onLaunch: function() {
console.log('onLaunch应用初始化时触发,仅触发一次。')
},
onShow: function() {
console.log('onShow应用启动或从后台进入前台时触发。')
},
onHide: function() {
console.log('onHide应用进入后台时触发。')
}
}
</script>
<style>
/*每个页面公共css */
</style>
效果:
onlaunch应用生命周期是最快的
二、页面生命周期
测试案例:
<template>
<view>
<button @click="triggerScrollToBottom">模拟滚动到底部</button>
<button @click="triggerPullDownRefresh">模拟下拉刷新</button>
<view v-if="showTopButton">返回顶部按钮</view>
<view>
分享标题:{{ shareTitle }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
showTopButton: false,
shareTitle: '分享标题'
};
},
onLoad(options) {
console.log("页面加载,接收到的参数:", options);
// 页面数据初始化
},
onShow() {
console.log("onShow页面显示");
// 刷新数据或重置页面状态
},
onReady() {
console.log("onReady页面初次渲染完成");
// 初始化操作,例如获取 DOM 元素或加载插件
},
onHide() {
console.log("onHide页面隐藏");
// 暂停或保存页面状态
},
onUnload() {
console.log("onUnload页面卸载");
// 清理资源或停止任务
},
onPullDownRefresh() {
console.log("onPullDownRefresh触发下拉刷新");
// 执行刷新操作
setTimeout(() => {
uni.stopPullDownRefresh(); // 停止下拉刷新动画
console.log("停止下拉刷新");
}, 1000);
},
onReachBottom() {
console.log("onReachBottom页面滚动到底部");
// 执行加载更多数据操作
},
onShareAppMessage() {
console.log("onShareAppMessage用户点击了分享");
return {
title: this.shareTitle,
path: "/pages/index/index"
};
},
onPageScroll(e) {
console.log("onPageScroll页面滚动,滚动位置:", e.scrollTop);
// 根据滚动位置显示或隐藏返回顶部按钮
this.showTopButton = e.scrollTop > 100;
},
methods: {
// 模拟滚动到底部操作
triggerScrollToBottom() {
this.onReachBottom();
},
// 模拟下拉刷新操作
triggerPullDownRefresh() {
this.onPullDownRefresh();
}
}
};
</script>
<style scoped>
/* 样式定义 */
button {
margin: 10px;
}
</style>
总结:
onLoad
:页面加载时触发,接收页面传递的参数 options
并打印到控制台。
onShow
:页面每次进入前台显示时触发,用于刷新数据或重置页面状态。
onReady
:页面初次渲染完成时触发,适合进行页面初始化操作。
onHide
:页面隐藏时触发,可以暂停或保存页面状态。
onUnload
:页面卸载时触发,用于清理页面资源。
onPullDownRefresh
:用户触发下拉刷新,调用 uni.stopPullDownRefresh()
停止刷新动画。
onReachBottom
:页面滚动到底部时触发,可以用于加载更多数据。
onShareAppMessage
:用户点击右上角分享时触发,返回分享内容。
onPageScroll
:页面滚动时触发,根据滚动高度显示或隐藏返回顶部按钮。
效果:
三、生命周期使用场景
- 应用级生命周期:适用于应用启动时进行全局状态的初始化操作或处理应用错误。
- 页面级生命周期:适用于单个页面的数据获取、事件处理等。例如,在
onLoad
获取页面所需的数据,在onShow
刷新页面内容。