onbackpress 必须写在页面 .vue 文件中且第一行 return true 才能拦截返回,h5 平台不触发需降级用 history.back(),ios 侧滑返回无法监听应禁用 popgesture。
只能用 onbackpress,且必须写在页面 .vue 文件中、函数体第一行就 return true,否则拦截失败。
onBackPress 必须写在页面里,不能写在组件或 App.vue 中
onBackPress 是页面级生命周期钩子,不是普通事件监听器。它只在当前页面实例中生效,和 data、methods 同级定义。
- 写在自定义组件(
.vue子组件)里:完全不触发,无效 - 写在
App.vue或main.js里全局注册:无法控制单页行为,只适合双击退出等全局逻辑 - 写在
pages.json配置里:无此支持,纯属误解
拦截后弹确认框,别让页面“先退回”
uni.showModal 是异步 API,而 onBackPress 是同步执行的。如果没立刻阻断,默认跳转会在弹窗显示前就发生。
- ❌ 错误写法:
uni.showModal({ ... }); return true;—— 弹窗还没出来,页面已退 - ✅ 正确写法:第一行就
return true,把后续逻辑全交给 success 回调 - 用户点
confirm时手动调用uni.navigateBack({ delta: 1 }) - 用户点
cancel时不作任何操作,页面自然停留
H5 平台不触发 onBackPress,必须降级用 history.back()
浏览器地址栏后退、手势返回、history.back() 调用,均不会触发 onBackPress —— 这是浏览器机制限制,无法绕过。
- 运行时判断平台:
uni.getSystemInfoSync().platform === 'h5' - H5 下改用
window.history.back(),它不依赖 uni-app 页面栈 - 非 H5 平台调用
history.back()会报错,必须加条件包裹 - H5 刷新后
getCurrentPages()为空数组,此时uni.navigateBack()静默失败,这是正常现象
iOS 侧滑返回无法监听,禁用比补救更可靠
iOS 的右滑返回手势根本不会进入 onBackPress,官方明确不支持监听。强行“监听”会导致手势冲突、WebView 滚动异常、兼容性问题。
- 务实做法:在
pages.json中关闭侧滑返回:"popGesture": "none" - 该配置仅对 App 端生效,不影响 H5 和小程序
- 禁用后,用户只能点左上角返回按钮,才能被
onBackPress捕获
真正容易被忽略的是平台差异的硬边界:H5 的 popstate 和 App 的物理键是两套系统,onBackPress 不是万能胶水,而是有明确适用范围的接口。跨端时,必须按平台切逻辑,而不是试图用一个函数覆盖所有场景。











