微信内部浏览器打开网页时提示外部浏览器打开升级版探讨-直接跳转默认浏览器打开

Posted 2021-02-03 alidj

在涉及移动端支付的项目时，由于对支付需求的精细化，不仅需要扫码支付，还有唤醒App支付，另外还有在微信、QQ、支付宝内置浏览器给出相应的提示。

 

 

 

 

 

 

好在国内各大巨头公司在开发浏览器的时候都在浏览器标识上加了相应的字符，下面直接贴代码：

function is_neizhi() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return "weixin";
    } else if (ua.match(/QQ/i) == "qq") {
        return "QQ";
    } else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
        return "alipay";
    }
    return false;
}

由此可以判断是否是App内置浏览器或者更加精细到某App内置浏览器。但是略坑的是：微信支付不管是在QQ、微信还是支付宝内置浏览器里面都不能被唤醒；支付宝支付可以在支付宝内置浏览器唤醒，其余则不能。

在外部浏览器打开是用jquery遮罩层方式写的，下面直接贴代码：

var isNeizhi = is_neizhi();  //调用上面js判断
var winHeight = typeof window.innerHeight != ‘undefined‘ ? window.innerHeight : document.documentElement.clientHeight;  //网页可视区高度
var weixinTip = $(‘<div id="weixinTip"><p><img src="live_weixin.png" alt="微信打开"/></p></div>‘);

if(isNeizhi){
    $("body").append(weixinTip);
}
$("#weixinTip").css({
    "position": "fixed",
    "left": "0",
    "top": "0",
    "height": winHeight,
    "width": "100%",
    "z-index": "1000",
    "background-color": "rgba(0,0,0,0.8)",
    "filter": "alpha(opacity=80)",
});
$("#weixinTip p").css({
    "text-align": "center",
    "margin-top": "10%",
    "padding-left": "5%",
    "padding-right": "5%"
});
$("#weixinTip p img").css({
    "max-width": "100%",
    "height": "auto"
});

当然，提示的图片素材你得要有一张，最终效果如下：

 

效果图