微信跳转链接解决微信 h5下载apk没反应的原理（含代码）

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

分析：微信不支持，在微信中屏蔽了apk文件的下载以及AppStore的跳转（且除非和TX有合作的应用，否则也不支持通过scheme跳转第三方app）

变通方法：

一、借助TX的应用市场 --‘应用宝’：将app上架应用宝，在微信中点击下载按钮(app的应用宝微下载地址)，安卓则可跳转应用直接进行下载，iphone则会自动跳转Appstore（需在TX开发平台进行配置）

总结：虽然这种方法可以直接跳出微信并进行下载，但是需要用户在应用宝中下载

二、在微信中生成遮罩层，然后指引用户点击微信中右上角的更多按钮，选择【在浏览器打开】（iphone为【在safari中打开】，下同）

总结：虽然这种方法需要用户多操作一步，但贵在原生且不涉及第三方应用市场，本文主要讲述的是这种方法（且在浏览器中打开后仿应用宝下载效果：安卓直接弹出apk下载框，iphone则直接跳转AppStore，无需用户再一次点击下载按钮）

三、工具:旋风微跳  http://www.zjychina.cn

旋风微跳是一款基于微信后端开发了一款微信营销下载推广助手，使用了本插件生成的链接，用户在微信任意环境下点击链接或者扫描二维码，可以实现直接跳转手机默认浏览器并打开指定网页。

总结：这种方式是最便捷、有效的方式。

主要代码如下(H5页面由vue构建)：
1、识别手机类型

/* 判断用户手机为安卓还是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
}
}
}
2、识别微信环境

/* 判断是否为微信环境 */
this.isWeiXin = navigator.userAgent.toLowerCase().indexOf(‘micromessenger’) > -1 ? true : false
3、点击下载按钮，显示遮罩层，并为本H5页面url地址上增加hash值‘download’(改变hash值并不会刷新页面，但可让浏览器识别)，并指引用户浏览器打开

/* 点击下载按钮 */
downloadApp () {
// 微信环境
let self = this
self.checkPhone()
let agent = (navigator.userAgent || navigator.vendor || window.opera)
if (agent != null) {
let agentName = agent.toLowerCase()
// this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … 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，直接跳转Appstore
window.location.href = config.linkToAppstore
} else {
this.$alert({text: [‘暂不支持，敬请期待~’]})
}
}
}

作者：小刺猬不开心
来源：CSDN
原文：https://blog.csdn.net/ykkcdd488/article/details/88068132
版权声明：本文为博主原创文章，转载请附上博文链接！