vue扫码下载app，并区分安卓和ios

由于微信扫码，并不能识别apk文件，所以先做一个前置页，把这个前置页做成二维码，我是用草料二维码生成器的，很方便。

下面贴一下前置页AppDownload.vue代码

<template>
  <div class="guide-wrap" v-show="guideShow">app下载</div>
</template>
<script >
export default {
  name: 'AppDownload',
  data() {
    return {
      guideShow:false,
      userAgent: navigator.userAgent.toLowerCase()
    }
  },
  created() {
    if (this.isWeChatOrQQ(this.userAgent)) {
      // 是微信或者QQ，使页面变为引导页，引导用户在浏览器中打开该链接
      this.guideShow = true
    } else if (this.isAndroid(this.userAgent) || this.isHuaWei(this.userAgent)) {
      //直接跳转app下载页面
      this.$router.push('/download')
    } else if (this.isIOS(this.userAgent)) {
      //直接跳转app下载页面
      this.$router.push('/download')
    } else {
      // alert('无法判断终端操作系统类型')
      document.write('userAgent: \t', this.userAgent)
    }
  },
  methods: {
    isIOS() {
      return !!this.userAgent.match(/\(i[^;]+;( U;)? cpu.+mac os x/)
    },
    isAndroid() {
      return this.userAgent.indexOf('android') > -1 || this.userAgent.indexOf('linux') > -1
    },
    isHuaWei() {
      return !!(this.userAgent.indexOf('windows nt') > -1)
    },
    isWeChatOrQQ() {
      const ua = this.userAgent.toLowerCase()
      if (ua.indexOf('micromessenger') > -1) {
        // 如果是微信
        return true
      } else if (/mqqbrowser[\S|\s]*qq/.test(ua) || / qq/.test(ua)) {
        // 如果是QQ
        return true
      }
      return false
    },
    async downloadFile(url, fileName) {
      await fetch(url, {
        method: 'Get',
        mode: 'cors',
        headers: {
        },
        responseType: 'blob'
      }).then((response) => {
        response.blob().then(blob => {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            let link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          }
        })
      })
    }
  }
}
</script>
<style type="text/css">
  body, div, span, i {
    font-size: 100%;
    box-sizing: border-box;
  }
  .guide-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
  }
  .guide-item {
    display: block;
    background: #fff;
  }
  .guide-text {
    width: 15rem;
    position: absolute;
    top: 10%;
    left: 60%;
    transform: translate(-50%, -50%);
    padding: 0.4rem 1rem;
    border-radius: 5rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
  }
  .gudde-btn {
    width: 10rem;
    text-align: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
    padding: 0.4rem 1rem;
    border-radius: 5rem;
    overflow: hidden;
  }
  @keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }
  @-webkit-keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }
  .wrap-fade {
    animation: fade 3s ease-in;
  }
</style>

把这个前置页生成二维码后，扫描这个二维码，就会跳到下载页。下面就是下载页download.vue代码

<template>
  <div class="downloadwrap">
    <div style="text-align: center;padding-top: 35%"></div>
    <div class="downloadbtn" @click="download">下载App</div>
  </div>
</template>
<script>
export default {
  name: 'download',
  methods: {
    download() {
      let browser = {
                versions: function() {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
                language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
            //判断是IOS后跳转到相应的链接
            window.location.href = 'xxxxxxxx'
        }else if (browser.versions.android) {
           //判断是android后跳转到相应的链接
            window.open('')
        }
    }
  }
}
</script>
<style type="text/css">
  body, div, span, i {
    font-size: 100%;
    box-sizing: border-box;
  }
  @keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }
  @-webkit-keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }

  .downloadbtn{
    width: 260px;
    height: 40px;
    line-height: 40px !important;
    color: white;
    background: linear-gradient(270deg,#37a0ff, #2b6eef);
    text-align: center;
    font-size: 0.6rem;
    line-height: 1rem;
    margin: 15% auto;
    border-radius: 0.2rem;
  }
</style>

我这里跳转地址就是下载地址，如果是后端返回的再修改下就好了。其实大部分代码都是借鉴的，自己总结一下知识点。

二更-----有小伙伴问效果图，更新一下

下面这张图就是用草料二维码生成的，进入官网选网址，直接用项目的线上网址加路由，如果是开发环境也可以用本机的IP地址加路由生成就行。

 

 下面这张图就是用微信扫一扫出来的前置引导页，上面提到微信浏览器不识别apk文件，

再下面这张图就是在浏览器打开后的下载页面了，可以根据实际需求美化页面，我这里就放了一个按钮。点击就可以下载了