Vue使用QrCode插件生成二维码

1、安装

cnpm  i  qrcodejs2  --save

2、基本使用

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

Vue使用QrCode插件生成二维码

在相应的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为扫描二维码之后的优化页面

Vue使用QrCode插件生成二维码

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

<template>
  <div class="app-download">
    <!-- pc -->
    <img :src="pcUrl" class="phone-logo" v-if="phoneFlag === 0">
    <!-- android -->
    <img :src="androidUrl" class="phone-logo" v-if="phoneFlag === 1">
    <!-- ios -->
    <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
      }
    })
  },
}
</script>

View Code

4、遇到的问题

　　尚无

秒客网

Vue使用QrCode插件生成二维码

相关文章