博客站

UniApp 的生命周期包括 页面生命周期 和 应用生命周期 两部分。这些生命周期钩子函数允许开发者在应用或页面的不同阶段执行特定的逻辑。

一、页面生命周期

页面生命周期是指单个页面的加载、显示、隐藏和卸载等过程。以下是 UniApp 中常用的页面生命周期钩子函数：

1. onLoad

   • 触发时机：页面加载时触发。
   • 用途：接收页面参数（如 URL 参数），初始化数据。
   • 示例：

     onLoad(options) {
       console.log('页面加载，参数为：', options);
     }
     

2. onShow

   • 触发时机：页面显示时触发（每次页面进入前台时都会触发）。
   • 用途：刷新数据或执行页面显示时的逻辑。
   • 示例：

     onShow() {
       console.log('页面显示');
     }
     

3. onReady

   • 触发时机：页面初次渲染完成时触发。
   • 用途：操作页面 DOM 或执行需要页面渲染完成后的逻辑。
   • 示例：

     onReady() {
       console.log('页面初次渲染完成');
     }
     

4. onHide

   • 触发时机：页面隐藏时触发（页面进入后台时触发）。
   • 用途：保存数据或执行页面隐藏时的逻辑。
   • 示例：

     onHide() {
       console.log('页面隐藏');
     }
     

5. onUnload

   • 触发时机：页面卸载时触发（页面被关闭或跳转到其他页面时触发）。
   • 用途：清理定时器、取消监听等。
   • 示例：

     onUnload() {
       console.log('页面卸载');
     }
     

6. onPullDownRefresh

   • 触发时机：用户下拉刷新时触发。
   • 用途：实现下拉刷新功能。
   • 示例：

     onPullDownRefresh() {
       console.log('下拉刷新');
       setTimeout(() => {
         uni.stopPullDownRefresh(); // 停止下拉刷新
       }, 1000);
     }
     

7. onReachBottom

   • 触发时机：页面滚动到底部时触发。
   • 用途：实现上拉加载更多功能。
   • 示例：

     onReachBottom() {
       console.log('页面滚动到底部');
     }
     

8. onShareAppMessage

   • 触发时机：用户点击分享按钮时触发。
   • 用途：自定义分享内容。
   • 示例：

     onShareAppMessage() {
       return {
         title: '分享标题',
         path: '/pages/index/index'
       };
     }
     

二、应用生命周期

应用生命周期是指整个应用的启动、运行和关闭等过程。以下是 UniApp 中常用的应用生命周期钩子函数：

1. onLaunch

   • 触发时机：应用初始化时触发（仅触发一次）。
   • 用途：初始化全局数据或执行应用启动时的逻辑。
   • 示例：

     onLaunch(options) {
       console.log('应用初始化，参数为：', options);
     }
     

2. onShow

   • 触发时机：应用启动或从后台进入前台时触发。
   • 用途：执行应用显示时的逻辑。
   • 示例：

     onShow(options) {
       console.log('应用显示，参数为：', options);
     }
     

3. onHide

   • 触发时机：应用从前台进入后台时触发。
   • 用途：保存数据或执行应用隐藏时的逻辑。
   • 示例：

     onHide() {
       console.log('应用隐藏');
     }
     

4. onError

   • 触发时机：应用发生脚本错误时触发。
   • 用途：捕获错误并上报。
   • 示例：

     onError(error) {
       console.log('应用发生错误：', error);
     }
     

5. onPageNotFound

   • 触发时机：页面不存在时触发。
   • 用途：跳转到自定义的 404 页面。
   • 示例：

     onPageNotFound(res) {
       console.log('页面不存在：', res);
       uni.redirectTo({ url: '/pages/404/404' });
     }
     

三、生命周期执行顺序

1. 应用启动时：
   • onLaunch → onShow → onLoad → onShow → onReady
2. 页面切换时：
   • 页面 A 隐藏：onHide
   • 页面 B 加载：onLoad → onShow → onReady
3. 应用进入后台时：
   • onHide
4. 应用从后台进入前台时：
   • onShow

四、总结

• 页面生命周期：用于管理单个页面的加载、显示、隐藏和卸载等过程。
• 应用生命周期：用于管理整个应用的启动、运行和关闭等过程。
• 开发者可以根据业务需求，在适当的生命周期钩子函数中编写逻辑，以实现数据初始化、页面刷新、错误处理等功能。