vue实现微信公众号区分安卓/IOS下载app

引言：在微信公众号开发过程中，我们常常会遇到需要实现公众号推送链接下载客户端的需求。但常常会受限于微信浏览器限制下载。

如下

微信打开点击下载

外部浏览器打开

方案： 点击链接弹出遮罩层提示用户使用外部浏览器打开下载。并判断用户设备。 这里需要使用 navigator.userAgent获取浏览器信息，判断用户是否使用的微信浏览器，如果在微信浏览器打开，就打开遮罩层引导用户使用外部浏览器下载。如下：

  var u = navigator.userAgent
  var isWeixin = !!/MicroMessenger/i.test(u)

同样，我们可以使用navigator.userAgent区分用户设备类型，实现IOS或者安卓设备不同的下载方式如下

   if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
      //安卓手机
      this.mtHref = 'apk文件地址'
    } else if (u.indexOf('iPhone') > -1) {
      //苹果手机
      this.mtHref = '苹果商店'
    }

这里需要注意的是： 苹果商店下载需要提供对应id

当确定用户在微信浏览器中时，我们可以使用原生DOM实现遮罩层的打开关闭。如下：

  if (微信浏览器) {
      window.event ? (window.event.returnValue = false) : e.preventDefault()
      document.getElementById('JweixinTipMT').style.display = 'block'
    }
    document.getElementById('JweixinTipMT').onclick = function() {
    this.style.display = 'none'
    

这里就是通过document.getElementById('id')获取事件写好的遮罩层DOM元素，并使用css属性display： none/block控制隐藏显示。遮罩层样式如下

.wxtip { background: rgba(0, 0, 0, 0.8); text-align: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 998; display: none; } 根据具体需求添加引导文字和图案。 最后，将这个页面放在公司已有的项目中或者直接放在服务器目录下面，并生成URL配置到微信公众号，使用公众号推送链接。建议放在公司已有项目中，这样更利于维护。

**总结：

1、创建一个自适应的h5下载页面；

2、在这个页面中判断用户浏览器信息；

3、当用户在微信浏览器中打开时，弹出遮罩层引导用户使用外部浏览器下载。**

核心代码js

DownloadEvent() {
  var u = navigator.userAgent
  var isWeixin = !!/MicroMessenger/i.test(u)
  if (isWeixin) {
      window.event ? (window.event.returnValue = false) : e.preventDefault()
      document.getElementById('遮罩层').style.display = 'block'
      document.getElementById('遮罩层').onclick = function() {
      this.style.display = 'none'
    }
  } else {
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
      //安卓手机
      this.mtHref = 'apk文件地址'
    } else if (u.indexOf('iPhone') > -1) {
      //苹果手机
      this.mtHref = '苹果商店下载地址'
    }
  }
},
   css
   遮罩层样式
   .wxtip {
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 998;
      display: none;
 }
   
   

完结，第一次写分享，不对的地方欢迎补充学习。