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是改功能模块的的哪条数据。问号后面的都是根据各自项目不同而不同，主要是为了定位到相应的页面。