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