实现扫描二维码下载安装包

 

效果图不含任何违法链接，请不要屏蔽，手下留情谢谢！ 

上图是实现的效果图。（如有遇到任何困难请加QQ781284440进行解答） 

第一步：安装vue-qr

         npm install vue-qr --save 

第二步：创建一个vue文件，以下代码作为参考

<template>
  <div class="code">
    <vue-qr
      text="http://192.168.3.91/#/downloadApp"
      colorDark="#4DBA87"
      :size="200"
      :logoSrc="logo"
      logoBackgroundColor="#fff"
      :correctLevel="2"
      :logoScale="0.3"
      :logoMargin="5"
      :dotScale="0.8"
    ></vue-qr>
  </div>
</template>

<script>
/**
 * logoSrc  必须通过import或者require引入
 * colorDark 实点的颜色
 * logoBackgroundColor  logo背景色
 * correctLevel 扫码容错级别，解决logo过大引起扫码无法识别问题
 * logoScale logo缩放比例
*/
import VueQr from "vue-qr";
import logo from "@/assets/download/80.png";
export default {
  components: {
    VueQr,
  },
  data() {
    return {
      logo,
    };
  },
};
</script>

上面的text值为项目中下载页面的地址 ，扫描二维码就会扫转到下载页面

第三步：新建一个dowload.vue 文件，以下代码作为参考，实际情况根据自己项目的业务逻辑

<script>
export default {
  mounted() {
    // 判断扫描二维码的手机
    var u = navigator.userAgent;
    if (u.indexOf("iPhone") > -1) {
      this.IPhoneDowload()
    }
    if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
      this.AndroidDowload();
    }
  },
  methods: {
    AndroidDowload() {
      let a = document.createElement("a");
      a.href = "/static/__UNI__063530C__20230328002234.apk";
      // 添加点击
      a.click();
    },
    IPhoneDowload(){
      let a = document.createElement("a");
      a.href = "/static/__UNI__063530C__20230328002234.apk";  //ios安装包目录
      a.click();
    }
  },
};
</script>

这样就可以实现微信扫码下载安装包的功能