微信小程序：实现长按识别二维码

原创已于 2024-01-18 11:44:01 修改 · 1.6w 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #javascript

于 2022-10-18 12:45:08 首次发布

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现自定义扫描二维码功能。首先，可以通过内置的image组件和wx.previewImage接口来实现基本的二维码识别，但仅限于微信生态内的二维码。要支持更多类型的二维码，需要利用小程序的原生组件如image和canvas，结合wx.showActionSheet、canvas.createImage和第三方库如upng-js、jsqr进行图像处理和二维码解析。此外，还提到了wx.scanCode接口用于调用摄像头实时扫码，适用于用户主动触发的场景。最后，讨论了在前端无法满足需求时，如何将任务交给后端处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序内置扫描二维码

image

使用小程序提供的image组件，image组件上有一个show-menu-by-longpress的属性，设置为true

<image show-menu-by-longpress="{{true}}"></image>

当image被长按时会弹出选择菜单

wx.previewImage

wx.previewImage({
	urls:['./imgs/qrcode.png']
})

当图片预览时，长按图片会弹出菜单

自定义实现扫描二维码

上面的实现方式，支持微信小程序、公众号、个人微信、微信群二维码，对于其他的二维码不能识别，因此，只能自定义实现。
实现扫描二维码需要使用以下工具

小程序原生组件：iamge、canvas组件
小程序原生API：wx.showActionSheet()、canvas.createImage()
解析二维码工具库：upng-js、jsqr

实现步骤

绑定事件：使用image和canvas组件，在image组件上监听longpress事件
显示菜单：触发事件后，使用wx.showActionSheet显示菜单
创建image对象：点击菜单后，获取canvas的node，获取context，然后通过wx.canvasGetImageData得到图像数据，然后通过upng解析
将解析结果显示在页面上

<image src="./imgs/qrcode.png" bindlongpress="handleImageLongpress" data-src="./imgs/qrcode.png"><image>
<canvas id="canvas" canvas-id="canvas" type="2d"></canvas>

const uPng = require('upng-js');
const {default:jsQR} = require('jsqr');
const qrcodeParser = require('qrcode-parser')
handleImageLongpress(e){
	const src = e.currentTarget.dataset.src;
	wx.showActionSheet({itemList:['识别二维码']}).then((res) => {
			wx.createSelectorQuery()
			.select('#canvas')
			.fields({node:true})
			.exec(res => {
			const canvas = res[0].node;
			const ctx = canvas.getContext('2d');
			const img = canvas.createImage();
			img.src = '../imgs/hello+world.png';
			img.onload = function (){
				ctx.drawImage(img,0,0,canvas.width,canvas.height);
				let url = canvas.toDataURL();
				let buff = wx.base64ToArrayBuffer(url.split(',')[1]);
				let imgData = upng.decode(buff);
				let rgba = upng.toRGBA8(imgData)[0];
				let code = jsQR(new Uint8ClampedArray(rgba),canvas.width,canvas.height);
				console.log(code.data)
			}
		});	
	});
}