使用场景：扫码关注，扫描支付，扫描登录，各种扫描，一起都是信息，一切都可以是二维码；
调用方式：
1、图片识别：这个图片是一个二维码，然后识别这个图片；
2、摄像头扫描：扫描手机上的二维码进行支付等；
常用的常量：QR（二维码），EAN13：一维码；
QR: 条码类型常量，QR二维码，数值为0 EAN13: 条码类型常量，EAN一维条形码码标准版，数值为1 EAN8: 条码类型常量，ENA一维条形码简版，数值为2 AZTEC: 条码类型常量，Aztec二维码，数值为3 DATAMATRIX: 条码类型常量，Data Matrix二维码，数值为4 UPCA: 条码类型常量，UPC码标准版，数值为5 UPCE: 条码类型常量，UPC码缩短版，数值为6 CODABAR: 条码类型常量，Codabar码，数值为7 CODE39: 条码类型常量，Code39一维条形码，数值为8 CODE93: 条码类型常量，Code93码，数值为9 CODE128: 条码类型常量，Code128码，数值为10 ITF: 条码类型常量，ITF码，数值为11 MAXICODE: 条码类型常量，MaxiCode二维码，数值为12 PDF417: 条码类型常量，PDF 417码，数值为13 RSS14: 条码类型常量，RSS 14组合码，数值为14 RSSEXPANDED: 条码类型常量，扩展式RSS组合码，数值为15第一种：图片识别：
扫描图片的方法：scan：传图片的地址，和成功回调和失败回调；
plus.barcode.scan(path,successCB,errorCB,filters); //filters就是右边的这些：QR，EAN13.....这个是一个数组，通过这个数组就可以过滤掉一些（例如：我们只识别二维码不识别一维码，就传递一个QR进去： var filter = [plus.barcode.QR,plus.barcode.AZTEC]; plus.barcode.scan(path,successCB,errorCB,filter);）具体示例：
// 如何识别本地的二维码
$("#startCanOne").bind('tap',function(){
plus.gallery.pick(function(){
plus.barcode.scan(Path,function(type,code,file){
var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
$("#info").html(result);
},function(error){
plus.nativeUI.alert('无法识别图片');
});
},function(err){
plus.nativeUI.alert('Failed:'+err.message);
});
});
第二种：摄像头扫描 摄像头扫描用的就是：Barcode这个对象；
步骤
首先是初始化对象，new一个，然后start一下，然后进行识别，识别完成之后进行回调（回调就可以识别里面的信息）；
第一步：new一个对象；new的时候：
new plus.barcode.Barcode(id,filters,styles);ID：对象ID用户识别控件的初始化；就是一个div，一个识别二维码的一个框，就是指定一个容器；
filters:要识别的条形码类型过滤器，为条码类型常量数组；就是指定一个数组，能识别什么，不能识别什么；
styles：条码识别控件样式；
string frameColor：扫描框的颜色； string scanbarColor：扫描条颜色； string background：条码识别控件背景颜色；第二步：指定一个回调函数；
第三步：回调识别里面的信息；
$("#startCan").bind('tap',function(){
// 扫描二维码
var barScan = new plus.barcode.Barcode("scanContainer");
barScan.onmarked = function(type,code,file){
var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
$("#info").html(result);
};
//barScan.start(); 开始扫描
barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径
});
下面来一段我爱模板网项目实战的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5+ 扫描二维码barcode实例 - 我爱木板网 www.5imoban.net</title>
<link href="../css/mui.min.css" rel="stylesheet"/>
<style>
.mui-content section{margin: 15px; background: #fff; padding: 15px;}
.mui-content section span{display: block; padding-bottom: 10px; font-size: 16px;}
.mui-content section input[type=text]{background: url(../img/money-ico.png) no-repeat 0 30px; background-size: auto 21px; padding-left:30px; border: none; border-bottom:1px solid #e0e0e0; font-size: 45px; color:#42cca2; font-weight: bold; height: 84px; line-height:84px}
.button{width:100%; margin:20px auto; display: block; background: #42cca2; color: #fff; text-align: center; font-size: 16px; padding: 15px 0; border-radius: 5px;}
.button:hover,.button:active{background-color:#84dcc6; color: #fff;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">输入金额</h1>
</header>
<div class="mui-content">
<section>
<span>输入金额</span>
<input type="text" value="30">
<a class="button" id="scan">扫一扫支付 扫描二维码</a>
<a class="button" id="scan2">扫一扫支付 识别本地的二维码</a>
</section>
</div>
<div style="width:100%; height:100%; margin: auto; top:0; left: 0; position: fixed; display: none; z-index: 10;" id="scanContainer"></div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init({
swipeBack: true
});
mui.plusReady(function(){
mui("#scan")[0].addEventListener('tap',function(){
// 扫描二维码
document.getElementById("scanContainer").style.display = "block";
var barScan = new plus.barcode.Barcode("scanContainer");
//barScan.start(); 开始扫描
barScan.start({conserve:true,filename:"_doc/barcode/"});// 可以配置扫描后保存的路径
//条码扫描成功事件
barScan.onmarked = function(type,code,file){
var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
console.log(result);
//关闭
barScan.close();
document.getElementById("scanContainer").style.display = "none";
};
barScan.onerror = function(){
alert("扫描失败");
}
});
// 识别本地的二维码
mui("#scan2")[0].addEventListener('tap',function(){
plus.gallery.pick(function(path){
plus.barcode.scan(path,function(type,code,file){
var result = "type"+type+"<br/>code:"+code+"<br/>file:"+file;
console.log(result);
},function(error){
plus.nativeUI.alert('无法识别图片');
});
},function(err){
plus.nativeUI.alert('Failed:'+err.message);
});
});
//重写mui.js里面的back方法，安卓点击返回键退出扫描
var oldBack = mui.back;
mui.back = function(){
if(barScan){
//关闭barScan
barScan.close();
document.getElementById("scanContainer").style.display = "none";
barScan = null;
return false;
}else{
//如果没有扫描，则返回
oldBack();
}
}
});
</script>
</body>
</html>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！