uniapp中生成二维码及解决微信小程序端问题总结

一、文件引入

npm i uqrcodejs

二、使用步骤

<canvas type="2d" id="myCanvas" canvas-id="myCanvas" style="width: 300rpx;height: 300rpx;"></canvas>

注：在微信小程序端，需要加type=“2d”。

1.微信小程序端

微信小程序，推荐使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档

const createQRCode = async () => {
	let url = 'https://www.baidu.com'
	let qr = new UQRCode();
	qr.data = url
	qr.size = uni.upx2px(300);
	qr.make();
	uni.createSelectorQuery().in(currentInstance).select('#myCanvas').fields({
	  node: true,
	  size: true
	}).exec(res => {
		const canvas = res[0].node;
		const dpr = uni.getSystemInfoSync().pixelRatio;
		canvas.width = qr.dynamicSize * dpr;
		canvas.height = qr.dynamicSize * dpr;
		let canvasContext = canvas.getContext('2d');
		canvasContext.scale(dpr, dpr);
		qr.canvasContext = canvasContext;
		qr.drawCanvas();
	});
}

uni.createSelectorQuery().in()说明：
vue2传入this；
vue3传入getCurrentInstance()；
dynamicSize+dpr说明：
使用dynamicSize，可以解决小块间出现白线问题，再通过scale缩放至size，使其达到所设尺寸。
通过dynamicSize+dpr的大小计算，可解决二维码看似模糊（有灰边）的问题！

2.App、H5端

const createQRCode = async () => {
	let url = 'https://www.baidu.com'
	let qr = new UQRCode();
	qr.data = url
	qr.size = uni.upx2px(300);
	qr.make();
	const canvasContext = uni.createCanvasContext('myCanvas');
	qr.canvasContext = canvasContext;
	qr.drawCanvas();
}

三、总结

1. 目前微信小程序、app、h5亲测可用，其他小程序平台未测试。
2. canvas画布大小要和二维码大小一致，否则会出现二维码超出画布的异常情况。
3. 生成二维码的方法有很多，除了本文介绍的uqrcodejs，此外还有qrcode、weapp-qrcode.js等等，自行百度。
4. 一款uQRCode插件，标记一下：https://ext.dcloud.net.cn/plugin?id=1287
5. 其他问题遇到再更新。