新接触功能生成二维码插件（uqrcode.js）

新接触功能生成二维码插件（uqrcode.js）

文档地址：https://uqrcode.cn/doc/guide/

下载

npm install uqrcodejs

引入

// npm安装
import UQRCode from 'uqrcodejs'; 

使用

HTML实例

DOM部分

<canvas id="qrcode" width="200" height="200"></canvas>

JS部分

// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();

uni-app示例

Template部分

<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>

JS部分

onReady() {
  // 获取uQRCode实例
  var qr = new UQRCode();
  // 设置二维码内容
  qr.data = "https://uqrcode.cn/doc";
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200;
  // 调用制作二维码方法
  qr.make();
  // 获取canvas上下文
  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
  // 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext;
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas();
}