qrcodejs2詳解

qrcodejs2是一個使用純JavaScript編寫的二維碼生成器，它可以在網頁上快速、簡單地生成二維碼，而不需要依賴於任何後端技術。本文將從官網、生成二維碼、文檔、下載、回調、不支持vue3以及怎麼兼容vue3等方面對qrcodejs2進行詳細闡述。

一、qrcodejs2官網

在學習任何一個開源項目之前，我們首先需要了解其官方網站，qrcodejs2的官方網站為https://davidshimjs.github.io/qrcodejs/，在該網站中我們可以找到qrcodejs2的用法示例以及相關文檔和下載鏈接。

二、qrcodejs2獲取生成二維碼的地址

在官網示例中，生成二維碼的主要代碼如下：

var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "http://jindo.dev.naver.com/collie",
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

從代碼中我們可以看出，使用qrcodejs2生成二維碼需指定容器id和二維碼參數。其中，text參數表示二維碼內的文本信息，width和height表示二維碼的寬和高，colorDark和colorLight表示二維碼的深色和淺色，correctLevel表示二維碼的可靠性級別。

三、qrcodejs2文檔

了解一個開源項目，最基本的方法就是查看其文檔，qrcodejs2文檔詳見https://github.com/davidshimjs/qrcodejs。文檔中詳細介紹了qrcodejs2的用法，並提供了許多示例，如不同容器大小、自定義二維碼樣式等等。

四、qrcodejs2下載

在官網https://davidshimjs.github.io/qrcodejs/或者githubhttps://github.com/davidshimjs/qrcodejs中都可以下載到qrcodejs2的源碼，也可以直接引用官方提供的cdn：

<script src="https://cdn.staticfile.org/qrcode.js/1.0.0/qrcode.min.js"></script>

五、qrcodejs2回調

在生成二維碼的過程中，我們可能需要使用回調函數對二維碼進行處理，qrcodejs2提供了一個callback參數：

var qrcode = new QRCode("qrcode", {
  text: "https://github.com/davidshimjs/qrcodejs",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H,
  callback: function (data) {
    console.log(data)
  }
})

在示例中，當二維碼生成完成後，回調函數將會輸出生成二維碼的base64編碼字元串。我們可以使用該回調處理二維碼，如增加logo等操作。

六、qrcodejs2不支持vue3

vue3中採用的Composition API與vue2的Options API有所不同，因此在vue3中使用qrcodejs2時需要對其進行兼容。而事實上，在vue3中使用qrcodejs2生成二維碼可能會遇到諸如局部更新、組件通信等一系列問題。

七、qrcodejs2怎麼兼容vue3

在vue3中，我們可以利用setup函數代替原先的created，methods等選項，利用ref和reactive等新特性實現二維碼生成及更新，示例如下：

<template>
  <div>
    <div ref="qrcodeBox"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2"

export default {
  setup() {
    const qrcodeBox = ref(null);
    let qrcodeInstance;
    onMounted(() => {
      qrcodeInstance = new QRCode(qrcodeBox.value, {
        text: "https://github.com/davidshimjs/qrcodejs",
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    });
    return {
      qrcodeBox,
      qrcodeInstance
    }
  },
  watch: {
    "qrcodeInstance._o.text": function (val, oldVal) {
      this.qrcodeInstance.clear();
      this.qrcodeInstance.makeCode(val);
    }
  }
}
</script>

在示例中，我們首先在setup函數中定義了一個ref和一個let變數，分別表示生成二維碼容器和qrcodeInstance實例。在onMounted函數中，我們初始化了生成二維碼所需的參數。在watch屬性中watch了qrcodeInstance._o.text屬性的變化，從而在二維碼內容發生改變時，清空之前的二維碼並重新生成。