Vue实现路径转二维码，并用手机扫码下载APP

目录

1.安装qrcodejs2插件

2. 页面中引入

3.页面中填充

4.页面中调用

5.完整代码

6.最终效果

---

今天，组长让我做一下扫二维码就可以下载APP的一个功能，也参考了网上其他技术大佬的一些想法，就写了这篇文章仅记录自己的学习，最后有完整代码以及效果图。

1.安装qrcodejs2插件

npm install qrcodejs2 --save

2. 页面中引入

import QRCode from 'qrcodejs2';

components:{QRCode}

3.页面中填充

这里我是点击按钮弹框显示二维码的方式，如果不需要弹框就一个div就可以了，可根据自己的需求来改。

<div>
    <el-button type="text" @click="dialogFormVisible = true">APP下载</el-button>

    <el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode">
      <div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;">
          <div style="text-align:center;color:red;padding:10px;">
              注：当前仅支持Android客户端使用<br>
          </div>
          <div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div>
          <div style="text-align: center;padding:10px; ">
              <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          </div>
      </div>
    </el-dialog>
</div>

 4.页面中调用

data(){
    return{
      isLoaded: false,
      dialogFormVisible: false
    }
},
methods:{
    loadRQCode() {
        if(!this.isLoaded) {
            request({
              url: '/appInfo/androidApk',
              method: 'get'
            }).then((res)=>{
              new QRCode('qrcode',{
                width: 200,
                height: 200,
                text: res.msg
              })
              this.isLoaded = true;
            })
        }
    }
}

 5.完整代码

<template>
    <div>
        <el-button type="text" @click="dialogFormVisible = true">APP下载</el-button>

        <el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode">
          <div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;">
              <div style="text-align:center;color:red;padding:10px;">
                  注：当前仅支持Android客户端使用<br>
              </div>
              <div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div>
              <div style="text-align: center;padding:10px; ">
                  <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
              </div>
          </div>
        </el-dialog>
    </div>
</template>

import request from "@/utils/request";
import QRCode from 'qrcodejs2';

export default {
  name: "",
  components:{QRCode},
  data(){
    return{
      isLoaded: false,
      dialogFormVisible: false
    }
  },
  methods:{
    loadRQCode() {
      if(!this.isLoaded) {
        request({
          url: '/appInfo/androidApk',
          method: 'get'
        }).then((res)=>{
          new QRCode('qrcode',{
            width: 200,
            height: 200,
            text: res.msg
          })
          this.isLoaded = true;
        })
      }
    }
  }

注：
1.以上请求的方式我是后台controller写了一个方法获取application.yml里配置的安卓的下载路径，所以用的request去请求后台的方法从而拿到我要的路径，如果不需要这样，直接写是这样的：

new QRCode('qrcode',{
  width: 200,
  height: 200,
  text: '你要用的下载路径'
})；

2.由于我用的弹框的形式，用的@opened去触发形成二维码的会导致只有弹一次框就要在后面追加一个二维码，所以我用了一个isLoaded的全局变量来判断；
3.这个形成的二维码，如果是微信QQ扫的话，都是默认会提示说要在浏览器打开的，因为它们都无法直接打开网址的。

6.最终效果

以上的学习记录就到这了，拜拜！

说明：学习记录，若有错误，欢迎指正，若有疑问，欢迎评论