【uni-app】H5的返回拦截经验分享

项目需求，要在用户试图关闭或者返回的时候拦截，并弹出提示框。

uni-app的onBackPress只能拦截左上角的返回，物理按键和左滑返回拦截不了，需要另外的解决方案。

研究了一下，采用popState，大致实现了功能。

在想要拦截返回的页面的mounted新增代码

methods:{
    onBack(){
        //检测到返回再插一条
        window.history.pushState(null, null, document.URL);
         //在这里弹个弹框什么的
        uni.showModal(...)
    }
},
mounted(){
     //页面加载后先插一条记录
     window.history.pushState(null, null, document.URL);
     window.addEventListener("popstate", this.onBack(), false);
}

在destroyed销毁监听事件，不然会影响其他页面

destroyed() {
    window.removeEventListener("popstate", this.onBack, false);
},

保险起见，在跳转到其他页面的时候，也销毁监听

methods:{
    toIndex(){
        window.removeEventListener("popstate", this.onBack, false);
        uni.navigateTo({
            url:'/pages/index/index'
        })
    }
}

注意事项：

1.其他页面的返回事件，要改为 history.back() ,不能是 uni.navigateBack()。

2.有个插件 vue-prevent-browser-back 也是用类似方案，不过不能实现自定义监听。

3.部分浏览器，如果用户进入页面啥也不干就返回，是监听不到的，最好是弹一个框，让用户关闭从而产生交互。这个暂时找不到更好的办法。

经过测试归纳如下：

safari浏览器、firefox浏览器、uni-app ios的webview、企业微信浏览器、opera浏览器、miui浏览器。页面一打开就能监听到popstate。

微信浏览器、chrome浏览器、uni-app android的webview、uc浏览器、搜狗浏览器等大多数chroumin内核浏览器，需要页面交互才能监听popstate

(可能存在版本高低的差异，不一定准确)