微信小程序返回事件监听

前因：微信原生导航栏不支持监听返回事件，uniapp也没有提供响应api；

发现微信提供了一个page-container组件；可以利用该组件实现返回监听效果

page-container（基础库2.16.0开始支持，需做低版本兼容）

文档地址：视图容器 / page-container

功能描述

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

Tips

1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器
2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面
3. tip: 鸿蒙 OS 下暂时无法拦截页面返回

开源插件

weixin-back-mp

一位大佬开发的插件

实现原理：在页面中插入page-container组件，当触发返回时会被改组件拦截，从而实现返回拦截监听

注意事项

使用了page-container组件后会覆盖原页面，如果原页面有溢出滚动的状态则会失效

解决方法

在使用了page-container的页面手动设置page style

page {
    position: relative !important;
    top: Opx!irmportant:
}