uniapp 实现回退监听 弹出提示 小程序与H5已解决

H5

小程序

      <!-- 退出填写提示框 -->
      <view>
        自定义提示框
        <view v-if="outTipsShow"> </view>
      </view>

      // 退出填写提示框
      outTipsShow: false,


  onl oad(options) {

    // 监听返回事件，只支持微信小程序
    //#ifdef MP-WEIXIN
    wx.enableAlertBeforeUnload({
      message: "测试题目还未填写结束，确认退出吗？",
      success: function (res) {
        console.log("成功：", res);
      },
      fail: function (err) {
        console.log("失败：", err);
      },
    });
    // 取消监听
    // wx.disableAlertBeforeUnload() //关闭小程序页面返回询问对话框
    //#endif
  },


  // 实例销毁之前调用
  beforeDestroy() {
    console.log("11111");
    //#ifdef MP-WEIXIN
    // 取消监听
    wx.disableAlertBeforeUnload(); //关闭小程序页面返回询问对话框
    //#endif
  },


  // 页面生命周期有个 onBackPress 方法，可以监听返回事件，与onLoad同级
  // onBackPress 但不支持小程序只支持APP和H5，App未测试
  // 微信小程序使用wx.enableAlertBeforeUnload(Object object)
  // 注意事项，部分手机手势滑动返回时可以触发，部分不做拦截，在任何场景下，此功能都不应拦住用户退出小程序的行为
  // onBackPress(event) 返回 event ={form: backbutton | navigateBack}
  //#ifdef H5
  onBackPress(event) {
    console.log("event", event);
    // 监听回退，提示问卷填写未完成，弹出自定义提示框
    if (event.from == "backbutton") {
      this.clickBack = true;
      this.outTipsShow = true;
      return true;
    }
    // 弹窗确认回退
    if (event.from == "navigateBack") {
      return false;
    }
    // return true 表示禁止默认返回
  },
  //#endif