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、圖片如下