js结合schema实现外部网页点击APP下载按钮，已安装的话打开APP，未安装跳转到下载页

项目经常有APP分享出去的页面，点击下方的按钮时要求如果安装了APP，打开APP并跳转到相应页面，如果未安装就跳转到下载页面。

如图

html代码

<div >
        <a  href="javascript:void(0)" id="btn_download ">        
            下载APP
        </a>
</div>

 <div class="isweixin-top hide p26 w-font pal6 pat3"><!--这里是在微信或Android的QQ里不能跳转出来，需要提示在浏览器中打开-->
        <div class="wxword widper64"></div>
  </div>
  <iframe src="about:blank" id="iframe" hidden></iframe><!--ios需要写一个iframe-->

脚本代码

    var btn_download = $('#btn_download');
    var ua = window.navigator.userAgent.toLowerCase();
    var isweixin = navigator.userAgent.toLowerCase().match(/micromessenger/i) != null;
    var isqq = navigator.userAgent.toLowerCase().indexOf("qq/") > -1;
    var isweibo = ua.match(/weibo/i) == "weibo";
    if (isweixin || isweibo) {
        $('#btn_download').click(function () {
            $('.isweixin-top').removeClass('hide');
        });
        if (/android/i.test(navigator.userAgent)) { //如果是Android微信浏览器
            $('.isweixin-top').find('.wxword').text('点击右上角，选择“在浏览器中打开”');
        } else if (/ipad|iphone|mac/i.test(navigator.userAgent)) { //如果是ios微信浏览器
            $('.isweixin-top').find('.wxword').text('点击右上角，选择“在safari中打开”');
        }
    } else {
        if (/android/i.test(navigator.userAgent)) {
            if (!isweixin && !isqq) {
                btn_download.attr('href', "intent://edu-yun.com?start_type=7&type=2&course_id=" + course_id);
                btn_download.click(function () {
                    openandIndex()
                })
            } else if (isqq) {
                // btn_android.removeClass('hide');
                $('.isweixin-top').find('.wxword').text('点击右上角，选择“用浏览器打开”');
                btn_download.click(function () {
                    $('.isweixin-top').removeClass('hide');
                    $('.isweixin-top').css('background-color', '#12b7f5');
                })
            }
        } else if (/ipad|iphone|mac/i.test(navigator.userAgent)) {
            if (!isweixin && !isqq) {
                // btn_ios.removeClass('hide');
                btn_download.click(function () {
                    window.location.href = "CenturyGuard://edu-yun.com?start_type=7&type=2&course_id=" + course_id;
                    openiosIndex()
                })
            } else if (isqq) {
                // btn_ios.removeClass('hide');
                btn_download.attr('href', 'CenturyGuard://edu-yun.com?start_type=7&type=2&course_id=' + course_id);
                btn_download.click(function () {
                    openiosIndex()
                });
            }
        }
    }
   function openandIndex() {
    var t = setTimeout(function () {
        window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=yilanTech.EduYunClient"    //您的APP下载地址，这里只是举个例子
    }, 3000);
    setTimeout(function () {
        clearTimeout(t)
    }, 3500)
}
function openiosIndex() {
    var t = setTimeout(function () {
        window.location.href = " https://itunes.apple.com/cn/app/shi-ji-shou-hu/id1067211489?l=zh&mt=8"    //您的APP下载地址，这里只是举个例子
    }, 1500);
    setTimeout(function () {
        clearTimeout(t)
    }, 1500)
}

需要说明的是上文中的：

"intent://edu-yun.com?start_type=7&type=2&course_id=" + course_id  其中 intent://edu-yun.com 是我们这项目Android端给的schema，不同项目不一样啊，要问原生的小伙伴要。

CenturyGuard://edu-yun.com?start_type=7&type=2&course_id=" + course_id   其中 CenturyGuard://edu-yun.com 是ios小伙伴给我的schema。

问号后面的参数就是根据外部网页需要定位到APP的哪个位置， start_type是和3端（android,ios,服务器）定义的是原生端分享出去的还是web端分享出去的，type是哪个功能，course_id是改功能模块的的哪条数据。问号后面的都是根据各自项目不同而不同，主要是为了定位到相应的页面。