uniapp和小程序返回上一页前弹出提示弹窗,确定才允许返回

5,028 阅读1分钟

场景:小程序中某个页面数据没保存,返回上一页弹出提示弹窗询问是否返回,确定才允许返回
在这里插入图片描述

使用的api
wx.enableAlertBeforeUnload:开启小程序页面返回询问对话框
wx.disableAlertBeforeUnload:关闭小程序页面返回询问对话框

适用:安卓虚拟返回按键,安卓全面屏左右滑动返回手势,安卓和苹果左上角返回
不适用:苹果向右滑返回,安卓带虚拟按键向右滑返回(这两种好像官方社区也没回应)

注意:
1.wx.enableAlertBeforeUnload要搭配wx.disableAlertBeforeUnload去使用,根据自己的业务逻辑去判断开启还是关闭,我这里onshow默认开启,然后根据status去判断,否则不管什么情况返回它都会弹出
2.uniapp中也适用,但只支持小程序端,app端请使用onBackPress

html

<text>返回上一页弹窗提示</text>
<button bindtap="changefun">改变状态</button>

js

  data: {
    status:false
  },
  onShow: function () {
    wx.enableAlertBeforeUnload({
      message: "当前单据有未保存的数据,是否返回",
      complete: (e) => {
        console.log(e);
      }
    })
  },
  //状态改变
  changefun(){
    this.setData({
      status:!this.data.status
    })
    console.log(this.data.status)
    if(this.data.status){
      wx.enableAlertBeforeUnload({
        message: "当前单据有未保存的数据,是否返回",
        complete: (e) => {
          console.log(e);
        }
      })
    }else{
      wx.disableAlertBeforeUnload({
        complete: (e) => {
          console.log(e);
        }
      })
    }
  },