微信小程序页面返回操作拦截

返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口
微信小程序没有提供类似 onBackPress 监听页面返回的api，在某些特定场景下，业务收到了限制

为了解决这一限制，本文提供了两种较为常用的解决方案

方案一

重写navigationBar

目的是重写左上角返回按钮，可以加入自己的业务判断拦截
首先要在 pages.JSON 文件加配置

"navigationStyle": "custom", // 使用自定义 navigationBar

业务代码

<view @click="back">navigationBar返回</view>back() {// 满足条件时才返回页面if(flag) {uni.navigateBack()}else {// todo ...}}

这种方式比较简单，但有个缺点：
只能监听左上角返回按钮，iOS右滑手势、安卓物理返回键监听不到；
所以此方案只适用于简单地业务场景

方案二

使用页面容器组件 page-container

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。
为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。

在页面内容外组件 page-container 组件
业务代码

<view class="page"><view class="main">// 页面内容...</view><page-container :show="showContainer" :duration="false" :overlay="false" @beforeleave="beforeleave">// 此组件用作页面返回拦截</page-container></view>beforeleave() {if(this.showContainer) {// 拦截页面返回，可加入自己的业务逻辑// 业务代码...// ...// ...this.showContainer = false}}

• 业务代码需判断 showContainer 状态，控制 page-container 显示或隐藏；
• 当 page-container 显示时，返回操作不会关闭页面，而是关闭 page-container 容器；
• 当 page-container 隐藏时，返回操作则是关闭页面；

方案二可用在大多数业务场景，解放了业务限制，所以推荐使用方案二

如果觉得有用随手点个赞吧，谢谢
关注我，不定时分享技术干货~

来源地址：https://blog.csdn.net/weixin_45295253/article/details/129993578