vue扫码下载APP安装包

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue扫码下载APP安装包，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5411字，纯文字阅读大概需要8分钟。

内容图文

把appDownload.vue地址生成二维码即可

临时跳转页 appDownload.vue

<template>
  <div class="guide-wrap" v-show="guideShow"><img src="@/assets/images/downloadapp/openinbrowser.png"/></div>
</template>
<script>

export default {
  name: 'AppDownload',
  components: {
  },
  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 {
            var 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: 38%"><img src="@/assets/images/downloadapp/bim+logo.png"/></div>
    <div class="downloadbtn" @click="download">下载App</div>
  </div>
</template>
<script>
import { latest } from '@/api/appDownload'

export default {
  name: 'AppDownload',
  components: {
  },
  data() {
    return {
      baseUrl: '',
      // iosItemService: 'itms-services://?action=download-manifest&url=',
      // iosPlist: 'static/app-download-helper/tzmIos.plist',
      // androidFileName: 'static/app-download-helper/app/com.bonc.tzs.app_3.1.0.apk',
      iosItemService: '',
      iosPlist: '',
      androidFile: '',
      androidFileName: '',
      userAgent: navigator.userAgent.toLowerCase()
    }
  },
  created(){
  	//用于调用后端接口获取app包信息。
    this.getLatest();
  },
  methods: {
    download(){
      console.log(this.isAndroid(this.userAgent))
      if (this.isAndroid(this.userAgent) || this.isHuaWei(this.userAgent)) {
        window.open(this.androidFile)
      } else if (this.isIOS(this.userAgent)) {
		//TODO ios跳转APP STORE应用商店下载
		window.location.replace(iosItemService + baseUrl + iosPlist)
      } else {
        // alert('无法判断终端操作系统类型')
        document.write('userAgent: \t', this.userAgent)
      }
    },
    async getLatest() {
      const result = await latest()
      if (result.code === 10000) {
        console.log(result.data.downloadLink)
        this.androidFile = result.data.downloadLink
        this.androidFileName = result.data.fileUrlList[0].name
      }
    },
    getIOS() {
      console.log('下载ios安装包')
      window.open(this.iosItemService + this.baseUrl + this.iosPlist)
    },
    getAndroid() {
      console.log('下载android安装包')
      // window.open(this.androidFile, '_blank')
      this.downloadFile(this.androidFile, this.androidFileName)
    },
    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 {
            var 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;
  }
  @keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }
  @-webkit-keyframes fade {
    from {top: 0;}
    to {top: 100vh;}
  }
  .downloadwrap{
    background-image: url("./assets/images/downloadapp/bimbg2.png");
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .downloadbtn{
    width: 260px;
    height: 40px;
    color: white;
    background: linear-gradient(270deg,#37a0ff, #2b6eef);
    text-align: center;
    font-size: 0.4rem;
    line-height: 1rem;
    margin: 15% auto;
    border-radius: 0.2rem;
  }
</style>

内容总结

以上是互联网集市为您收集整理的vue扫码下载APP安装包全部内容，希望文章能够帮你解决vue扫码下载APP安装包所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---