当前位置：首页 > news >正文

uni-app应用级生命周期和页面级生命周期

news 2024/10/27 6:04:57

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：页面滚动时触发，根据滚动高度显示或隐藏返回顶部按钮。

效果：