分析：微信不支持，在微信中屏蔽了apk文件的下载以及AppStore的跳转（且除非和TX有合作的应用，否则也不支持通过scheme跳转第三方app）
变通方法：
、在微信中生成遮罩层，然后指引用户点击微信中右上角的更多按钮，选择【在浏览器打开】（iphone为【在safari中打开】，下同）.
总结：虽然这种方法需要用户多操作一步，但贵在原生且不涉及第三方应用市场，本文主要讲述的是这种方法（且在浏览器中打开后仿应用宝下载效果：安卓直接弹出apk下载框，iphone则直接跳转AppStore，无需用户再一次点击下载按钮）.
主要代码如下(H5页面由vue构建)：
1、识别手机类型
/* 判断用户手机为安卓还是iphone */
checkPhone () {
letself =this
letagent = (navigator.userAgent || navigator.vendor ||window.opera)
if(agent !=null) {
letagentName = agent.toLowerCase()
if(/android/i.test(agentName)) {
self.isAndroid =true
}elseif(/iphone/i.test(agentName)) {
self.isIOS =不懂或者需要的可以联系QQ：2686193109
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2、识别微信环境
/* 判断是否为微信环境 */
this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') >-1?true:false
1
2
3
1
2
3、点击下载按钮，显示遮罩层，并为本H5页面url地址上增加hash值‘download’(改变hash值并不会刷新页面，但可让浏览器识别)，并指引用户浏览器打开
/* 点击下载按钮 */
downloadApp () {
// 微信环境
letself =this
self.checkPhone()
letagent = (navigator.userAgent || navigator.vendor ||window.opera)
if(agent !=null) {
letagentName = 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
}elseif(self.isIOS) {
// 微信环境
if(self.isWeiXin) {
self.downloadInWeixin =true
window.location.hash ='download'// 改变hash，便于浏览器打开时直接跳转AppStore
return
}
// 苹果商店链接地址
window.location.href = config.iosAppstoreUrl
}else{
this.$alert({text: ['暂不支持，敬请期待~']})
}
}
}
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值，切记、切记、切记
identityHash () {
if(window.location.hash.includes('download')) {
window.location.hash =''// 还原hash为空
self.checkPhone()
if(self.isAndroid) {
// 安卓，弹出包下载页面
window.location.href = config.androidDownloadUrl
}elseif(self.isIOS) {
// ios，直接跳转Appstore
window.location.href = config.linkToAppstore
}else{
this.$alert({text: ['暂不支持，敬请期待~']})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1