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

时间：2025-04-05 10:04:10

小程序内置扫描二维码

image

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

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

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

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

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

自定义实现扫描二维码

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

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

实现步骤

  1. 绑定事件：使用image和canvas组件，在image组件上监听longpress事件
  2. 显示菜单：触发事件后，使用显示菜单
  3. 创建image对象：点击菜单后，获取canvas的node，获取context，然后通过得到图像数据，然后通过upng解析
  4. 将解析结果显示在页面上
<image src="./imgs/" bindlongpress="handleImageLongpress" data-src="./imgs/"><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+';
			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)
			}
		});	
	});
}

除了上面的扫描二维码的方法外，还可以使用调用用户手机的摄像头实现扫码，这种情况需要用户授权使用摄像头，才能调用接口。这种接口的场景有限，通常适用于用户点击某个按钮然后进行扫码，支付场景比较常见，还有就是通过二维码加好友、加群等场景。

如果上面这些方法还是不能满足需要，只能让后端实现解析二维码，前端只需要传递一张图片就行

相关文章