在Vue中根据Url下载地址生成二维码展示在界面上

最近来了一个新需求，就是在网页页面上点击按钮不在是直接下载app安装包，需要支持手机扫码下载app，避免他们需要先从电脑上下载，然后传到微信，然后手机从微信上下载下来，得了，需求就是根据后端传递过来的Url请求地址，去生成一个二维码供手机去扫，扫了后完成下载。

引入依赖

由于在vue中我们不使用相关第三方库，我们就无法直接生成一个二维码，还是动态生成的，故而我们需要引入一个vue插件，也就是是qrcodejs2,由于它并非是一个Vue插件，故而我们可以通过以下几种方式将他来引入。

导入相关生成二维码的依赖，在vue中可以通过npm 引入

npm install qrcodejs2 --save-dev

直接引入

<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"></script>

利用引入的依赖生成二维码

在如下代码中，我们通过elment ui的按钮进行操作，后续的操作均是建立在这个按钮上进行的。

 <el-button @click="downloadapk" size="small"  type="primary">下载apk</el-button>

按钮我们有了，那么我们根据npm引入的相关依赖进行操作，在我们需要使用的页面直接引入相关依赖如下，记得我们通过npm引入的依赖，不在具体页面指定，那么系统是不会帮我们主动去引入的。

import QRCode from 'qrcodejs2';

vue界面上，我们定义几个全局变量方便我们使用：

export default {
  data() {
    return {
      qrCodeVisible: false, //默认弹窗关闭
      showQRCode:true, //默认显示二维码
      url: '', //后端传递过来的url地址
    };
  },
  methods:{
  	//其他js方法，待补充
  }
 }

接下来，我们实现上述的按钮里边的js方法downloadapk

    downloadapk(){
    //从后端获取url地址，这个随你，无论你从后端获取什么样的格式，我只取url的地址就行了
		this.$axios.get('/dict/findUrl').then((response) => {
          this.url = response.data.data.url;
          //处理生成二维码的方法
          this.handleClickScan(this.url);
         })
         .catch((error) => {
         //请求异常，报错
         console.log('error:' + JSON.stringify(error))
         })
     },

处理生成二维码的handleClickScan

	handleClickScan(e){
        this.urlBath=e //获取传递过来的url地址
        this.qrCodeVisible = true; //展示弹窗
        // 生成二维码，异步进行
        this.$nextTick(function () {
            document.getElementById("qrCodeUrl").innerHTML = "";
            let qrCodeUrl= new QRCode("qrCodeUrl", {
                width: 240,
                height: 240,
                text: this.urlBath,
                colorDark: "#000",
                colorLight: "#fff",
            });
        });
      },

行，js基本上完善了，那么我们需要处理的是，点击下载按钮的弹出框问题了，我需要在用户点击按钮弹出后，展示二维码给用户扫码：

		<el-dialog   :visible.sync="qrCodeVisible" width="300px" :style="{ 'z-index': 1000 }" :modal="false">
          <div class="ScanImg">
          <!--展示二维码-->
              <div class="ScanMa" id="qrCodeUrl"></div>
          </div>
          <!--直接下载按钮-->
          <div class="btnupload" @click="downloadNow()"> 直接下载 </div>
        </el-dialog>

为了方便使用，这里也将给出直接下载按钮，样式自己调，用户点击按钮就可以实现直接在页面上下载app.

    //直接下载apk
    downloadNow(){
      const link = document.createElement('a')
      link.href = this.url;
      let fname = 'gdb.apk'
      link.setAttribute('download',fname)
      document.body.appendChild(link)
      link.click();
      document.body.removeChild(link);
    },

给出样式仅供参考，无实际意义。根据个人的情况进行调整。

.ScanDiao/deep/.el-dialog__body {
  padding: 5px 2px;
}
.ScanDiao/deep/.el-dialog__header {
    padding: 0px 120px 0px;
    color: #fff;
}
.ScanDiao/deep/.el-dialog__title {
    color: #ffffff;
}
.ScanDiao/deep/.el-dialog__headerbtn {
    top: 5px;
    font-size: 21px;
}
.ScanDiao/deep/.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}
.btnupload{
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  background-color: rgb(38, 133, 206);
  border-radius: 5px;
  color: #fff;
  margin-top: 22px;
}
.ScanMa{
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
}
.ScanImg{
   position: relative;
}