小程序内置扫描二维码

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)}});   });
}

wx.scanCode

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

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

微信小程序：实现长按扫描二维码相关推荐

h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...
生成微信小程序发布上线后的二维码、获取微信小程序二维码、微信小程序二维码如何生成?
情景: 1.在微信小程序审核完成,发布到线上后,想通过扫描小程序二维码进入小程序 2.可分享二维码出去,通过二维码扫码进入小程序方法: 1.进入微信小程序的后台配置.链接:微信公众平台.(如图一) ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
微信小程序之生成条形码和二维码
需求描述:商家用扫描枪扫用户条形码或二维码实现支付. 效果图: 说明:微信小程序.支付宝小程序的条形码和二维码都可以由一串数字通过 barcode.js 和 qrcode.js 插件绘制在页面的 Ca ...
微信小程序如何生成当前页面二维码
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 在微信小程序的开发中,很多的业务场景下都会有生成二维码,然后通过扫码二维码,进入指定页面的需求. 我之前也没 ...
微信小程序开发之普通链接二维码
本文主要介绍扫普通链接二维码打开小程序, 详情请看官方文档https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html 配置普通链接二维 ...
微信小程序内，生成自定义二维码
最近在开发中,需要生成自定义的二维码,于是做了一个包出来,分享给大家一起使用.适用于微信小程序的二维码生成器,基于Canvas生成,支持中文的输入.可在原生小程序,mpvue,taro中使用.(文末有 ...

微信小程序：实现长按扫描二维码