微信扫一扫二维码直接打开外部浏览器下载app怎么解决
2019-01-10 12:55
1021 查看
需求:在微信h5页面中下载第三方app —— 安卓, 直接下载apk文件包;iphone,跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)
变通方法:
一、借助TX的应用市场 --‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置)
总结:虽然这种方法可以直接跳出微信并进行下载,但是需要用户在应用宝中下载二、在微信中生成遮罩层,然后指引用户点击微信中右上角的更多按钮,选择【在浏览器打开】(iphone为【在safari中打开】,下同)
总结:虽然这种方法需要用户多操作一步,但贵在原生且不涉及第三方应用市场,本文主要讲述的是这种方法(且在浏览器中打开后仿应用宝下载效果:安卓直接弹出apk下载框,iphone则直接跳转AppStore,无需用户再一次点击下载按钮)- 主要代码如下(H5页面由vue构建):
1、识别手机类型
[code]/* 判断用户手机为安卓还是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 } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2、识别微信环境
[code]/* 判断是否为微信环境 */ this.isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false
- 1
- 2
3、点击下载按钮,显示遮罩层,并为本H5页面url地址上增加hash值‘download’(改变hash值并不会刷新页面,但可让浏览器识别),并指引用户浏览器打开
[code]/* 点击下载按钮 */ 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: ['暂不支持,敬请期待~']}) } } }
- 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
4、浏览器中打开加了hash的url地址,识别hash值,安卓直接弹出apk下载框,iphone则直接跳转AppStore
重中之重:原来的H5页面的url地址后面必须跟上‘#/’, 不然浏览器不会识别hash值,切记、切记、切记
[code]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: ['暂不支持,敬请期待~']}) } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
相关文章推荐
- 微信扫描二维码跳转手机默认浏览器打开下载app的链接是怎么实现的
- 微信中点击链接或者扫描二维码直接跳转外部浏览器打开指定网页下载
- 怎么让微信下载APK文件包,微信内置浏览器无法打开APP下载链接的解决方案
- 微信扫描打开app下载提示用户打开浏览器进行下载
- 【HTML】- 微信扫描打开app下载提示用户打开浏览器进行下载
- 微信浏览器禁止app下载链接怎么办
- 微信中点击菜单直接跳到外部浏览器是怎么弄得
- tomcat rar 压缩包 http 下载 乱码问题(即直接被浏览器打开) 解决方法
- 人脉通分享工能,点击分享到微信或者qq的分享链接打开H5,提示用户用浏览器打开,点击下载,有有app
- 微信通过页面(H5)直接打开本地app的解决方法
- 当浏览器 直接打开txt,png等时是直接读取而不是下载时解决方法
- tomcat rar 压缩包 http 下载 乱码问题(即直接被浏览器打开) 解决方法
- 解决ie下载excel文件直接在浏览器打开的问题(tomcat,web项目)
- 微信浏览器打开 点击下载app 无需提示使用浏览器打开--代码分享
- 解决Tomcat服务器下载 xls、rar等文件时浏览器直接打开而没弹出另存为对话框
- iOS微信浏览器直接打开App
- 微信中点击链接直接跳到默认浏览器是怎么实现的?(不是在微信内置浏览器打开)
- 微信自动跳转手机默认浏览器打开APP下载链接的实现方式
- 微信自动跳转浏览器打开APP(APK)下载链接
- 微信内浏览器不支持下载APK文件怎么解决