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属性的变化，从而在二维码内容发生改变时，清空之前的二维码并重新生成。