https://www.heckjj.com/index.php zh-cn https://www.heckjj.com/post// Heck <@hecks.tk> Sat, 26 Oct 2019 02:31:52 +0000 https://www.heckjj.com/post//
分析：微信不支持，在微信中屏蔽了apk文件的下载以及AppStore的跳转（且除非和TX有合作的应用，否则也不支持通过scheme跳转第三方app）

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

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

主要代码如下(H5页面由vue构建)：
1、识别手机类型
        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.$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: ['暂不支持，敬请期待~']});                 }             }         }


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: ['暂不支持，敬请期待~']})                 }             }         } ]]> https://www.heckjj.com/post//#blogcomment <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://www.heckjj.com/post//#blogcomment