1. 程式人生 > >微信朋友分享域名喚醒打開手機默認瀏覽器

微信朋友分享域名喚醒打開手機默認瀏覽器

class ges ack isn cti comment max else 項目

在涉及移動端支付的項目時,由於對支付需求的精細化,不僅需要掃碼支付,還有喚醒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"
});

當然,提示的圖片素材你得要有一張,最終效果如下:


技術分享圖片

微信朋友分享域名喚醒打開手機默認瀏覽器