微信小程序调用摄像头扫描识别二维码和条形码

今天在整一个有关于快递的小程序，快递单号一般比较长，手动录入会很麻烦。

然后就找了一下，其实微信小程序 API 中自带一个扫码识别的功能。

wx.scanCode(Object object)

调起客户端扫码界面进行扫码。

示例代码：

// 允许从相机和相册扫码
wx.scanCode({success(res) {console.log(res)}
})// 只允许从相机扫码
wx.scanCode({onlyFromCamera: true,success(res) {console.log(res)}
})

WXSS就不贴了

WXML部分（应用）：

<view class='form-list'><text>运单号码</text><input type='text' value='{{scanCodeMsg}}'></input><image class='scan' bindtap='scanCode' src='/images/scanCode.png' mode='widthFix'></image>
</view>

给扫描按钮的图片绑定一个事件，点击调用摄像头扫码，扫描成功将数值赋给 input 输入框的 value 值。效果如下图：

JS 部分（应用）：

data: {scanCodeMsg: "",
},
scanCode: function() {var that = this;wx.scanCode({ //扫描APIsuccess(res) { //扫描成功console.log(res) //输出回调信息that.setData({scanCodeMsg: res.result});wx.showToast({title: '成功',duration: 1000})}})
},

参数 Object object

object.success 回调函数

参数

Object res

转自：https://www.w3h5.com/post/255.html

微信小程序调用摄像头扫描识别二维码和条形码相关推荐

微信小程序内部长按识别二维码添加个人微信
项目场景: 最近接到需求,在小程序内部长按识别二维码添加个人微信. 初步效果: 问题描述:web-view官方文档微信小程序目前image标签,仅支持长按识别小程序码,后面查看网上相关资料,发现微信 ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
【Exception】微信小程序，配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序
[Exception]微信小程序,配置普通链接二维码规则文件校验失败问题校验文件检查失败扫普通链接二维码打开小程序一.问题描述 1.公司业务有个需求,扫描普通的二维码,跳转到小程序的某个页面, ...
opencv之调用摄像头动态识别二维码
结合前几篇做的工作,实现一下动态识别二维码 opencv之调用摄像头动态识别二维码
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
C# 调用摄像头实时识别二维码
注释和winform控件自己做,源码需要下载. // 功能:调用zxing生成和解析二维码,调用摄像头根据图片识别二维 using System; using System.Collections.G ...
树莓派4b + python3 + pyzbar + opencv + 摄像头扫描识别二维码（寻找最大的二维码）
前言最近需要做一个扫码乘车的功能,于是使用树莓派的摄像头扫描二维码来做一个demo . 网上有部分人用的是zbar这个库,但是我安装后,发现并不能在Python3上使用,这就有点不太好了.经过我的多 ...
生成微信小程序发布上线后的二维码、获取微信小程序二维码、微信小程序二维码如何生成?
情景: 1.在微信小程序审核完成,发布到线上后,想通过扫描小程序二维码进入小程序 2.可分享二维码出去,通过二维码扫码进入小程序方法: 1.进入微信小程序的后台配置.链接:微信公众平台.(如图一) ...