H5唤醒App，用通用连接解决在微信打开APP的问题

最近的项目中，点击按钮唤醒App的需求经常有，之前也有考虑过用通用连接的方式来解决，但代码修改来修改去，一直都觉得不完美，最后只能先暂时用下面的方式来解决，后期有更好的解决办法再去优化。

下面代码的解决思路是，点击下载App按钮的时候先给个“正在为您跳转”的提示，如果在微信中，会先打开App Store，然后在App Store里面打开App(如果你的手机上已经下载了App的话)，如果手机上并没有下载该App就会跳转到应用宝，然后在应用宝中下载。

在微信上会出现这种原因是因为：schema 被微信屏蔽了，除非一些和微信有合作的 app 可以进入到白名单，其他的应用在微信内都没办法通过自定义 schema 协议直接唤起 app，前端页面需要对唤起场景进行判断。

而在苹果手机的Safari中(如果手机已经安装了该App)就可以直接打开。
代码如下：

HTML代码：

<a href="javascript:void(0);" class="cyj-download-btn">立即下载App</a>
<div class="show-dialog">正在为您跳转，请稍等...</div>

CSS代码：

.cyj-download-btn{
    width:8.86666667rem;
    height: 1.25333333rem;
    line-height: 1.25333333rem;
    background: #e72d2d;
    color: #fff;
    border-radius: 0.6266666667rem;
    display: block;
    text-align: center;
    font-size: 0.4266666667rem;
}

.cyj-download-btn:hover {
    font-weight: bold;
    text-decoration: none;
    background: #eaeaea;
}
.show-dialog {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -3rem;
    margin-top: -1rem;
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color: #6f6f6f;
    font-size: 16px;
    background: #f4f4f4;
    border-radius: 0.15rem;
    box-shadow: 0 0 7px 4px rgb(255, 255, 255);;
    border: 1px solid #e3e3e3;
    z-index: 100;
}

Javascript代码：

  var browser = {
        versions: function () {
            var u = navigator.userAgent,
                    app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, /*IE内核*/
                presto: u.indexOf('Presto') > -1, /*opera内核*/
                webKit: u.indexOf('AppleWebKit') > -1, /*苹果、谷歌内核*/
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, /*火狐内核*/
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), /*是否为移动终端*/
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios终端*/
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, /*android终端或者uc浏览器*/
                iPhone: u.indexOf('iPhone') > -1, /*是否为iPhone或者QQHD浏览器*/
                iPad: u.indexOf('iPad') > -1, /*是否iPad*/
                webApp: u.indexOf('Safari') == -1, /*是否web应该程序，没有头部与底部*/
                souyue: u.indexOf('souyue') > -1,
                superapp: u.indexOf('superapp') > -1,
                weixin: u.toLowerCase().indexOf('micromessenger') > -1,
                Safari: u.indexOf('Safari') > -1
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    document.querySelector(".cyj-download-btn").onclick = function () {
        document.querySelector(".show-dialog").style.display = "block";
        setTimeout(function () {
            document.querySelector(".show-dialog").style.display = "none";
        },1000);
        if (browser.versions.ios) {
            window.location.href = "打开该App的连接://openApp";
            setTimeout(function () {
                window.location.href = "该App的连接地址;
                window.location.href = "该App的连接地址";
            }, 2000)
        } else if (browser.versions.android) {
            window.location.href = "打开该App的连接://openApp";
            setTimeout(function () {
                window.location.href = "该App的连接地址";
            }, 2000)
        }
    };

以上方法参考自 通过JS页面唤醒app（安卓+ios），如果有不清楚的地方可以移步到该篇文章去了解详情。