onHide仅在页面真正不可见时触发,如按Home键、切到其他应用、收到通知弹窗或锁屏;uni.navigateTo跳转不触发onHide,只触发onHide是常见误解;它与onUnload本质不同:前者暂停资源,后者彻底销毁。

onHide 钩子只在页面真正“不可见”时触发,不是每次跳转都执行——这点最容易误判。
onHide 什么时候会被调用
它只响应系统级的页面隐藏行为,比如:
- 用户按 Home 键切到桌面
- 从 App 切换到微信、短信等其他应用
- 收到电话/通知弹窗遮盖当前页面(部分平台)
- 锁屏(iOS/Android 行为略有差异)
注意:uni.navigateTo 跳转到新页面时,原页面不会触发 onHide,而是触发 onHide —— 这是常见误解来源。实际测试中,只有原生系统感知到“当前页面失去焦点”才会调用它。
onHide 和 onUnload 的关键区别
两者常被混用,但触发条件和用途完全不同:
-
onHide:页面还在内存里,只是“看不见了”,随时可能被切回来(比如从微信返回),适合暂停、暂存、节电 -
onUnload:页面已从栈中移除(如uni.navigateBack或uni.redirectTo),资源必须彻底释放
典型错误:在 onHide 里清空 this.data 或取消所有请求,结果用户切回来页面空白;正确做法是保留状态,只停掉轮询、视频、音频、定时器等持续消耗资源的操作。
onHide 中该做哪些事(带示例)
核心原则:轻量、可逆、不破坏页面状态。常见实操建议:
- 调用
uni.stopBackgroundAudio()或this.videoRef.pause()停止媒体播放 - 用
clearInterval(this.timerId)暂停轮询(别clearTimeout后不重设) - 保存临时编辑内容到
uni.setStorageSync(如草稿、表单未提交字段) - 暂停 Canvas 动画(
this.canvasContext.draw(false))
示例(pages/detail/detail.vue):
export default {
data() {
return {
timerId: null,
draftContent: ''
}
},
onLoad() {
this.startPolling()
},
onHide() {
clearInterval(this.timerId)
this.timerId = null
// 仅存草稿,不覆盖正式数据
uni.setStorageSync('detail_draft', this.draftContent)
},
onUnload() {
// 卸载才彻底清理
uni.removeStorageSync('detail_draft')
}
}
不同平台下 onHide 的兼容性注意点
它在 H5、微信小程序、App(nvue)中表现基本一致,但有两处易踩坑:
- 微信小程序中,
onHide可能比预期晚触发 100–300ms(尤其在快速切后台时),不要依赖它做精确时间控制 - App 端(尤其是 nvue 页面),如果用了原生导航栏或自定义 titleNView,
onHide有时会漏发——建议加一层plus.navigator.getState()主动监听 - H5 平台下,
onHide实际映射为visibilitychange事件,需注意浏览器标签页切换与最小化行为差异
真正容易被忽略的是:onHide 不保证与 onShow 成对出现。比如用户从详情页跳转到支付页后杀掉进程,再手动重启 App,此时原详情页早已被销毁,onShow 不会再触发,onHide 的暂停逻辑也就失去了恢复上下文的机会——所以暂停类操作,一定要设计成“可重复初始化”。


















