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

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

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

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

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

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

OBJECT参数说明

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

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

 

 

 

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值