项目需求

• 公司要做一个web官网的下载页面，功能是微信扫码可以直接下载Ios手机端app、Android手机端app、及电脑端可以下载windows的桌面端应用程序
• 下载页面的官网地址，会在其余端生成一个二维码，在手机端微信打开二维码时可以直接辨别手机型号去下载对应的手机app。如果有app则直接跳转到app的内部

开发

web页面显示

web官网下载页的开发

• 这个比较简单，请求后台接口，接口返回Android以及ios的下载地址链接，前端使用qrcodejs2将下载地址链接生成二维码。
• 这时微信扫码就可以进行下载

web官网地址生成下载二维码

• 所有端的手机都可以扫这个二维码进行下载。
• 先判断是否是从该二维码扫码进入的，http://192.168.3.101:80/web/#/download?type=screen在地址中加type类型
• 在mounted中判断是否有type，如果有type，则直接去判断扫码的手机类型

   mounted() {
    if (this.$route.query.type) {
      this.visibleMask = true
      this.typeQuery = this.$route.query.type
      this.getAndroidJI()
    }
  },
    methods: {
    // 判断判断客户端是否是iOS或者Android
    getAndroidJI() {
      const ran = navigator.userAgent
      const isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
      const isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      //判断是否是微信环境
      if (this.isWeixin()) {
        if (isAndroid) {
       // Android手机
          this.maskValue = '请在浏览器中打开'
        } else {
          try {
          //ios
           window.location.replace('http://apps.apple.com/cn/app/id387682726')
          } catch (error) {}
        }
      } else {
        this.visibleMask = false
        if (isAndroid) {
          this.explorer = true
        }
        if (isIOS) {
          try {
           window.location.replace('http://apps.apple.com/cn/app/id387682726')
          } catch (error) {}
        }
      }
    },
    // 判断是否是微信客户端
    isWeixin() {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
        return true
      } else {
        return false
      }
    },
    // 判断是否电脑端
    IsPC() {
      var userAgentInfo = navigator.userAgent
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
      var flag = true
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false
          break
        }
      }
      return flag
    }
  }

• 安卓微信扫码
  
• 安卓点击右上角的浏览器中打开
  
• 此时点击下载时

 <div @click="onNavigationApp" class="button" v-if="explorer">立即下载</div>
  onNavigationApp() {
  // 点击时，会先跳转android的scheme链接，该链接会自动打开app，如果有安装app的话。如果跳转失败，会走catch去下载app，scheme链接需要手动点击去调用
      try {
        window.location.href = 'android://的scheme地址，这个地址安卓开发人员提供'
      } catch (error) {}
      setTimeout(() => {
        window.location.replace(this.androidUrl)
      }, 1500)
    },

• 当手机有此app时
  
• 没有此app时
  
• ios微信扫码