如何在uniapp中实现二维码生成功能

别凶小晗.2024-02-26 8:39

官方文档：https://uqrcode.cn/doc。

github地址：https://github.com/Sansnn/uQRCode。

npm地址：https://www.npmjs.com/package/uqrcodejs。

uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=1287

javascript 复制代码

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

javascript 复制代码

import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

javascript 复制代码

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