微信h5页面中跳转外部浏览器下载APP的办法

admin管理员组

文章数量:1320738

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

分析：微信不支持，在微信中屏蔽了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.   self.isIOS = 不懂或者需要的可以联系QQ：2686193109
11.   }
12.   }
13.   }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

 

2、识别微信环境

1.   /* 判断是否为微信环境 */
2.   this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false

• 1
• 2
• 3

 

• 1
• 2

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.   }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

 

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.   }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

 

本文标签： 跳转浏览器页面办法App