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

小程序内置扫描二维码

image

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

当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解析将解析结果显示在页面上

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)

}

});

});

}

wx.scanCode

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

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