微信内浏览器不支持下载APP文件的解决方案

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

 

变通方法：

总结：虽然这种方法可以直接跳出微信并进行下载，但是需要用户在应用宝中下载

二、在微信中生成遮罩层，然后指引用户点击微信中右上角的更多按钮，选择【在浏览器打开】（iphone为【在safari中打开】，下同）

总结：虽然这种方法需要用户多操作一步，但贵在原生且不涉及第三方应用市场，本文主要讲述的是这种方法（且在浏览器中打开后仿应用宝下载效果：安卓直接弹出apk下载框，iphone则直接跳转AppStore，无需用户再一次点击下载按钮）

• 主要代码如下(H5页面由vue构建)：

1、识别手机类型

1.  

   /* 判断用户手机为安卓还是iphone */

2.  

   checkPhone () {

3.  

   let self = this

4.  

   let agent = (navigator.userAgent || navigator.vendor || window.opera)

5.  

   if (agent != null) {

6.  

   let agentName = agent.toLowerCase()

7.  

   if (/android/i.test(agentName)) {

8.  

   self.isAndroid = true

9.  

   } else if (/iphone/i.test(agentName)) {

10.  

    需要的可以加我QQ=2686193109 true

11.  

    }

12.  

    }

13.  

    }

 

2、识别微信环境

1.  

   /* 判断是否为微信环境 */

2.  

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

 

3、点击下载按钮，显示遮罩层，并为本H5页面url地址上增加hash值‘download’(改变hash值并不会刷新页面，但可让浏览器识别)，并指引用户浏览器打开

1.  

   /* 点击下载按钮 */

2.  

   downloadApp () {

3.  

   // 微信环境

4.  

   let self = this

5.  

   self.checkPhone()

6.  

   let agent = (navigator.userAgent || navigator.vendor || window.opera)

7.  

   if (agent != null) {

8.  

   let agentName = agent.toLowerCase()

9.  

   // this.$alert({text: [agentName]})

10.  

    if (self.isAndroid) {

11.  

    // 微信环境

12.  

    if (self.isWeiXin) {

13.  

    self.downloadInWeixin = true

14.  

    window.location.hash = 'download' // 改变hash，便于浏览器打开时直接下载安卓包

15.  

    return

16.  

    }

17.  

    // 安卓包下载地址

18.  

    window.location.href = config.androidDownloadUrl

19.  

    } else if (self.isIOS) {

20.  

    // 微信环境

21.  

    if (self.isWeiXin) {

22.  

    self.downloadInWeixin = true

23.  

    window.location.hash = 'download' // 改变hash，便于浏览器打开时直接跳转AppStore

24.  

    return

25.  

    }

26.  

    // 苹果商店链接地址

27.  

    window.location.href = config.iosAppstoreUrl

28.  

    } else {

29.  

    this.$alert({text: ['暂不支持，敬请期待~']})

30.  

    }

31.  

    }

32.  

    }

 

4、浏览器中打开加了hash的url地址，识别hash值，安卓直接弹出apk下载框，iphone则直接跳转AppStore
     重中之重：原来的H5页面的url地址后面必须跟上‘#/’, 不然浏览器不会识别hash值，切记、切记、切记

1.  

   identityHash () {

2.  

   if (window.location.hash.includes('download')) {

3.  

   window.location.hash = '' // 还原hash为空

4.  

   self.checkPhone()

5.  

   if (self.isAndroid) {

6.  

   // 安卓，弹出包下载页面

7.  

   window.location.href = config.androidDownloadUrl

8.  

   } else if (self.isIOS) {

9.  

   // ios，直接跳转Appstore

10.  

    window.location.href = config.linkToAppstore

11.  

    } else {

12.  

    this.$alert({text: ['暂不支持，敬请期待~']})

13.  

    }

14.  

    }

15.  

    }