h5,小程序阻止用户返回行为增加挽回弹窗

h5：

在h5中可以通过监听popstate事件来实现，当浏览器的活动历史记录条目更改时，将触发 popstate 事件。代码如下：

mounted() {
        window.history.pushState(null, null, document.URL); 
        window.addEventListener("popstate", this.onBrowserBack, false);
      },
destroyed() {
        window.removeEventListener("popstate", this.onBrowserBack, false);
        //页面销毁是要移除监听不然会影响到后续页面
      },
methods: {
        //onBrowserBack函数为监听到用户返回事件 可以写上自己的业务逻辑如展示挽回弹窗 
        onBrowserBack() {
          this.saveTk = true;
          //这里需要注意，在第一次返回时历史记录已经被清空了，之后的monted就不会在执行了，如果不加这一句只能监听到用户第一次返回,所以需要在这个事件里再保存一下当前页面，这样用户再返回几次都能监听到了
          window.history.pushState(null, null, document.URL);
        },
   },

微信小程序：

在微信小程序中popstate事件就不能用了，文章提供了两种方法(原生或者uniapp开发的小程序都可以用)，更推荐第二种方法

方法一： 使用官方API wx.enableAlertBeforeUnload

文档链接：developers.weixin.qq.com/miniprogram…

缺点：手势滑动返回时不做拦截，无法自定义样式，按钮文字

//在onLoad中声明
wx.enableAlertBeforeUnload({ 
    message: '您确定要返回吗？', 
    success:()=>{} 
  })

方法二： 使用page-container组件

文档链接：developers.weixin.qq.com/miniprogram…

更推荐用这个方法因为可以自定义弹窗样式，并且顶部导航、右滑手势、安卓物理返回键和调用 navigateBack 接口都可以监听到

<template>
<view>
    //这里如果不使用v-if也是只能监听到用户的第一次返回，所以要在用户点击取消时移除一个再生成一个新的弹窗
	<view class="" v-if="showPage">
	   <page-container :show="showPage" :overlay="false"  @beforeleave="beforeleave('showPage1')"></page-container>
	</view>
</view>
</template>
data(){
	return {
		showPage: true   
	}
},
methods: {
	beforeleave(){
		this.showPage1 = false  //一定要先把弹框删除掉
          //showModal可以换成自己写的弹窗，或者其他业务逻辑
		uni.showModal({
			title: `您确定要返回吗？`,
			success: (e)=>{
				if(e.confirm) {
				//判断是上一个页面进入(返回)，还是直接进入这个页面(回首页)
					let pages = getCurrentPages()
					if(pages.length == 1){
						uni.switchTab({
							url: '/pages/index/index'
						})
					}else {
						uni.navigateBack(1)
					}
				}else {
					//点取消，生成新的弹框
					this.showPage1 = true
				}
			},
		})
	}
}