微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码
需求:微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)
变通方法:
一、借助TX的应用市场 --‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置)
总结:虽然这种方法可以直接跳出微信并进行下载,但是需要用户在应用宝中下载
二、在微信中生成遮罩层,然后指引用户点击微信中右上角的更多按钮,选择【在浏览器打开】(iphone为【在safari中打开】,下同)
总结:虽然这种方法需要用户多操作一步,但贵在原生且不涉及第三方应用市场,本文主要讲述的是这种方法(且在浏览器中打开后仿应用宝下载效果:安卓直接弹出apk下载框,iphone则直接跳转AppStore,无需用户再一次点击下载按钮)
案例效果展示:
1、IOS自动跳转Appstore(需在TX开发平台进行配置)
2、安卓:直接跳转手机浏览器打开APK下载文件
代码:
1、识别手机类型
/* 判断用户手机为安卓还是iphone */checkPhone () {let self = thislet 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 = thisself.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 = truewindow.location.hash = 'download' // 改变hash,便于浏览器打开时直接下载安卓包return}// 安卓包下载地址window.location.href = config.androidDownloadUrl} else if (self.isIOS) {// 微信环境if (self.isWeiXin) {self.downloadInWeixin = truewindow.location.hash = 'download' // 改变hash,便于浏览器打开时直接跳转AppStorereturn}// 苹果商店链接地址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,直接跳转Appstorewindow.location.href = config.linkToAppstore} else {this.$alert({text: ['暂不支持,敬请期待~']})}}}
微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码相关推荐
- android 打开h5文件下载,微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码...
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
- uniapp h5页面打开app,没有下载则跳转下载
参考https://ask.dcloud.net.cn/article/409 if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {var ...
- 微信跳转手机外部浏览器下载APK文件(IOS跳转苹果商店)是怎么实现的
来源分析 商业分析在微信的使用人数已经高居各通讯APP的榜首的同时,微信成为了我国移动流量最大的平台之一.在次趋势的引导下,很多的商家.体户便抓住了这一机遇,利用微信这个渠道来做产品的推广.以及营销方 ...
- 微信H5页面生成图片并长按下载
首先需要一JS插件 html2canvas 下载地址:http://html2canvas.hertzen.com/ 引入html2canvas.min.jsj $(".btnCard&qu ...
- H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
- 怎样使微信中打开链接自动打开外部浏览器打开指定URL页面或者直接下载APP(安卓/苹果)文件
最近很多朋友在使用微信分享转发网页链接的时候,都很容易碰到链接在微信中无法打开的问题.通常这种情况微信会给个提示 "已停止访问该网址" ,那么导致这个情况的因素有哪些呢,主要有以下 ...
- 堆米微信H5页面怎么制作?易企秀微信H5页面制作,微信简历制作,
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
- html5页面和app的区别,H5页面与APP区别何在
APP相信大家都非常熟悉,就是手机里经常安装的软件程序,它都需要经过下载安装的步骤才能打开产品进行操作.不过H5页面和APP却有比较大的区别,它不需要经过下载安装,直接能够在浏览器和微信等社交平台中打 ...
- 微信h5页面实现人脸注册和登陆
工作中总会遇到一些麻烦的问题,有问题不要怕解决就好了,前段时间要实现微信h5页面人脸注册/登录,本以为很简单的一个东西,没想到居然这么麻烦,写个文章记录下过程和遇到的问题及解决办法: 需求:①人脸注册 ...
最新文章
- scrum敏捷开发的几款工具
- 2009第二届C++技术大会即将在上海隆重召开
- java地铁线路规划_地铁线路规划——简单分析
- 7.16 T1 礼物
- Tears in Heaven
- shell基础:多命令顺序执行与管道符
- MyBatis 实际使用案例-总结
- 清华大学计算机系男女,【清华大学男女比例】2016清华大学各院系男女比例
- Java(enum)枚举用法详解
- java中sql之count,SQL COUNT() 函数--编程学习网
- 计算机组成原理实用教程课后答案,王万生《计算机组成原理实用教程》课后习题答案..doc...
- Spring Boot RabbitMQ 详解
- Quartz学习总结(2)——定时任务框架Quartz详解
- 你有哪些“相见恨晚”的 UE4 学习资料?
- 【Spring】白话IoC及容器的初始化
- [java实战篇]--java的GUI(1)
- ORACLE DG断档处理
- 单面打印机打印双面小册子
- php internetshortcut,shortcut功能
- 【工具】goland pull代码 出现 you local changes would be overwritten by merge.Commit, stash or revert ......