最近的项目中，点击按钮唤醒App的需求经常有，之前也有考虑过用通用连接的方式来解决，但代码修改来修改去，一直都觉得不完美，最后只能先暂时用下面的方式来解决，后期有更好的解决办法再去优化。
下面代码的解决思路是，点击下载App按钮的时候先给个“正在为您跳转”的提示，如果在微信中，会先打开App Store，然后在App Store里面打开App(如果你的手机上已经下载了App的话)，如果手机上并没有下载该App就会跳转到应用宝，然后在应用宝中下载。
在微信上会出现这种原因是因为：schema 被微信屏蔽了，除非一些和微信有合作的 app 可以进入到白名单，其他的应用在微信内都没办法通过自定义 schema 协议直接唤起 app，前端页面需要对唤起场景进行判断。
而在苹果手机的Safari中(如果手机已经安装了该App)就可以直接打开。
代码如下：
HTML代码：
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)，如果有不清楚的地方可以移步到该篇文章去了解详情。