uni-app如何处理App端的应用前后台切换监听 uni-app生命周期-uni-app-PHP中文网

onShow 和 onHide 必须写在 App.vue 中，用于监听应用级前后台切换；onShow 启动时也会触发，需区分冷启动与热切回；onHide 仅作最后存档，不可依赖后台执行。

uni-app如何处理app端的应用前后台切换监听 uni-app生命周期

onShow 和 onHide 必须写在 App.vue 里

这两个函数只在 App.vue 中生效，写在任何页面（比如 pages/index/index.vue）或组件里都监听不到应用级的前后台切换。这是最容易踩的坑：很多人把逻辑放在页面的 onShow 里，结果发现 App 从后台切回来时根本没触发——因为那只是页面级的 onShow，和应用状态无关。

正确位置是 App.vue 的 export default 对象中：

export default {
  onShow() {
    console.log('应用真正进入前台')
  },
  onHide() {
    console.log('应用真正进入后台')
  }
}

注意：onShow 在 App 启动时也会触发一次（不只是后台切前台），所以业务逻辑里要区分场景，比如用时间戳或标志位判断是否为“冷启动”还是“热切回”。

onHide 不是后台执行入口，而是“最后通牒”

iOS 和 Android 系统对后台 JS 执行限制极严，onHide 触发后几十秒内，定时器、WebSocket、甚至 setTimeout 都会被系统挂起或终止。指望它持续跑任务等于白忙。

你应该在 onHide 里做这些事：

立刻保存关键状态到 uni.setStorageSync（如表单草稿、上传断点、定位上报进度）
调用一次强心跳或状态上报（uni.request 发送最后一条“我还活着”的信号）
清除前台可能还在跑的 setInterval 或 requestAnimationFrame，避免切回前台后重复执行
暂停 uni.startLocationUpdateBackground 等原生后台能力（如果已启用）

别在这里启动新定时器、开新 WebSocket 连接，或者试图“保持活跃”——系统不会买账。

onShow 是恢复逻辑的唯一可靠时机

用户切回前台后，onShow 是你重连、刷新、校验的第一站。但要注意几个现实问题：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

网络可能已切换（Wi-Fi → 流量），需重新检测 uni.getNetworkType
登录态可能过期，uni.getStorageSync('token') 存在不代表有效，建议先发个轻量 API（如 /auth/validate）校验
页面可能已被系统回收（尤其 Android 低内存机型），所以不要依赖上一次的 Vue 实例数据，一切从本地存储或服务端拉取
如果用了原生插件（如定位、蓝牙），onShow 里需手动重启对应模块，不能假设它们还在线

示例片段：

onShow() {
  // 检查 token 是否仍有效
  uni.request({
    url: '/auth/validate',
    success: (res) => {
      if (!res.data.valid) this.$router.push('/login')
    }
  })
  // 拉取最新未读消息
  this.fetchUnreadCount()
}