微信h5頁面中下載第三方app的方法

需求：在微信h5頁面中下載第三方app —— 安卓， 直接下載apk文件包；iphone，跳轉AppStore
分析：微信不支持，在微信中屏蔽了apk文件的下載以及AppStore的跳轉（且除非和TX有合做的應用，不然也不支持經過scheme跳轉第三方app）

變通方法：
1、藉助TX的應用市場 --‘應用寶’：將app上架應用寶，在微信中點擊下載按鈕(app的應用寶微下載地址)，安卓則可跳轉應用直接進行下載，iphone則會自動跳轉Appstore（需在TX開發平臺進行配置）
總結：雖然這種方法能夠直接跳出微信並進行下載，可是須要用戶在應用寶中下載
2、在微信中生成遮罩層，而後指引用戶點擊微信中右上角的更多按鈕，選擇【在瀏覽器打開】（iphone爲【在safari中打開】，下同）
總結：雖然這種方法須要用戶多操做一步，但貴在原生且不涉及第三方應用市場，本文主要講述的是這種方法（且在瀏覽器中打開後仿應用寶下載效果：安卓直接彈出apk下載框，iphone則直接跳轉AppStore，無需用戶再一次點擊下載按鈕）
主要代碼以下(H5頁面由vue構建)：

一、識別手機類型

/* 判斷用戶手機爲安卓仍是iphone */
checkPhone () {
let self = this
let agent = (navigator.userAgent || navigator.vendor || window.opera)
if (agent != null) {
let agentName = agent.toLowerCase()
if (/android/i.test(agentName)) {
self.isAndroid = true
} else if (/iphone/i.test(agentName)) {
self.isIOS = true
}
}
}
二、識別微信環境

/* 判斷是否爲微信環境 */ this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false

三、點擊下載按鈕，顯示遮罩層，併爲本H5頁面url地址上增長hash值‘download’(改變hash值並不會刷新頁面，但可以讓瀏覽器識別)，並指引用戶瀏覽器打開

/* 點擊下載按鈕 */
downloadApp () {
// 微信環境
let self = this
self.checkPhone()
let agent = (navigator.userAgent || navigator.vendor || window.opera)
if (agent != null) {
let agentName = agent.toLowerCase()
// this.$alert({text: [agentName]})
if (self.isAndroid) {
// 微信環境
if (self.isWeiXin) {
self.downloadInWeixin = true
window.location.hash = 'download' // 改變hash，便於瀏覽器打開時直接下載安卓包
return
}
// 安卓包下載地址
window.location.href = config.androidDownloadUrl
} else if (self.isIOS) {
// 微信環境
if (self.isWeiXin) {
self.downloadInWeixin = true
window.location.hash = 'download' // 改變hash，便於瀏覽器打開時直接跳轉AppStore
return
}
// 蘋果商店連接地址
window.location.href = config.iosAppstoreUrl
} else {
this.$alert({text: ['暫不支持，敬請期待~']})
}
}
}
四、瀏覽器中打開加了hash的url地址，識別hash值，安卓直接彈出apk下載框，iphone則直接跳轉AppStore
     重中之重：原來的H5頁面的url地址後面必須跟上‘#/’, 否則瀏覽器不會識別hash值，切記、切記、切記

identityHash () {
if (window.location.hash.includes('download')) {
window.location.hash = '' // 還原hash爲空
self.checkPhone()
if (self.isAndroid) {
// 安卓，彈出包下載頁面
window.location.href = config.androidDownloadUrl
} else if (self.isIOS) {
// ios，直接跳轉Appstore
window.location.href = config.linkToAppstore
} else {
this.$alert({text: ['暫不支持，敬請期待~']})
}
}
}