最近的項(xiàng)目中徘键，點(diǎn)擊按鈕喚醒App的需求經(jīng)常有，之前也有考慮過用通用連接的方式來解決遍蟋，但代碼修改來修改去吹害，一直都覺得不完美，最后只能先暫時(shí)用下面的方式來解決匿值，后期有更好的解決辦法再去優(yōu)化赠制。
下面代碼的解決思路是赂摆，點(diǎn)擊下載App按鈕的時(shí)候先給個(gè)“正在為您跳轉(zhuǎn)”的提示挟憔，如果在微信中，會先打開App Store烟号，然后在App Store里面打開App(如果你的手機(jī)上已經(jīng)下載了App的話)绊谭，如果手機(jī)上并沒有下載該App就會跳轉(zhuǎn)到應(yīng)用寶，然后在應(yīng)用寶中下載汪拥。
在微信上會出現(xiàn)這種原因是因?yàn)椋簊chema 被微信屏蔽了达传，除非一些和微信有合作的 app 可以進(jìn)入到白名單，其他的應(yīng)用在微信內(nèi)都沒辦法通過自定義 schema 協(xié)議直接喚起 app迫筑，前端頁面需要對喚起場景進(jìn)行判斷宪赶。
而在蘋果手機(jī)的Safari中(如果手機(jī)已經(jīng)安裝了該App)就可以直接打開。
代碼如下：
HTML代碼：
<a href="javascript:void(0);" class="cyj-download-btn">立即下載App</a>
<div class="show-dialog">正在為您跳轉(zhuǎn)脯燃，請稍等...</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內(nèi)核*/
presto: u.indexOf('Presto') > -1, /*opera內(nèi)核*/
webKit: u.indexOf('AppleWebKit') > -1, /*蘋果搂妻、谷歌內(nèi)核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, /*火狐內(nèi)核*/
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應(yīng)該程序，沒有頭部與底部*/
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頁面喚醒a(bǔ)pp（安卓+ios）辕棚，如果有不清楚的地方可以移步到該篇文章去了解詳情欲主。
