開發(fā)APP下載引導(dǎo)頁，情況說明：
1.APP下載鏈接由后臺(tái)返回
2.iOS版本打開到AppStore下載
3.安卓版本鏈接有可能是安裝包apk,也有可能是應(yīng)用寶下載地址
4.考慮環(huán)境因素：安卓端、iOS端、PC端、微信瀏覽器
一、界面
安卓端只顯示安卓版本的下載按鈕，iOS端只顯示iOS版本的下載按鈕，PC端上兩個(gè)按鈕都顯示。
UI界面
二、流程圖
把我的思路畫成流程圖：
App下載引導(dǎo)頁流程圖
三、關(guān)鍵代碼
判斷H5當(dāng)前運(yùn)行環(huán)境，是Android還是iOS？是否在微信里面？安卓下載的鏈接是來自應(yīng)用寶還是安裝包apk？
let u = navigator.userAgent
// 是否是Android終端
this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // Android終端
// 是否是ios終端
this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 是否在微信里面
if (u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
this.isInWechat = true
}
if (this.isAndroid && this.isInWechat) {
// 是否是應(yīng)用寶鏈接
if (this.android_url.startsWith('https://android.myapp.com')) {
// 是應(yīng)用寶鏈接,可以直接下載，不需彈出提示在瀏覽器打開
this.needShowMask = false
} else {
this.needShowMask = true
}
}
