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

Xj_922025-05-29 10:24

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

最简单的实现：

使用 wx.enableAlertBeforeUnload()

优点：快速接入

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

方法二：

page-container + 自定义返回点击

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

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

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

wxml:

html 复制代码

<view>
    <page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave">
        
    </page-container>
    <view class="block">
            <t-navbar
                t-class-placeholder="t-navbar-placeholder"
                t-class-content="t-navbar-content"
                title="标题文字2"
                t-class-title="nav-title"
            >
                <view slot="left">
                    <t-icon
                        size="48rpx"
                        bind:tap="onNavigateBack"
                        aria-role="button"
                        aria-label="返回"
                        name="chevron-left"
                    />
                </view>
            </t-navbar>
        </view>
        <text>test</text>
        <t-dialog
            visible="{{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:

javascript 复制代码

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特性，处理所有非点击返回情况下的返回事件。