宜信同城网交流论坛技术专版技术专区HTML5 + 规范 Barcode模块管理条码Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码࿰ ...

admin 发表于 2023-2-16 18:54:55

HTML5 + 规范 Barcode模块管理条码

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。
Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。
<h2 style="margin-left:.8em;">常量：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.QR">QR</a>: QR二维码，数值为0</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.EAN13">EAN13</a>: EAN条形码标准版，数值为1</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.EAN8">EAN8</a>: ENA条形码简版，数值为2</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.AZTEC">AZTEC</a>: Aztec二维码，数值为3</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.DATAMATRIX">DATAMATRIX</a>: Data Matrix二维码，数值为4</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.UPCA">UPCA</a>: UPC条形码标准版，数值为5</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.UPCE">UPCE</a>: UPC条形码缩短版，数值为6</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.CODABAR">CODABAR</a>: Codabar条形码，数值为7</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.CODE39">CODE39</a>: Code39条形码，数值为8</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.CODE93">CODE93</a>: Code93条形码，数值为9</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.CODE128">CODE128</a>: Code128条形码，数值为10</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.ITF">ITF</a>: ITF条形码，数值为11</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.PDF417">PDF417</a>: PDF 417二维条码，数值为13</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.scan">scan</a>: 扫码识别图片中的条码</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.create">create</a>: 创建扫码识别控件对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.getBarcodeById">getBarcodeById</a>: 查找扫码识别控件对象</li></ul>
<h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.Barcode">Barcode</a>: 扫码识别控件对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeStyles">BarcodeStyles</a>: Barcode扫码控件样式</li><li><ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeOptions">BarcodeOptions</a>: 条码识别控件扫描参数</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeSuccessCallback">BarcodeSuccessCallback</a>: 扫码识别成功回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeErrorCallback">BarcodeErrorCallback</a>: 扫码识别错误回调函数</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
permissions
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"Barcode": {
"description": "二维码"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">QR</h1>
QR二维码，数值为0
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.QR;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
1994年由日本Denso-Wave公司发明，QR来自英文Quick Response的缩写，即快速反应的意思，源自发明者希望QR码可让其内容快速被解码。目前使用最广泛的二维码。
<h1 style="margin-left:0;">EAN13</h1>
EAN条形码标准版，数值为1
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.EAN13;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
国际物品编码协会在全球推广应用的商品条码，是由13位数字组成。目前使用最广泛的一维条形码。
<h1 style="margin-left:0;">EAN8</h1>
ENA条形码简版，数值为2
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.EAN8;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
国际物品编码协会在全球推广应用的商品条码，是由8位数字组成。
<h1 style="margin-left:0;">AZTEC</h1>
Aztec二维码，数值为3
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.AZTEC;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
Andrew Longacre发明于1995年，该代码是用于国际出版。最小的Aztec码符号编码13个数字或12个英文字母。最大的Aztec码符号编码3832数字或3067英文字母或1914字节的数据。
<h1 style="margin-left:0;">DATAMATRIX</h1>
Data Matrix二维码，数值为4
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.DATAMATRIX;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
Data Matrix原名Data code，由美国国际资料公司(International Data Matrix, 简称IDMatrix)于1989年发明。可编码字元集包括全部的ASCII字元及扩充ASCII字元，容量可包含2235个英文数字资料、1556个8位元资料，3116个数字资料。由于Data Matrix二维条码只需要读取资料的20%即可精确辨读，因此很适合应用在条码容易受损的场所。
<h1 style="margin-left:0;">UPCA</h1>
UPC条形码标准版，数值为5
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.UPCA;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
UPC码是美国统一代码委员会制定的一种商品用条码，主要用于美国和加拿大地区，常在美国进口的商品上可以看到。UPC码标准版由12位数字构成，故其字码集为数字0~9。
<h1 style="margin-left:0;">UPCE</h1>
UPC条形码缩短版，数值为6
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.UPCE;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
UPC码是美国统一代码委员会制定的一种商品用条码，主要用于美国和加拿大地区，常在美国进口的商品上可以看到。UPC码缩短版由8位数字构成，故其字码集为数字0~9。
<h1 style="margin-left:0;">CODABAR</h1>
Codabar条形码，数值为7
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.CODABAR;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
Codabar码最初是为零售价格标签系统而研制开发的。1975年，National Retail Merchants Association（NRMA）选择了其它符号类型作为标准后，Codabar开始在多个方面用于非零售应用领域，如图书馆、货运和医药业。
<h1 style="margin-left:0;">CODE39</h1>
Code39条形码，数值为8
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.CODE39;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
Code 39码是Intermec公司于1975年推出的一维条码， 39码是一种可供使用者双向扫瞄的分散式条码，也就是说相临两资料码之间，39码必须包含一个不具任何意义的空白(或细白，其逻辑值为0)，且 39码具有支援文数字的能力，编码规则简单、误码率低、所能表示字符个数多等特点，39码在各个领域有着极为广泛的应用。
<h1 style="margin-left:0;">CODE93</h1>
Code93条形码，数值为9
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.CODE93;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
Code 93码的条码符号是由Intermec公司于1982年设计的提供更高的密度和数据安全增强code39 。它是一个字母，长度可变符号。代码93主要用于由加拿大邮政编码补充提供的资料。
<h1 style="margin-left:0;">CODE128</h1>
Code128条形码，数值为10
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.CODE128;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
CODE128码是1981年引入的一种高密度条码，CODE128 码可表示从 ASCII 0 到ASCII 127 共128个字符，故称128码。CODE128码是广泛应用在企业内部管理、生产流程、物流控制系统方面的条码码制，由于其优良的特性在管理信息系统的设计中被广泛使用。
<h1 style="margin-left:0;">ITF</h1>
ITF条形码，数值为11
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.ITF;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
ITF条码，又称交叉二五条码，由14位数字字符代表组成。主要用于运输包装，是印刷条件较差，不允许印刷EAN-13和UPC-A条码时应选用的一种条码。
<h1 style="margin-left:0;">PDF417</h1>
PDF 417二维条码，数值为13
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.barcode.PDF417;
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Number 类型
PDF417条码是由美国SYMBOL公司发明的，PDF（Portable Data File）意思是“便携数据文件”。组成条码的每一个条码字符由4个条和4个空共17个模块构成，故称为PDF417条码。PDF417条码最大的优势在于其庞大的数据容量和极强的纠错能力。
<h1 style="margin-left:0;">scan</h1>
扫码识别图片中的条码
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.barcode.scan(path, successCB, errorCB, filters, autoDecodeCharset);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
输入图片文件进行扫码识别，成功扫描到条码（一维码或二维码）后通过successCallback回调返回，失败则通过errorCallback回调返回。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>path: ( String ) 必选 要扫码的图片路径 必须是本地文件路径，如URLType类型（如以"_www"、"_doc"、"_documents"、"_downloads"开头的相对URL路径）或者系统绝对路径。 </li><li>successCB: ( <ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeSuccessCallback">BarcodeSuccessCallback</a> ) 必选 扫码识别成功回调函数 成功识别到条码（一维码或二维码）时触发，回调函数中返回码类型及码数据。 </li><li>errorCB: ( <ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeErrorCallback">BarcodeErrorCallback</a> ) 可选 扫码识别失败回调函数 扫码识别中发生错误时触发，回调函数中返回错误码及错误描述信息。 </li><li>filters: ( Array ) 可选 条码类型过滤器 条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。 </li><li>autoDecodeCharset: ( Boolean ) 必选 自动解码字符集 可取值：
<ul style="margin-left:2em;"><li>false - 将二维码解码数据当做utf-8字符集处理，对于非utf-8字符集数据可能会出现乱码</li><li>true - 自动检测二维码解码数据，兼容处理utf-8、GBK、Big5编码格式的字符</li></ul> 默认值为false。 注意：HBuilderX2.9.5+版本Android平台支持，iOS平台暂不支持。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从图片中扫码识别 
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function(type,result) {
console.log("Scan success:("+type+")"+result);
}, function(e){
console.log("Scan failed: "+JSON.stringify(e));
} );
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">create</h1>
创建扫码识别控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Barcode plus.barcode.create(id, filters, styles, autoDecodeCharset);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法创建扫码识别控件并不会显示在页面中，需要调用plus.webview.Webview窗口对象的append方法将其添加到Webview窗口中才能显示。注意：需要设置styles参数的top/left/width/height属性指定扫码识别控件的位置及大小，否则可能无法正确显示。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 扫码识别控件的标识 可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象。 </li><li>filters: ( Array ) 可选 条码类型过滤器 条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。 </li><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeStyles">BarcodeStyles</a> ) 可选 扫码识别控件样式 用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。 </li><li>autoDecodeCharset: ( Boolean ) 必选 自动解码字符集 可取值：
<ul style="margin-left:2em;"><li>false - 将二维码解码数据当做utf-8字符集处理，对于非utf-8字符集数据可能会出现乱码</li><li>true - 自动检测二维码解码数据，兼容处理utf-8、GBK、Big5编码格式的字符</li></ul> 默认值为false。 注意：HBuilderX2.9.5+版本Android平台支持，iOS平台暂不支持。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.Barcode">Barcode</a> : 扫码识别控件对象
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var barcode = null;
// 扫码成功回调
function onmarked(type, result) {
var text = '未知: ';
switch(type){
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert( text+result );
}
// 创建Barcode扫码控件
function createBarcode() {
if(!barcode){
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top:'100px',
left:'0px',
width: '100%',
height: '500px',
position: 'static'
});
barcode.onmarked = onmarked;
plus.webview.currentWebview().append(barcode);
}
barcode.start();
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getBarcodeById</h1>
查找扫码识别控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Barcode plus.barcode.getBarcodeById(id);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
根据指定的id（标识）查找扫码控件对象，可跨页面进行查找。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 扫码识别控件的标识 调用plus.barcode.create创建扫码识别控件传入的标识（字符串类型）。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode">Barcode</a> : 如果存在多个相同标识的扫码识别控件对象，则返回第一个查找到的扫码识别控件对象。如果不存在指定标识的扫码识别控件对象，则返回null。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var barcode = null;
// 创建扫码控件
function createBarcode() {
if(!barcode){
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top:'100px',
left:'0px',
width: '100%',
height: '500px',
position: 'static'
});
barcode.onmarked = function(type, result){
console.log('Success: type='+type+', result='+result);
};
plus.webview.currentWebview().append(barcode);
}
barcode.start();
}
// 查找扫码控件
function findBarcode() {
var b = plus.barcode.getBarcodeById('barcode');
if(b){
console.log('find success!');
} else {
console.log('find failed!');
}
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">Barcode</h1>
扫码识别控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface plus.barcode.Barcode {
// Methods
function void cancel();
function void close();
function void setFlash(open);
function void setStyle(styles);
function void start(options);

// Events
function void onerror();
function void onmarked();
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
可通过plus.barcode.create创建，也可通过new plus.barcode.Barcode构造（仅在5+APP中使用）创建。扫码识别控件将使用设备的摄像头预览扫描内容，在控件中显示扫描基准框等用户交互元素。
<h2 style="margin-left:.8em;">构造：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.Barcode.constructor%28domId,%20filters,%20styles,%20autoDecodeCharset%29">Barcode.constructor(domId, filters, styles, autoDecodeCharset)</a>: 构造扫码识别控件</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.cancel">cancel</a>: 取消扫码识别</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.close">close</a>: 关闭条码识别控件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.setFlash">setFlash</a>: 操作闪光灯</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.setStyle">setStyle</a>: 设置扫码识别控件的样式</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.start">start</a>: 开始扫码识别</li></ul>
<h2 style="margin-left:.8em;">事件：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.onmarked">onmarked</a>: 扫码识别成功事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.Barcode.onerror">onerror</a>: 扫码识别错误事件</li></ul>
<h1 style="margin-left:0;">Barcode.constructor(domId, filters, styles, autoDecodeCharset)</h1>
构造扫码识别控件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var bc = new plus.barcode.Barcode(domId, filters, styles, autoDecodeCharset);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
创建扫码识别控件，并绑定当前Webview窗口指定id的DOM标签（如div或object等），覆盖在DOM元素上方并显示。此时styles参数中的left/top/width/height属性值将被忽略，通过DOM标签来确定扫码识别控件的位置及大小。注意：uni-app项目不能通过此方法创建扫码识别控件，应该使用plus.barcode.create方法创建。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>domId: ( String ) 必选 关联DOM标签的标识 系统将查找到此id的DOM标签节点，设置扫码识别控件的位置和大小与其保持一致。 </li><li>filters: ( Array ) 可选 条码类型过滤器 条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。 </li><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.BarcodeStyles">BarcodeStyles</a> ) 可选 条码识别控件样式 用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。 </li><li>autoDecodeCharset: ( Boolean ) 必选 自动解码字符集 可取值：
<ul style="margin-left:2em;"><li>false - 将二维码解码数据当做utf-8字符集处理，对于非utf-8字符集数据可能会出现乱码</li><li>true - 自动检测二维码解码数据，兼容处理utf-8、GBK、Big5编码格式的字符</li></ul> 默认值为false。 注意：HBuilderX2.9.5+版本Android平台支持，iOS平台暂不支持。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/barcode.html#plus.barcode.Barcode">Barcode</a> : 扫码识别控件对象
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
var text = '未知: ';
switch(type){
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert( text+result );
}
function startRecognize(){
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
}
function startScan(){
scan.start();
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
#bcid {
background:#0F0;
height:480px;
width:360px;
}
</style>
</head>
<body >
<input type='button' onclick='startRecognize()' value='创建扫码控件' />
<input type='button' onclick='startScan()' value='开始扫码' />
<div id= "bcid"></div>
<input type='text' id='text'/>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">cancel</h1>
取消扫码识别
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.cancel();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
结束对摄像头获取图片数据进行条码识别操作，同时关闭摄像头的视频捕获。结束后可调用start方法重新开始识别。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">close</h1>
关闭条码识别控件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.close();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
释放控件占用系统资源，调用close方法后控件对象将不可使用。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setFlash</h1>
操作闪光灯
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void obj.setFlash( open );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
设置扫码识别控件在扫码时是否开启摄像头的闪光灯，默认值为不开启闪光灯。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>open: ( Boolean ) 必选 是否开启闪光灯 可取值true或false，true表示打开闪光灯，false表示关闭闪光灯。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setStyle</h1>
设置扫码识别控件的样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.setStyle(styles);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于动态更新扫码识别控件的显示样式参数。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>styles: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.BarcodeStyles">BarcodeStyles</a> ) 必选 要更新的样式参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var barcode = null;
// 创建Barcode扫码控件
function createBarcode() {
if(!barcode){
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top:'100px',
left:'0px',
width: '100%',
height: '500px',
position: 'static'
});
plus.webview.currentWebview().append(barcode);
}
barcode.start();
}
// 更新Barcode扫码控件
function updateBarcode() {
barcode.setStyle({
top:'200px' // 调整扫码控件的位置
});
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">start</h1>
开始扫码识别
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.start(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
调用设备的摄像头在控件中预览，并获取捕获数据进行扫码识别，当识别出条码（二维码）数据时触发onmarked事件返回扫码结果。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>optons: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.BarcodeOptions">BarcodeOptions</a> ) 可选 扫码识别的参数 通过此参数可设置是否获取扫码成功的条码截图等。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">onmarked</h1>
扫码识别成功事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.onmarked = function(type, code, file){
// loaded code 
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.BarcodeSuccessCallback">BarcodeSuccessCallback</a> 类型
扫码识别控件成功识别到条码（二维码）数据时触发的事件，并返回扫码结果。
<h1 style="margin-left:0;">onerror</h1>
扫码识别错误事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void bc.onerror = function(error){
// loaded code 
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122640984#plus.barcode.BarcodeErrorCallback">BarcodeErrorCallback</a> 类型
扫码识别控件在扫码过程中发生错误时触发的事件，并返回错误信息。
<h1 style="margin-left:0;">BarcodeStyles</h1>
Barcode扫码控件样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface plus.barcode.BarcodeStyles {
attribute String background;
attribute String frameColor;
attribute String scanbarColor;

attribute String top;
attribute String left;
attribute String width;
attribute String height;
attribute String position;
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
设置Barcode扫码控件的样式，如扫码框、扫码条的颜色等。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>background: (String 类型 )条码识别控件背景颜色 颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值，默认值为红色。 </li><li>frameColor: (String 类型 )扫码框颜色 颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值，默认值为红色。 </li><li>scanbarColor: (String 类型 )扫码条颜色 颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值，默认值为红色。 </li><li>top: (String 类型 )Barcode扫码控件左上角的垂直偏移量 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的高度； 自动计算，如"auto",根据height值自动计算，相对于父Webview窗口垂直居中。 </li><li>left: (String 类型 )Barcode扫码控件左上角的水平偏移量 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的宽度； 自动计算，如"auto"，根据width值自动计算，相对于父Webview窗口水平居中。默认值为"0px"。 </li><li>width: (String 类型 )Barcode扫码控件的宽度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的宽度。默认值为"100%"。 </li><li>height: (String 类型 )Barcode扫码控件的高度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的高度。默认值为"100%"。 </li><li>position: (String 类型 )Barcode扫码控件在Webview窗口的布局模式 可取值： "static" - 静态布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 绝对布局模式，如果页面存在滚动条不随窗口内容滚动； 默认值为"static"。 </li></ul>
<h1 style="margin-left:0;">BarcodeOptions</h1>
条码识别控件扫描参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface plus.barcode.BarcodeOptions {
attribute Boolean conserve;
attribute String filename;
attribute Boolean vibrate;
attribute String sound;
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
设置Barcode扫码控件的扫码识别参数，如是否保存扫码功时的截图等。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>conserve: (Boolean 类型 )是否保存扫码成功时的截图 如果设置为true则在扫码成功时将图片保存，并通过onmarked回调函数的file参数返回保存文件的路径。默认值为false，不保存截图。 </li><li>filename: (String 类型 )保存扫码成功时图片保存路径 可通过此参数设置保存截图的路径和名称，如果设置图片文件名称则必须指定文件的后缀名（必须是.png），否则认为是指定目录，文件名称则自动生成。 </li><li>vibrate: (Boolean 类型 )扫码成功时是否需要震动提醒 如果设置为true则在扫码成功时震动设备，false则不震动。默认值为true。 </li><li>sound: (String 类型 )扫码成功时播放的提示音 可取值： "none" - 不播放提示音； "default" - 播放默认提示音（5+引擎内置）。默认值为"default"。 </li></ul>
<h1 style="margin-left:0;">BarcodeSuccessCallback</h1>
扫码识别成功回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void BarcodeSuccessCallback(type, code, file, charset){
// Barcode success code
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
当Barcode控件扫码成功时的回调函数，返回识别成功的扫码数据。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>type: ( Number ) 必选 识别到的条码类型 Number类型的值，与Barcode对象定义的条码类型常量一致。 </li><li>code: ( String ) 必选 识别到的条码数据 扫码识别出的数据内容，字符串类型，采用UTF8编码格式。 </li><li>file: ( String ) 可选 扫码成功的截图文件路径 扫码识别到的截图，png格式文件，如果设置为不保存截图，则返回undefined。 </li><li>charset: ( String ) 可选 识别到原始数据的字符集类型 仅在设置autoDecodeCharset为true时会自动识别字符集，否则当做utf-8字符集处理。可取值：
<ul style="margin-left:2em;"><li>UTF-8 - 原始数据识别为urf-8字符集</li><li>GB2312 - 原始数据识别为gbk字符集</li><li>BIG5 - 原始数据识别为big5字符集</li></ul> 注意：HBuilderX2.9.5+版本Android平台支持。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">BarcodeErrorCallback</h1>
扫码识别错误回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void BarcodeErrorCallback(error){
// Error 
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>error: ( Exception ) 必选 扫码识别的错误信息 可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

HTML5 + 规范 Barcode模块管理条码