uniapp 扫码识别(一维码、二维码)

注:需开启扫码功能,首先要在manifest.json配置中打开APP模块配置中 Barcode(扫码)、Camera&Gallery(相机和相册)

自带扫码插件:uni.scanCode(OBJECT)

调起客户端扫码界面,扫码成功后返回对应的结果

如果只是识别高清一维码、二维码,推荐使用,

支持平台(App、各类小程序)

OBJECT参数说明

参数名 类型 必填 说明 平台差异说明
onlyFromCamera Boolean 是否只能从相机扫码,不允许从相册选照片 字节跳动,百度,支付宝小程序不支持此参数
scanType Array 扫码类型,合法值(barCode[一维码]、qrCode[二维码]、datamatrix[Data Matrix 码]、pdf417[PDF417 条码]) 字节跳动小程序不支持此参数
autoDecodeCharset Boolean 是否启用自动识别字符编码功能,默认为否 App
autoZoom Boolean 是否启用自动放大,默认启用 仅App-Android(3.5.4+)支持
barCodeInput Boolean 是否支持手动输入条形码 仅飞书小程序(V3.14.0)支持
hideAlbum Boolean 是否隐藏相册(不允许从相册选择图片),只能从相机扫码。默认值为 false。 仅支付宝小程序支持
success Function 接口调用成功的回调,返回内容详见返回参数说明。
fail Function 接口调用失败的回调函数(识别失败、用户取消等情况下触发)
complete Function 接口调用结束的回调函数(回调成功、失败都会执行)

success 返回参数说明

参数 说明 平台差异说明
result 所扫码的内容
scanType 所扫码的类型 App、微信小程序、百度小程序、QQ小程序、京东小程序、支付宝小程序
charSet 所扫码的字符集 App、微信小程序、百度小程序(所扫码的字符集,仅支持 Android 系统)、QQ小程序、京东小程序
path 当所扫的码为当前应用的合法二维码时,会返回此字段,内容为二维码携带的 path。 微信小程序、QQ小程序、京东小程序
rawData 原始数据,base64 编码 微信小程序、QQ小程序、京东小程序、支付宝小程序
code 扫码所得数据 支付宝小程序
qrCode 扫描二维码时返回二维码数据 支付宝小程序
barCode 扫描条形码时返回条形码数据 支付宝小程序
imageChannel 来源 支付宝小程序

示例

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

在现实使用中,发现如果需要在生活工作中实际使用扫描非高清条码,二维码,微信有微信自带扫码(camera组件),App的扫码引擎的识别效率偏低,推荐使用支付宝提供的扫码插件:https://ext.dcloud.net.cn/plugin?id=2636 

1.支付宝原生扫码插件(支付宝 mPaaS 的扫码组件)使用流程介绍

目前兼容性:Android(使用版本4.4 - 11.0) ios(使用版本9 - 15)

首先要购买安装插件

选择自己对应要安装的项目

1.1 开通阿里云mPaaS

登录https://mpaas.console.aliyun.com/,没有账号的话先进行账号注册,点击进入 管理控制台,进入 开通产品 页面。点击 立即开通,即可开通mPaaS 产品。

1.2创建 mPaaS 应用

  1. 输入应用名称(必填),可以上传应用Logo,方便后面辨别
  2. 进行App代码配置
    1. Android:输入 Package Name(应用包名名称用 . 隔开)然后下载配置文件到本地(Ant-mPaaS-xxx.config 文件)在编辑器中打开
    2. ios:输入 bundle ID,然后下载配置,获取 .config 配置文件

 1.3 导入 config 信息

将上面获取的 config配置文件 在HBuilder X 中进行配置,打开 manifest.json > App原生插件配置 > 云端插件[选择云端插件]

Android:

在config配置文件中找到相对于的AppId、WorkspaceId、License(mpaasConfigLicense)

ios:

将ios的config文件重命名为 meta.config,然后将这个文件放入到您项目中例如: /XX project/nativeplugins/Mpaas-Scan/ios/meta.config 

注: ios本人还未测试,安装的效果还不错!

1.4使用 uniapp 调用mPaaS 扫码

  1.  // 支付宝原生扫码插件(mPaaS 扫码)
  2.  var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
  3.  
  4.  mpaasScanModule.mpaasScan({
  5.  // 扫码识别类型,参数可多选,qrCode、barCode,不设置,默认识别所有
  6.  'scanType':  ['qrCode','barCode'],
  7.  // 是否隐藏相册,默认false不隐藏
  8.  'hideAlbum': true
  9.  },(ret) => {
  10.  console.log(ret)
  11.  //ret.resp_code (10)用户取消,(11)其他错误,(1000)成功
  12.  //ret.resp_message 表示返回结果信息
  13.  //ret.resp_result 表示扫码结果,只有成功才会有结果返回
  14.  })