app內嵌h5頁面：判斷客戶端

在web前端開發中，很多時候都需要和原生app開發人員來交互，或者有很多需要兼容的地方，甚至為了規避移動端各種無端報錯，或者其中一端報錯等等問題：

　　首先就是最常用遇到app開發中的安卓與iOS：

　　（1）安卓與iOS因為操作系統不同，從調用其中的方法就需要知道h5頁面到底位於哪一端，下面就是判斷操作系統來分辨兩者：

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
    if(isAndroid){
               console.log("調用Android方法")
           window.android.function();
    }else if(isiOS){
               console.log("調用iOS方法")
               window.webkit.messageHandlers.***.function();
    }

　　

　　（2）判斷是移動端瀏覽器打開還是PC端瀏覽器打開：

if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
//移動端打開
console.log("手機端打開執行")

} else {

//pc端打開
console.log("PC端打開執行")

}

 

　　（3）判斷微信、qq、還是微博內部打開（微信內置瀏覽器與qq內置瀏覽器 與微博內置瀏覽器 ）：

function is_weixn_qq() {

    var ua = navigator.userAgent.toLowerCase();

    if(ua.match(ua.match(/MicroMessenger/i) == "micromessenger")) {
        // 下面是我在網上復制別人的代碼，其中的展示引導圖根據自己項目需求做就可以（下面三者都可）
        $('#weixin-tip').show();//微信引導圖（點擊右上角按鈕選擇瀏覽器打開）；

        return true;

    }

    if(ua.match(/QQ\/[0-9]/i)) {

        $('#weixin-tip').show();//qq引導圖（點擊右上角按鈕選擇瀏覽器打開）；

        return true;

    }

     if (ua.match(/WeiBo/i) == "weibo") {

         //在新浪微博客戶端打開

         return true;

     }

    return false;

}

 

　　（4）日常功能的實現：進入頁面時，根據不同情景后端會在當前頁面url后面拼接參數，利用獲取不同參數實現不同前端展示或邏輯：

獲取當前url通用方法：

function getQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = window.location.search.substr(1).match(reg);

    if(r != null)

    return decodeURIComponent(r[2]);

    return null;

}

var a = getQueryString('a') ? getQueryString('a') : ''; //a為拼接的參數名

if(a == 1) {

    $('.myfooter').show();

    $('.box').css('padding-bottom', '1.4rem');

} else {

    $('.myfooter').hide();

    $('.box').css('padding-bottom', '0');

}

 

　　關於第四點，因為本人對於正則並不懂，所以就封裝了一個獲取url參數js：

var getUrlParams = function(){
       //因為對於內嵌頁面來說，基本上傳參都是拼接url，所以這里直接獲取url，query的參數
       //獲取url參數
       var query = window.location.search.substring(1);
       //每個參數鍵值對
       var vars = query.split("&");
       //創建一個對象來接收這些鍵值對
       var json = {}

       for (var i=0;i<vars.length;i++) {
               // 循環中，以“=”來截斷鍵與值
               var pair = vars[i].split("=");
               // 賦值
               json[pair[0]] = pair[1]
       }
       //返回
       return json;
}

　　這樣就清楚多了，根據自己的喜好來。

 

　　　參考鏈接：https://www.jianshu.com/p/6a43508957d2

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　字太難看，不想動筆，此章為印，加深記憶，往后若遇，來此考古。