UniApp 生命周期深度解析与高级应用

一、应用级生命周期（App.vue）

UniApp 的应用生命周期函数需在 App.vue 中声明，主要包括以下核心函数：

1. ‌onLaunch‌：应用初始化完成时触发（全局仅触发一次），可获取启动参数

2. ‌onShow‌：应用启动或从后台进入前台时触发，可分析场景值

3. ‌onHide‌：应用从前台进入后台时触发，适合保存临时数据

4. ‌特殊监听函数‌：

   • onError：应用报错监听
   • onPageNotFound：页面不存在监听（需返回重定向对象）
   • onThemeChange：系统主题变化监听（需配置darkmode:true）
   • onUnhandledRejection：未处理的Promise拒绝事件监听

// App.vue 典型配置
export default {
  onLaunch(options) {
    console.log('App Launch', options.path) // 获取启动路径
  },
  onShow(options) {
    console.log('App Show', options.scene) // 分析场景值
  },
  onHide() {
    console.log('App Hide') // 保存临时数据
  }
}

二、页面级生命周期

2.1 基础生命周期函数

每个页面支持以下核心生命周期函数：

函数	触发时机	典型应用场景
onInit	页面初始化（早于onLoad）	提前数据准备
onLoad	页面加载（携带上个页面参数）	业务数据初始化
onShow	页面显示	数据刷新/事件订阅
onReady	页面初次渲染完成	DOM操作/第三方库初始化
onHide	页面隐藏	取消订阅/暂停动画
onUnload	页面卸载	资源释放/计时器清除

2.2 特殊页面行为监听

1. ‌交互相关‌：

   • onBackPress：返回按钮拦截（支持异步操作）
   • onNavigationBarButtonTap：导航栏按钮点击（App端）

2. ‌滚动相关‌：

   • onReachBottom：页面上拉触底（分页加载）
   • onPageScroll：页面滚动监听（性能敏感）

3. ‌刷新与分享‌：

   • onPullDownRefresh：下拉刷新（需配置enablePullDownRefresh）
   • onShareAppMessage：右上角分享（微信小程序）

export default {
  onBackPress() {
    if(this.hasUnsavedChanges) {
      uni.showModal({
        title: '提示',
        content: '是否放弃编辑？'
      })
      return true // 阻止默认返回行为
    }
  }
}

三、组件级生命周期

3.1 Vue组件标准生命周期

UniApp完全支持Vue组件的生命周期，包括：

• created/mounted（组合式API：onMounted）
• beforeDestroy/destroyed（组合式API：onUnmounted）

// 组合式API示例
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完成')
})
</script>

3.2 原生组件特殊行为

• mounted时DOM可能未完全渲染（需使用$nextTick）
• beforeDestroy在小程序端可能不会触发（推荐使用页面级onUnload）

四、执行顺序与多端差异

4.1 典型场景执行顺序

1. ‌冷启动流程‌：
   onLaunch → onShow → 首页onInit → 首页onLoad → 首页onShow → 首页onReady
2. ‌页面跳转流程‌：
   原页onHide → 新页onLoad → 新页onShow → 新页onReady → 原页onUnload（如被销毁）

4.2 多端差异注意事项

1. ‌百度小程序‌：onInit触发早于onLoad，适合提前初始化

2. ‌App-PLUS‌：支持onNavigationBarButtonTap等特有生命周期

3. ‌H5与小程序差异‌：

   • H5支持完整的DOM操作生命周期（如beforeUpdate）
   • 小程序部分生命周期受限（如mounted时DOM未就绪）

五、高级应用场景

5.1 状态保持与恢复

// 保持滚动位置示例
let scrollTop = 0
export default {
  onPageScroll(e) {
    scrollTop = e.scrollTop
  },
  onShow() {
    uni.pageScrollTo({ scrollTop })
  }
}

5.2 性能优化实践

1. ‌减少onPageScroll操作‌：使用节流和标记控制
2. ‌分页加载优化‌：结合onReachBottom与加载状态锁
3. ‌资源按需加载‌：在onReady后加载非关键资源

5.3 跨页面通信方案

1. ‌全局事件总线‌：利用uni.$emit/uni.$on
2. ‌getApp() ‌：访问全局数据globalData
3. ‌getCurrentPages() ‌：获取页面栈实例进行跨页面调用

六、调试与问题排查

6.1 常见问题解决方案

问题现象	可能原因	解决方案
生命周期未触发	函数名拼写错误/未正确导出	检查导出对象和函数名
onLoad参数缺失	未正确传递参数	使用uni.navigateTo的success回调
组件生命周期异常	多端渲染差异	使用条件编译或统一抽象层

6.2 调试技巧

1. ‌生命周期日志‌：统一封装生命周期打印函数
2. ‌开发者工具Timeline‌：分析各阶段耗时