uniapp 生成二维码

祖先森、

已于 2024-09-21 23:00:55 修改

阅读量968

点赞数 4

文章标签： uni-app vue.js javascript

于 2024-08-16 10:36:32 首次发布

本文链接：https://blog.csdn.net/weixin_43221910/article/details/141252313

版权

一般常用到的二维码生成库，在使用的过程中，都需要设置到指定的dom元素上，

但是在 uniapp 项目中，想要像vue项目中一样，获取标签的dom元素是比较难操作的。所以在 uniapp 中生成二维码，就需要换一种思路，通过 canvas 画布，将二维码进行绘制并放置在 canvas 中进行展示。

uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和Node.js应用。 uQRCode可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。

插件地址：uQRCode 全端二维码生成插件支持nvue 支持nodejs服务端 - DCloud 插件市场

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

1. 安装

1.1 通过npm安装，成功后即可使用import或require进行引用。

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

1.2 通过项目开源地址获取uqrcode.js，下载uqrcode.js后，将其复制到您项目指定目录，在页面中引入uqrcode.js文件即可开始使用。

2. 引入

通过import引入。

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

Node.js通过require引入。

// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js

3. 使用

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

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

二维码成功生成！

4. 背景设置透明

// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 背景颜色 透明
qr.backgroundColor = 'rgba(255,255,255,0)';
// 前景颜色 白色
qr.foregroundColor = 'rgba(255,255,255,1)';
// 调用制作二维码方法
qr.make();