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

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

最简单的实现：

使用 wx.enableAlertBeforeUnload() 

优点：快速接入

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

方法二：

page-container + 自定义返回点击

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

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

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

wxml:

    
        
    
    
            
                
                    
                
            
        
        test
        
            
        

  

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