H5網頁打開APP

簡單粗暴法：

<a  href="weixin://" ></a>   手機端瀏覽器輸入 weixin://  可以直接訪問

<a onclick="openApp()" href="hxqdoctor://" class="video_open"></a>  我們的APP，  hxqdoctor://   歡迎來訪問

判斷本地是否安裝APP or 去下載或者跳轉的方法

1：    //實際上就是新建一個iframe的生成器
        var  createIframe=(function(){
            var iframe;
            return function(){
                if(iframe){
                    return iframe;
                }else{
                    iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    document.body.appendChild(iframe);
                    return iframe;
                }
            }
        })()

2：生成一個url scheme,假設我們和原生約定的scheme是hxqdoctor://type=1&id=iewo212j32這種形式的(   hxqdoctor://   這個東西隨便命名)
　　IOS9以上會默認彈出一個打開APP的彈出框，那么這種通過延時來打開app的方法就不適用了，需要去判斷ios9以上

  var openApp=function(){
            var valuee=<php>echo json_encode($value)</php>;
            var localUrl="hxqdoctor://"+encodeURI(JSON.stringify(valuee));
            var openIframe=createIframe();
            var u = navigator.userAgent;
            var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
            var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
            var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
            if(isIos){
                if(isIOS9()){
                    //判斷是否為ios9以上的版本,跟其他判斷一樣navigator.userAgent判斷,ios會有帶版本號
                   /* localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代碼還可以優化一下*/
                    window.location.href = localUrl;//實際上不少產品會選擇一開始將鏈接寫入到用戶需要點擊的a標簽里
                    return;
                }
                //判斷是否是ios,具體的判斷函數自行百度
                window.location.href = localUrl;
                var loadDateTime = Date.now();
                setTimeout(function () {
                    var timeOutDateTime = Date.now();
                    if (timeOutDateTime - loadDateTime < 1000) {
                        window.location.href = "你的下載ios地址";
                    }
                }, 25);
            }else if(isAndroid){
                //判斷是否是android，具體的判斷函數自行百度
                if (isChrome) {
                    //chrome瀏覽器用iframe打不開得直接去打開，算一個坑
                    window.location.href = localUrl;
                } else {
                    //拋出你的scheme
                    openIframe.src = localUrl;
                }
                setTimeout(function () {
                    window.location.href ="你的安卓下載地址";          /* http://t.cn/RcxMVvL*/
                }, 500);
            }else{
                //主要是給winphone的用戶准備的,實際都沒測過，現在winphone不好找啊
                openIframe.src = localUrl;
                setTimeout(function () {
                    window.location.href = "你的下載地址";
                }, 500);
            }
        }

         2-1：（附ios9判斷方法）

 /*判斷是否是ios9以上*/
        function isIOS9() {
            //獲取固件版本
            var getOsv = function () {
                var reg = /OS ((\d+_?){2,3})\s/;
                if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                    var osv = reg.exec(navigator.userAgent);
                    if (osv.length > 0) {
                        return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                    }
                }
                return '';
            };
            var osv = getOsv();
            var osvArr = osv.split('.');
            //初始化顯示ios9引導
            if (osvArr && osvArr.length > 0) {
                if (parseInt(osvArr[0]) >= 9) {
                    return true
                }
            }
            return false
        }

 

3：在實際做的過程當中，分享到微信以后，需要從微信打開，但是很操蛋的是我們沒有張小龍。所以就需要去判斷是否是微信內核，如果是則需要顯示（在瀏覽器打開）否則隱藏，附檢測是否微信方法

        function isWeiXin(){
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        }

4：接下來就是觸發某個事件執行了，當然了，我們的產品需要在內容頁面放一個遮罩層，在微信里顯示，其他瀏覽器隱藏，那么。。。（附遮罩層css）

  $(function () {
           if(isWeiXin()){
               $('.mask').show();
               $('html,body').css("overflow","hidden");
           }else{
               $('.mask').hide();
           }
           $('.open_app button,.video_open').click(function () {
                openApp();     //點擊某個按鈕觸發上面的openApp方法
            })
       })

 

5：遮罩層

<div class="mask">
</div>
.mask{
    height:100%;
    width:100%;
    position:fixed;
    _position:absolute;
    top:0;
    z-index:99999;
    opacity:0.8; filter: alpha(opacity=80);
    background-color:#000;
}

6：然后呢，你們在測試的時候會不會遇到原生跳轉H5頁面的時候出現白屏，反正我是遇到了。。（附解決方案）{在index.html頁面head部分加入如下標簽，這個是最簡單的解決方案了！其他的解決方案我給你們加網址吧，我真是操碎了心。。。。}

  <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">

7：解決白屏網址啊。啊。。啊。。。

http://ask.dcloud.net.cn/article/25