需求：在微信h5頁面中下載第三方app —— 安卓， 直接下載apk文件包；iphone，跳轉AppStore

分析：微信不支持，在微信中屏蔽了apk文件的下載以及AppStore的跳轉（且除非和TX有合作的應用，否則也不支持通過scheme跳轉第三方app）

變通方法：:

一、借助TX的應用市場 --‘應用寶’：將app上架應用寶，在微信中點擊下載按鈕(app的應用寶微下載地址)，安卓則可跳轉應用直接進行下載，iphone則會自動跳轉Appstore（需在TX開發平臺進行配置）

總結：雖然這種方法可以直接跳出微信并進行下載，但是需要用戶在應用寶中下載

二、在微信中生成遮罩層，然后指引用戶點擊微信中右上角的更多按鈕，選擇【在瀏覽器打開】（iphone為【在safari中打開】，下同）

主要代碼如下(H5頁面由vue構建)：

1、識別手機類型

/* 判斷用戶手機為安卓還是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、識別微信環境

/* 判斷是否為微信環境 */

this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false

3、點擊下載按鈕，顯示遮罩層，并為本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: ['暫不支持，敬請期待~']})

? ? ? ? }

? ? ? }

? ? }

4、瀏覽器中打開加了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: ['暫不支持，敬請期待~']})

? ? ? }

? ? }

}

轉載于:https://blog.51cto.com/14321053/2390838

總結

以上是生活随笔為你收集整理的微信公众号手机无法直接下载APK文件是怎么回事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。