H5+ 二维码扫描功能

二维码在生活中的使用越来越广泛，APP开发中，也越来越多的需求需要用到二维码的扫描功能，以下就针对h5+的二维码扫描功能做一些简单的介绍；

1. var bc = new plus.barcode.Barcode( id, filters, styles ); 创建二维码扫描对象

id：条码识别控件在Webview窗口的DOM节点的id值

filters：要识别的条码类型过滤器，为条码类型常量数组，条码识别引擎可支持多种二维码及一维码类型，默认情况支持QR、EAN13、EAN8三种类型。

styles ：

- frameColor: )扫描框颜色

- scanbarColor:扫描条颜色

- background: (String 类型 )条码识别控件背景颜色

2. bc.start( options ); 开始条码识别

options：条码识别控件扫描条码的参数

- conserve: 是否保存成功扫描到的条码数据时的截图

- filename: 保存成功扫描到的条码数据时的图片路径

- vibrate:成功扫描到条码数据时是否需要震动提醒

- sound:成功扫描到条码数据时播放的提示音类型可取值： “none” - 不播放提示音； “default” 播放默认提示音（5+引擎内置）

3. bc.cancel(); 结束条码识别

- bc.close(); 关闭条码识别控件，释放控件占用系统资源，调用close方法后控件对象将不可使用。

- bc.setFlash( true); 是否开启闪光灯

- 条码识别成功回调
bc.onmarked = function ( type, code, file ) {

}

- type:识别到的条码类型 Number类型的值

- code:识别到的条码数据从条码图片中扫描出的数据内容，字符串采用UTF8编码格式。

- file:识别到的条码图片文件路径

7. 条码识别失败回调函数
bt.onerror = function ( error ) {

}

常见问题：
1.二维码扫描成功之后，当再次返回到扫描界面的时候，不能重新进行扫描；
原因：扫描成功之后，扫描界面已经变成了扫描成功的状态，当你再次但回到这个界面的时候，依然记录的是之前扫描成功的状态，所以不能再次进行扫描；
解决办法：在扫描成功之后强制刷新界面；

var bc = new plus.barcode.Barcode('barcode');
bc.setFlash(false);
bc.onmarked=function(type, result){//扫描成功plus.webview.show('barcodeSucceed','pop-in',100);mui.fire(plus.webview.getWebviewById('barcodeSucceed'),'showResult'{result:result});window.setTimeout(function(){plus.webview.currentWebview().reload();},1000);
}
bc.start();

二维码扫描Demo 包含常见问题的解决办法下载

H5+ 二维码扫描功能相关推荐

MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
iOS 自带二维码扫描功能的实现
#自从iOS7以后中新增了二维码扫描功能.因此可以在不借助第三方类库的情况下简单的写出二维码的扫描功能: 原生的二维码扫描功能在AVFoundation框架下,所以在使用原生的二维码扫描功能时要先导入 ...
基于MUI框架的使用HTML5+实现的二维码扫描功能
Barcode的一个实现案例一.简介 Barco ...
Android实现二维码扫描功能（四）-ZXing识别图片二维码，相册选图
简介上一篇 Android实现二维码扫描功能(三)-闪光灯控制介绍了光线较弱情况下开启闪光灯来辅助二维码识别的方法. 本篇我们介绍如何识别相册中的图片(含二维码) 动态演示使用模拟器录制了动画演示 ...
JavaCV/OpenCV 二维码扫描功能
JavaCV/OpenCV 二维码扫描功能怎样配置工程就不再赘述,不清楚的读者可以网上查找资料,二维码扫描功能通过JavaCV实现起来还是挺简单的,主要OpenCV中QRCodeDetector提供 ...
Android实现二维码扫描功能-ZXing识别图片二维码，相册选图
文章目录 1.演示 2.权限问题 3.实现步骤 4.工具类 5.图片Uri处理(重要更新) 1.演示 2.权限问题部分朋友在打开相册时遇到读写权限未授权的问题,我在开发的时候没有遇到,也没有注册读写 ...
Flutter 3.X二维码扫描功能
Flutter 3.X二维码扫描功能 1. pubspec.yaml文件添加依赖 2使用 3. 源代码 4.第二种方式 4.1 pubspec.yaml文件添加依赖 4.2 使用源代码 1. pub ...
使用安卓实现一个二维码扫描功能（基于Android Studio）
二维码扫描使用很广泛,在这里记录二维码扫描的功能,需要导入第三方的类库. 步骤一:在项目中导入第三方的类库,导入方法:往Android Studio中导入第三方类库文件这篇博客中有详细记录步骤二:定 ...
Android实现二维码扫描功能(一)ZXing插件接入
简介关于Android扫描二维码的功能实现,网上有很多相关资料.在对比之后,选用了前辈了修改过的ZXing直接接入到项目中,特制作此demo,介绍整个过程. (最新更新)本篇文章讲解的接入方法对部分 ...
Android直播带货系统中如何实现二维码扫描功能
自李佳琦的出现将直播带货成功的引向了"巅峰",为了响应众平台和用户的需求,开发Android直播带货系统成为当下的开发热潮.那么在平时的直播软件中,登录.分享.支付等场景中经常出现 ...

H5+ 二维码扫描功能

H5+ 二维码扫描功能相关推荐

最新文章

热门文章