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

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

article 2024/10/31 6:50:20

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

效果：