微信小程序调用相机或者图库实现扫描二维码或者条码的文档教程

李洋博客

发布于 2022-03-03 08:29:05

4.3K0

发布于 2022-03-03 08:29:05

文章被收录于专栏：李洋博客

最近在做一个产品项目，程序是需要扫描条形码然后跟后台某个接口返回值，其实微信小程序就有一个扫码识别的API，下面一起来看看：

wx.scanCode(Object object)

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

index,js代码：

//获取应用实例
const app = getApp()
Page({
	data: {
		scanCodeMsg: "",
	},
	scanCode: function() {
		var that = this;
		wx.scanCode({ //扫描API
			success(res) { //扫描成功
				console.log(res) //输出回调信息
				that.setData({
					scanCodeMsg: res.result
				});
				wx.showToast({
					title: '成功',
					duration: 1000
				})
			}
		})
	}
});

index.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>

这样代码就已经实现了，剩下的就是美化页面，这个自行解决吧，毕竟每个应用的场景不同。

最后在查看下官方 wx.scanCode(Object object) 文档参数，来源微信开放文档。

参数 Object object

属性	类型	默认值	说明
onlyFromCamera	boolean	false	是否只能从相机扫码，不允许从相册选择图片
scanType	Array.<string>	['barCode', 'qrCode']	扫码类型
success	function		接口调用成功的回调函数
fail	function		接口调用失败的回调函数
complete	function		接口调用结束的回调函数（调用成功、失败都会执行）

object.scanType 的合法值

值	说明
barCode	一维码
qrCode	二维码
datamatrix	Data Matrix 码
pdf417	PDF417 条码

object.success 回调函数

参数 Object res

属性	类型	说明
result	string	所扫码的内容
scanType	string	所扫码的类型
charSet	string	所扫码的字符集
path	string	当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path
rawData	string	原始数据，base64编码

res.scanType 的合法值

值	说明
QR_CODE	二维码
AZTEC	一维码
CODABAR	一维码
CODE_39	一维码
CODE_93	一维码
CODE_128	一维码
DATA_MATRIX	二维码
EAN_8	一维码
EAN_13	一维码
ITF	一维码
MAXICODE	一维码
PDF_417	二维码
RSS_14	一维码
RSS_EXPANDED	一维码
UPC_A	一维码
UPC_E	一维码
UPC_EAN_EXTENSION	一维码
WX_CODE	二维码
CODE_25	一维码