uniapp生成二维码（uQRCode）与自定义绘制样式与内容

二维码生成使用了一款基于Javascript环境开发的插件  uQRCode ，它不仅适用于uniapp，也适用于所有Javascript运行环境的前端应用和Node.js。

uQRCode 插件地址：https://ext.dcloud.net.cn/plugin?id=1287

目录

1、npm安装

2、通过import引入

3、生成二维码

4、自定义绘制样式与内容

1、npm安装

npm install uqrcodejs
# 或者
npm install @uqrcode/js

2、通过import引入

import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js

3、生成二维码

如果只是生成二维码的话实现也特别简单，在template中加入canvas组件，并在script中创建UQRCode对象配置参数调用绘制方法即可。

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

const qr = new UQRCode();
qr.data = '二维码内容';
qr.size = 300;
qr.make();
const ctx = uni.createCanvasContext('qrcode', this); // 组件内调用需传this，vue3 中 this 为 getCurrentInstance()?.proxy
qr.canvasContext = ctx;
qr.drawCanvas();

当然，除绘制简单的黑白块二维码外，UQRCode还支持定制块颜色、背景颜色、块形状、块之间的间距等，可绘制出各种花里胡哨的二维码，具体用法可查阅官方文档，本文不做阐述，