Vue使用QrCode插件生成二维码

1、安装

cnpm  i  qrcodejs2  --save

2、基本使用

• 安装成功后，在package.json里面增加以下内容

         

• 在相应的Vue组件中引入qrcode插件

  import QRCode from "qrcodejs2";

• 在html中增加相应的DOM结构

  <div id="qrcode">div>

• 在methods定义方法

  /**
   * [qrcode  生成动态二维码]
   * @param {type}
   * @return {[type]}         [description]
   */
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        render: "canvas", //也可以替换为table
        width: 122,
        height: 122,
        text: this.qrcodeAddress, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },

• 在data里面定义二维码所包含的地址属性

  qrcodeAddress: ""

• 在mounted函数里面定义相应的参数（如果想扫描二维码直接下载，text直接用二地址就好，并且到此结束，如果想先扫描打开一个页面在提示下载，进行美化操作，则需要地址一并进行以下操作）

  /*url: 'http://10.x.xx.xxx:xxxx/downloadPackage?type=1',*/
  //text: 'http://10.xx.xx.xxx:xxxx/app.html',
  const textConfig = require("../../../../config/test.config.js");
  const publicPath =
      process.env.NODE_ENV === "production"
      ? textConfig.PRO_PUBLIC_PATH
      : textConfig.DEV_PUBLIC_PATH;
  一、this.qrcodeAddress = window.location.origin + publicPath + "app.html";//app.html是第二个项目，即多页面
  二、this.qrcodeAddress = window.location.origin + publicPath + "/user/sysconfig/downloadPackage?type=1"
  this.qrcode();//调用二维码方法

3、二维码深入美化操作

• 先看一下目录结构：app为扫描二维码之后的优化页面

           

• 在app页面渲染的组件内写入以下代码
  

  <template>
    <div class="app-download">
      
      <img :src="pcUrl" class="phone-logo" v-if="phoneFlag === 0">
      
      <img :src="androidUrl" class="phone-logo" v-if="phoneFlag === 1">
      
      <img :src="iphoneUrl" class="phone-logo" v-if="phoneFlag === 2">
      
      <a :href="href" id="a">
        <el-button type="primary" class="btn-download">
          {{loadFont}}
        el-button>
      a>
    div>
  template>
  <script>
  import dossierConfig from '@/config/dossier.config'
  import axios from 'axios'
  export default {
    name: 'app',
    data() {
      return {
        phoneFlag: 0, //0-pc 1-android 2-iphone
        isWeChat: false,
        pcUrl: require('./assets/images/pc.png'),
        androidUrl: require('./assets/images/android.png'),
        iphoneUrl: require('./assets/images/iphone.png'),
        href: '',
        loadFont: 'PC下载',
      }
    },
    mounted() {
      const UA = window.navigator.userAgent.toLowerCase()
      const isAndroid = UA && UA.indexOf('android') > 0
      const isIOS = UA && /iphone|ipad|ipod|ios/.test(UA)
      const isWeChat = UA && /micromessenger/.test(UA)
      this.isWeChat = isWeChat
      this.phoneFlag = isAndroid ? 1 : isIOS ? 2 : 0
      this.loadFont = isAndroid ? 'Android下载' : isIOS ? 'IOS下载' : this.loadFont
      this.href = ‘下载地址'
      $('#a').click(() => {
        if (this.isWeChat) {//微信端
          alert('请在浏览器内打开！')
          return false
        }
        if (this.phoneFlag === 2) {
          alert("ios下载功能暂时未开放！")
          return false
        }
      })
    },
  }
  

  View Code

4、遇到的问题

　　尚无