需求：在微信h5頁(yè)面中下載第三方app —— 安卓礁蔗， 直接下載apk文件包醋寝；iphone，跳轉(zhuǎn)AppStore
分析：微信不支持育谬，在微信中屏蔽了apk文件的下載以及AppStore的跳轉(zhuǎn)（且除非和TX有合作的應(yīng)用含蓉，否則也不支持通過(guò)scheme跳轉(zhuǎn)第三方app）
..
變通方法：:
一频敛、借助TX的應(yīng)用市場(chǎng) --‘應(yīng)用寶’：將app上架應(yīng)用寶，在微信中點(diǎn)擊下載按鈕(app的應(yīng)用寶微下載地址)馅扣，安卓則可跳轉(zhuǎn)應(yīng)用直接進(jìn)行下載斟赚，iphone則會(huì)自動(dòng)跳轉(zhuǎn)Appstore（需在TX開發(fā)平臺(tái)進(jìn)行配置）
總結(jié)：雖然這種方法可以直接跳出微信并進(jìn)行下載，但是需要用戶在應(yīng)用寶中下載
二差油、在微信中生成遮罩層拗军，然后指引用戶點(diǎn)擊微信中右上角的更多按鈕任洞，選擇【在瀏覽器打開】（iphone為【在safari中打開】，下同）
主要代碼如下(H5頁(yè)面由vue構(gòu)建)：
1发侵、識(shí)別手機(jī)類型
/* 判斷用戶手機(jī)為安卓還是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
? ? ? ? }
? }
}
2交掏、識(shí)別微信環(huán)境
/* 判斷是否為微信環(huán)境 */
this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false
3、點(diǎn)擊下載按鈕刃鳄，顯示遮罩層盅弛，并為本H5頁(yè)面url地址上增加hash值‘download’(改變hash值并不會(huì)刷新頁(yè)面，但可讓瀏覽器識(shí)別)叔锐，并指引用戶瀏覽器打開
/* 點(diǎn)擊下載按鈕 */
downloadApp () {
? ? ? // 微信環(huán)境
? ? ? 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) {
? ? ? ? ?? // 微信環(huán)境
? ? ? ? ? if (self.isWeiXin) {
? ? ? ? ? ? self.downloadInWeixin = true
? ? ? ? ? ? window.location.hash = 'download'?? // 改變hash挪鹏，便于瀏覽器打開時(shí)直接下載安卓包
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? ? // 安卓包下載地址
? ? ? ? ? window.location.href = config.androidDownloadUrl
? ? ? ? } else if (self.isIOS) {
? ? ? ? ?? // 微信環(huán)境
? ? ? ? ? if (self.isWeiXin) {
? ? ? ? ? ? self.downloadInWeixin = true
? ? ? ? ? ? window.location.hash = 'download'? ? // 改變hash，便于瀏覽器打開時(shí)直接跳轉(zhuǎn)AppStore
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? ? // 蘋果商店鏈接地址
? ? ? ? ? window.location.href = config.iosAppstoreUrl
? ? ? ? } else {
? ? ? ? ? this.$alert({text: ['暫不支持愉烙，敬請(qǐng)期待~']})
? ? ? ? }
? ? ? }
? ? }
4讨盒、瀏覽器中打開加了hash的url地址，識(shí)別hash值齿梁，安卓直接彈出apk下載框催植，iphone則直接跳轉(zhuǎn)AppStore
重中之重：原來(lái)的H5頁(yè)面的url地址后面必須跟上‘#/’, 不然瀏覽器不會(huì)識(shí)別hash值肮蛹，切記勺择、切記、切記
identityHash () {
if (window.location.hash.includes('download')) {
? ? ? window.location.hash = ''?? //? 還原h(huán)ash為空
? ? ? self.checkPhone()
? ? ? if (self.isAndroid) {
? ? ? ? // 安卓伦忠，彈出包下載頁(yè)面
? ? ? ? window.location.href = config.androidDownloadUrl
? ? ? } else if (self.isIOS) {
? ? ? ? // ios省核，直接跳轉(zhuǎn)Appstore
? ? ? ?? window.location.href = config.linkToAppstore
? ? ? } else {
? ? ? ? this.$alert({text: ['暫不支持，敬請(qǐng)期待~']})
? ? ? }
? ? }
}
5昆码、利用跳轉(zhuǎn)：旋風(fēng)微跳：http://www.zjychina.cn
