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

talklee

温馨提示:这篇文章已超过796天没有更新,请注意相关的内容是否还可用!

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

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

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

属性类型默认值说明
onlyFromCamerabooleanfalse是否只能从相机扫码,不允许从相册选择图片
scanTypeArray.<string>['barCode', 'qrCode']扫码类型
successfunction
接口调用成功的回调函数
failfunction
接口调用失败的回调函数
completefunction
接口调用结束的回调函数(调用成功、失败都会执行)

object.scanType 的合法值

说明
barCode一维码
qrCode二维码
datamatrixData Matrix 码
pdf417PDF417 条码

object.success 回调函数

参数 Object res

属性类型说明
resultstring所扫码的内容
scanTypestring所扫码的类型
charSetstring所扫码的字符集
pathstring当所扫的码为当前小程序二维码时,会返回此字段,内容为二维码携带的 path
rawDatastring原始数据,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一维码

以上就是关于微信小程序扫描二维码的相关介绍,希望文章对你有所帮助,以上代码来源网络,有问题欢迎留言反馈!

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,6276人围观)

还没有评论,来说两句吧...

目录[+]