微信小程序返回上一页监听

本文实现的是微信小程序在返回上一页时获取通知并自定义业务。

最简单的实现：

使用 wx.enableAlertBeforeUnload() 

优点：快速接入

缺点：手势不能识别、无法自定义弹窗内容（仅询问）

方法二：

page-container + 自定义返回点击

page-container有个好处，能识别返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口

唯一的缺点就是PC端打开小程序时，点击左上角的返回无法触发。

直接上代码(使用了TDesign 微信小程序组件库，可自行替换)：

wxml:

<view><page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave"></page-container><view class="block"><t-navbart-class-placeholder="t-navbar-placeholder"t-class-content="t-navbar-content"title="标题文字2"t-class-title="nav-title"><view slot="left"><t-iconsize="48rpx"bind:tap="onNavigateBack"aria-role="button"aria-label="返回"name="chevron-left"/></view></t-navbar></view><text>test</text><t-dialogvisible="{{imageOnMiddleWithImage}}"confirm-btn="{{ {content: '确定', variant: 'base' } }}"cancel-btn="取消"bind:confirm="confirnDialog"bind:cancel="closeDialog"><t-image slot="top" id="loading-img" shape="round" width="72" height="72" /></t-dialog>
</view>

js:

Page({/*** 页面的初始数据*/data: {visible: true,imageOnMiddleWithImage: false,backTime: 0,},closeDialog() {this.setData({visible: true, // 点取消，重新展示该页面imageOnMiddleWithImage: false,backTime: 1,});},confirnDialog() {wx.navigateBack({delta: 1});},onBeforeLeave() {if (this.data.backTime > 0) {this.confirnDialog()return;}this.setData({imageOnMiddleWithImage: true,});},onNavigateBack() {this.onBeforeLeave()}
})

使用自定义返回键，监听点击事件；

使用page-container特性，处理所有非点击返回情况下的返回事件。