vue公众号开发--二维码生成

vue公众号开发–二维码生成

在H5项目中，我们往往会需要生成二维码，其实二维码的生成很简单，具体的步骤如下：

1、安装依赖qrcodejs2

npm install qrcodejs2 -S

---

2、引入使用

import QRCode from "qrcodejs2";

---

3、html结构

<div class="code-ontainer column-between-center">
  <p class="text">二维码</p>
  <div class="code-img" v-if="!qrCodeUrl">加载中...</div>
  <div class="code-img" v-if="qrCodeUrl" id="qrCode" ref="qrCodeDiv" style="display:none;">		</div>
  <div class="code-img" v-if="qrCodeUrl" id="qrCode2" ref="qrCodeDiv2"></div>
</div>

---

4、js代码

  // 二维码
  async getQrCode() {
    let res = await this.$Http.addQrCode(this.createQrCodeParameter, true);
    if (res.ResultFlag == "0") {
      this.qrCodeUrl = res.ResultSet;
      this.$nextTick(function() {
        document.getElementById("qrCode").innerHTML = "";
        this.bindQRCode(this.qrCodeUrl);
      });
    } else {
      alert("获取二维码失败");
    }
  },
    
  // 生成二维码
  bindQRCode(codeText) {
    new QRCode(this.$refs.qrCodeDiv, {
      text: codeText,
      width: 150,
      height: 150,
      colorDark: "#333333", //二维码颜色
      colorLight: "#ffffff", //二维码背景色
      correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
    });
    let mycanvas = document.getElementsByTagName('canvas')[0];
    let img = this.convertCanvasToImage(mycanvas)
    let needDiv = document.getElementById('qrCode2');  //need标识要插入图片的div
    needDiv.append(img);
  },

---

5、代码分析

• 代码思路

  首先，引入插件qrcodejs2，并使用。然后，定义html结构，获取生成二维码需要的字符串。最后，生成二维码，并将二维码转化为图片（可用于长按识别等）。

• 函数分析

  getQrCode：用户获取生成二维码的字符串；请注意this.$nextTick的使用。

  bindQRCode：使用字符串生成二维码。

• 温馨提示

  以下代码用户将图片生成。

let mycanvas = document.getElementsByTagName('canvas')[0];
let img = this.convertCanvasToImage(mycanvas)
let needDiv = document.getElementById('qrCode2');  //need标识要插入图片的div
needDiv.append(img);

---

6、图片如下