H5 -- 微信h5页面中下载第三方app的方法
需求：在微信h5页面中下载第三方app —— 安卓， 直接下载apk文件包；iphone，跳转AppStore
分析：微信不支持，在微信中屏蔽了apk文件的下载以及AppStore的跳转（且除非和TX有合作的应用，否则也不支持通过scheme跳转第三方app）
变通方法：
一、借助TX的应用市场 --‘应用宝’：将app上架应用宝，在微信中点击下载按钮(app的应用宝微下载地址)，安卓则可跳转应用直接进行下载，iphone则会自动跳转Appstore（需在TX开发平台进行配置）
总结：虽然这种方法可以直接跳出微信并进行下载，但是需要用户在应用宝中下载
二、在微信中生成遮罩层，然后指引用户点击微信中右上角的更多按钮，选择【在浏览器打开】（iphone为【在safari中打开】，下同）
总结：虽然这种方法需要用户多操作一步，但贵在原生且不涉及第三方应用市场，本文主要讲述的是这种方法（且在浏览器中打开后仿应用宝下载效果：安卓直接弹出apk下载框，iphone则直接跳转AppStore，无需用户再一次点击下载按钮）
- 主要代码如下(H5页面由vue构建)：
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 -- 微信h5页面中下载第三方app的方法相关推荐
- 微信跳转手机默认浏览器提示 微信h5页面中下载第三方app的方法
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 可以参考:微信打开网址添加在浏览器中打开提示和 ...
- 需求：在微信h5页面中下载第三方app —— 安卓， 直接下载apk文件包；iphone，跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app) 点击查看案例地址 变通方法: 一.借助TX的应用市 ...
- 微信小程序中使用第三方ui框架方法
安装步骤 安装前确定电脑上安装了node. (没有设置探宝镜像的先设置淘宝镜像,安装速度更快) 设置淘宝镜像: npm config set registry https://registry.npm ...
- html5页面中打开本地app，如果没有跳转下载页面的解决方案
需求效果 在推广网页上用户点击产品的详细信息时,判断出这个用户手机上是否安装自己的app如果安装了直接自动打开手机内的app应用,若没有则跳转app的下载页 技术实现 直接用window.locati ...
- 微信小程序中下载app的方法
微信小程序中下载app的方法 因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...
- 如何在微信小程序中下载APP？
如何在微信小程序中下载APP? 可能的方案 官方api接口:--目前小程序官方未提供专门下载APP的接口:小程序目前是不允许将流量导出到APP之外,所以合理推断,该方案短期内并不可行. 通过web-v ...
- 微信h5支付“网站域名ICP备案主体与商户号主体不一致”的解决方法，H5微信支付 授权函下载
微信h5支付"网站域名ICP备案主体与商户号主体不一致"的解决方法,H5微信支付 授权函下载 参考文章: (1)微信h5支付"网站域名ICP备案主体与商户号主体不一致&q ...
- iOS/Android 微信及浏览器中唤起本地APP
title: iOS/Android 微信及浏览器中唤起本地APP date: 2017-05-10 10:19:20 tags: 需求概述 分享应用活动链接已经成为手机应用一个非常重要的推广传播形式 ...
- cordova打开文件_Cordova开发App入门（四）打开及下载第三方App
前言 在开发app时经常会碰到这种需求:我要在A应用中打开B应用,那么用Cordova如何实现呢? 欲知后事如何,且听下回分解...... ... 大大大大佬,别,别打我,我继续写还不行了吗. 本文涉 ...
最新文章
- 笑不活了！院士带领课题组硕博“整活”，科研版「苦行僧」火出圈！
- 如何更改mysql的授权信息_Mysql 的用户权限等操作管理与设置（创建、授权、修改、查看）...
- beta阶段140字评论
- php 锁的使用场景,抢购秒杀的场景使用锁个人认为不太合理？
- 【算法】五分钟快速了解代码复杂度
- java excel条件格式_Java 使用条件格式高亮Excel单元格
- Kotlin 势必取代 Java？
- git clone github源码 下载速度很慢的解决方法
- 微信小程序——图片打马赛克
- LINUX安装百度网盘
- 使用 Maven 来管理项目 从 0 开始搭建 Maven 项目
- 3dmax 对模型做bool运算
- 免费的开放源代码的Web应用服务器：Tomcat
- BIOS和DOS的区别
- 最近 火火火火 的 GitHub 项目！
- 烤仔的朋友们丨政策暖风吹来，国内公链们的春天来了？
- python入门之字符串索引，切片
- SecureFX 查看隐藏文件夹
- 百度CEO李彦宏：2018年实现量产无人车
- 计算机导论第五讲MOOC模拟答案,MOOC理念指导下的计算机导论课程_微课堂_设计与思考_朱淑鑫...