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刷新页面内容。