H5嵌入在微信小程序Webview内实现拦截弹框

背景

当我们开发h5嵌入在webview内时，无法自定义Header，只能通过左上角的默认返回按钮进行返回，那么要实现返回拦截弹框怎么实现？

误区

想通过监听左上角的返回触发时机并且阻断左上角的返回行为来实现，可是小程序没有给webview的SDK暴漏该API，该思路只能放弃。 如果你了解小程序webview的头部返回行为逻辑以及SDKnavigateBack的行为，相信你就能很快的制定出准确的方案

小程序行为

webview自带头部返回的行为

点击返回时，如果该webview有路由栈，相当于执行history.back()，如果没有路由栈，就直接关闭该webview。

webview内SDK支持的wx.navigateBack的行为

直接关闭当前Webview。

如何实现拦截弹框？

利用Vue-Router的导航守卫，这里建议用组件内守卫beforeRouteLeave来实现。当用户点击返回或者侧滑返回时，会触发history.back(),，从而会触发beforeRouteLeave。

 beforeRouteLeave(to, from, next) {
        if (!this.isIgnore) {
        // 因为我使用的vant的Dialog，该Dialog默认支持在页面回退时自动关闭。所以如果不加setTimeout，会导致弹框出现后又消失的问题。
            setTimeout(() => {
            // 显示弹框
                this.backVis = true;
            });

            next(false);
        } else {
            next(true);
        }
    }

// 拦截弹框确认退出事件
 const backHandleConfirm = () => {
    // isIgnore设置为true，在触发beforeRouteLeave的时候放行
    state.isIgnore = true;
    
    // 关闭当前webview
    wx.miniProgram.navigateBack();
    // 或者 根据路由栈返回  $router.back();
};

const backHandleCancel = () => {
    // 关闭弹框
    state.backVis = false;
};

如果页面只有一层路由，返回时是不触发beforeRouteLeave的，会直接关闭webview，那么怎么实现拦截弹框？

• 配置一个loading路由，该loading页面加载时配置$router.push('主页面路由')。
• 继续在主页面配置beforeRouteLeave以及拦截弹框。

其它

• 安卓机型进入到页面必须操作过点击，再次返回才能拦截。
• 安卓机型连点两下返回，会直接关闭webview。无法做到强行拦截。
• IOS进入到页面直接点击返回可以拦截住。可以做到强行拦截。