barcode

Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。

Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。

常量：

  • 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: 扫码识别图片中的条码
  • create: 创建扫码识别控件对象
  • getBarcodeById: 查找扫码识别控件对象

对象：

回调方法：

权限：

permissions

  2. {
  3. // ...
  4. "permissions":{
  5.     // ...
  6.     "Barcode": {
  7.         "description": "二维码"
  8.     }
  9. }
  10. }
  11.

QR

QR二维码，数值为0

  2. plus.barcode.QR;
  3.

说明：

Number类型

1994年由日本Denso-Wave公司发明，QR来自英文Quick Response的缩写，即快速反应的意思，源自发明者希望QR码可让其内容快速被解码。目前使用最广泛的二维码。

EAN13

EAN条形码标准版，数值为1

  2. plus.barcode.EAN13;
  3.

说明：

Number类型

国际物品编码协会在全球推广应用的商品条码，是由13位数字组成。目前使用最广泛的一维条形码。

EAN8

ENA条形码简版，数值为2

  2. plus.barcode.EAN8;
  3.

说明：

Number类型

国际物品编码协会在全球推广应用的商品条码，是由8位数字组成。

AZTEC

Aztec二维码，数值为3

  2. plus.barcode.AZTEC;
  3.

说明：

Number类型

Andrew Longacre发明于1995年，该代码是用于国际出版。最小的Aztec码符号编码13个数字或12个英文字母。最大的Aztec码符号编码3832数字或3067英文字母或1914字节的数据。

DATAMATRIX

Data Matrix二维码，数值为4

  2. plus.barcode.DATAMATRIX;
  3.

说明：

Number类型

Data Matrix原名Data code，由美国国际资料公司(International Data Matrix, 简称IDMatrix)于1989年发明。可编码字元集包括全部的ASCII字元及扩充ASCII字元，容量可包含2235个英文数字资料、1556个8位元资料，3116个数字资料。由于Data Matrix二维条码只需要读取资料的20%即可精确辨读，因此很适合应用在条码容易受损的场所。

UPCA

UPC条形码标准版，数值为5

  2. plus.barcode.UPCA;
  3.

说明：

Number类型

UPC码是美国统一代码委员会制定的一种商品用条码，主要用于美国和加拿大地区，常在美国进口的商品上可以看到。UPC码标准版由12位数字构成，故其字码集为数字0~9。

UPCE

UPC条形码缩短版，数值为6

  2. plus.barcode.UPCE;
  3.

说明：

Number类型

UPC码是美国统一代码委员会制定的一种商品用条码，主要用于美国和加拿大地区，常在美国进口的商品上可以看到。UPC码缩短版由8位数字构成，故其字码集为数字0~9。

CODABAR

Codabar条形码，数值为7

  2. plus.barcode.CODABAR;
  3.

说明：

Number类型

Codabar码最初是为零售价格标签系统而研制开发的。1975年，National Retail Merchants Association（NRMA）选择了其它符号类型作为标准后，Codabar开始在多个方面用于非零售应用领域，如图书馆、货运和医药业。

CODE39

Code39条形码，数值为8

  2. plus.barcode.CODE39;
  3.

说明：

Number类型

Code 39码是Intermec公司于1975年推出的一维条码， 39码是一种可供使用者双向扫瞄的分散式条码，也就是说相临两资料码之间，39码必须包含一个不具任何意义的空白(或细白，其逻辑值为0)，且 39码具有支援文数字的能力，编码规则简单、误码率低、所能表示字符个数多等特点，39码在各个领域有着极为广泛的应用。

CODE93

Code93条形码，数值为9

  2. plus.barcode.CODE93;
  3.

说明：

Number类型

Code 93码的条码符号是由Intermec公司于1982年设计的 提供更高的密度和数据安全增强code39 。它是一个字母，长度可变符号。代码93主要用于由加拿大邮政编码补充提供的资料。

CODE128

Code128条形码，数值为10

  2. plus.barcode.CODE128;
  3.

说明：

Number类型

CODE128码是1981年引入的一种高密度条码，CODE128 码可表示从 ASCII 0 到ASCII 127 共128个字符，故称128码。CODE128码是广泛应用在企业内部管理、生产流程、物流控制系统方面的条码码制，由于其优良的特性在管理信息系统的设计中被广泛使用。

ITF

ITF条形码，数值为11

  2. plus.barcode.ITF;
  3.

说明：

Number类型

ITF条码，又称交叉二五条码，由14位数字字符代表组成。主要用于运输包装，是印刷条件较差，不允许印刷EAN-13和UPC-A条码时应选用的一种条码。

MAXICODE

MaxiCode二维码，数值为12

  2. plus.barcode.MAXICODE;
  3.

说明：

Number类型

1996年时，美国自动辨识协会（AIMUSA）制定统一的符号规格，称为Maxicode二维条码，也有人称USS-Maxicode二维条码（Uniform Symbology Specification-Maxicode）。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (不支持): 暂不支持MaxiCode码的识别

PDF417

PDF 417二维条码，数值为13

  2. plus.barcode.PDF417;
  3.

说明：

Number类型

PDF417条码是由美国SYMBOL公司发明的，PDF（Portable Data File）意思是“便携数据文件”。组成条码的每一个条码字符由4个条和4个空共17个模块构成，故称为PDF417条码。PDF417条码最大的优势在于其庞大的数据容量和极强的纠错能力。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (不支持): 暂不支持PDF 417码的识别

RSS14

RSS 14条形组合码，数值为14

  2. plus.barcode.RSS14;
  3.

说明：

Number类型

RSS条码是有国际物品编码协会EAN和美国统一代码委员会UCC开发的RSS（Reduced Space Symbology）条码符号。它是一种一维码和二维码的组合码。和其它线性条码相比，RSS系列码制具有更高的密度，因为它可以表示更多的字符。

RSSEXPANDED

扩展式RSS条形组合码，数值为15

  2. plus.barcode.RSSEXPANDED;
  3.

说明：

Number类型

RSS条码是有国际物品编码协会EAN和美国统一代码委员会UCC开发的RSS（Reduced Space Symbology）条码符号。它是一种一维码和二维码的组合码。和其它线性条码相比，RSS系列码制具有更高的密度，因为它可以表示更多的字符。扩展式RSS码是长度可以变化的线性码制，能够对74个数字字符或41个字母字符的AI单元数据传数据进行编码。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (不支持): 暂不支持扩展式RSS码的识别

scan

扫码识别图片中的条码

  2. void plus.barcode.scan(path, successCB, errorCB, filters);
  3.

说明：

输入图片文件进行扫码识别，成功扫描到条码（一维码或二维码）后通过successCallback回调返回，失败则通过errorCallback回调返回。

参数：

  • path: (String)必选 要扫码的图片路径必须是本地文件路径，如URLType类型（如以"_www"、"_doc"、"_documents"、"_downloads"开头的相对URL路径）或者系统绝对路径。
  • successCB: (BarcodeSuccessCallback)必选 扫码识别成功回调函数成功识别到条码（一维码或二维码）时触发，回调函数中返回码类型及码数据。
  • errorCB: (BarcodeErrorCallback)可选 扫码识别失败回调函数扫码识别中发生错误时触发，回调函数中返回错误码及错误描述信息。
  • filters: (Array)可选 条码类型过滤器条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。

返回值：

void: 无

示例：

  2. // 从图片中扫码识别 
  3. function scanImg() {
  4.     plus.barcode.scan( '_www/barcode.png', function(type,result) {
  5.             console.log("Scan success:("+type+")"+result);
  6.         }, function(e){
  7.             console.log("Scan failed: "+JSON.stringify(e));
  8.         } );
  9. }
  10.

uni-app使用plus注意事项

create

创建扫码识别控件对象

  2. Barcode plus.barcode.create(id, filters, styles);
  3.

说明：

此方法创建扫码识别控件并不会显示在页面中，需要调用plus.webview.Webview窗口对象的append方法将其添加到Webview窗口中才能显示。注意：需要设置styles参数的top/left/width/height属性指定扫码识别控件的位置及大小，否则可能无法正确显示。

参数：

  • id: (String)必选 扫码识别控件的标识可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象。
  • filters: (Array[Number])可选 条码类型过滤器条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。
  • styles: (BarcodeStyles)可选 扫码识别控件样式用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。

返回值：

Barcode: 扫码识别控件对象

示例：

  2. var barcode = null;
  3. // 扫码成功回调
  4. function onmarked(type, result) {
  5.     var text = '未知: ';
  6.     switch(type){
  7.         case plus.barcode.QR:
  8.         text = 'QR: ';
  9.         break;
  10.         case plus.barcode.EAN13:
  11.         text = 'EAN13: ';
  12.         break;
  13.         case plus.barcode.EAN8:
  14.         text = 'EAN8: ';
  15.         break;
  16.     }
  17.     alert( text+result );
  18. }
  19. // 创建Barcode扫码控件
  20. function createBarcode() {
  21.     if(!barcode){
  22.         barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
  23.             top:'100px',
  24.             left:'0px',
  25.             width: '100%',
  26.             height: '500px',
  27.             position: 'static'
  28.         });
  29.         barcode.onmarked = onmarked;
  30.         plus.webview.currentWebview().append(barcode);
  31.     }
  32.     barcode.start();
  33. }
  34.

uni-app使用plus注意事项

getBarcodeById

查找扫码识别控件对象

  2. Barcode plus.barcode.getBarcodeById(id);
  3.

说明：

根据指定的id（标识）查找扫码控件对象，可跨页面进行查找。

参数：

  • id: (String)必选 扫码识别控件的标识调用plus.barcode.create创建扫码识别控件传入的标识（字符串类型）。

返回值：

Barcode: 如果存在多个相同标识的扫码识别控件对象，则返回第一个查找到的扫码识别控件对象。如果不存在指定标识的扫码识别控件对象，则返回null。

示例：

  2. var barcode = null;
  3. // 创建扫码控件
  4. function createBarcode() {
  5.     if(!barcode){
  6.         barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
  7.             top:'100px',
  8.             left:'0px',
  9.             width: '100%',
  10.             height: '500px',
  11.             position: 'static'
  12.         });
  13.         barcode.onmarked = function(type, result){
  14.             console.log('Success: type='+type+', result='+result);
  15.         };
  16.         plus.webview.currentWebview().append(barcode);
  17.     }
  18.     barcode.start();
  19. }
  20. // 查找扫码控件
  21. function findBarcode() {
  22.     var b = plus.barcode.getBarcodeById('barcode');
  23.     if(b){
  24.         console.log('find success!');
  25.     } else {
  26.         console.log('find failed!');
  27.     }
  28. }
  29.

uni-app使用plus注意事项

Barcode

扫码识别控件对象

  2. interface plus.barcode.Barcode {
  3.     // Methods
  4.     function void cancel();
  5.     function void close();
  6.     function void setFlash(open);
  7.     function void setStyle(styles);
  8.     function void start(options);
  10.     // Events
  11.     function void onerror();
  12.     function void onmarked();
  13. }
  14.

说明：

可通过plus.barcode.create创建，也可通过new plus.barcode.Barcode构造（仅在5+APP中使用）创建。扫码识别控件将使用设备的摄像头预览扫描内容，在控件中显示扫描基准框等用户交互元素。

构造：

方法：

事件：

Barcode.constructor(domId, filters, styles)

构造扫码识别控件

  2. var bc = new plus.barcode.Barcode(id, filters, styles);
  3.

说明：

创建扫码识别控件，并绑定当前Webview窗口指定id的DOM标签（如div或object等），覆盖在DOM元素上方并显示。此时styles参数中的left/top/width/height属性值将被忽略，通过DOM标签来确定扫码识别控件的位置及大小。注意：uni-app项目不能通过此方法创建扫码识别控件，应该使用plus.barcode.create方法创建。

参数：

  • domId: (String)必选 关联DOM标签的标识系统将查找到此id的DOM标签节点，设置扫码识别控件的位置和大小与其保持一致。
  • filters: (Array[Number])可选 条码类型过滤器条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）。
  • styles: (BarcodeStyles)可选 条码识别控件样式用于设置扫码控件在页面中显示的样式，如扫码框、扫码条的颜色等。

返回值：

Barcode: 扫码识别控件对象

示例：

  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.     <meta charset="utf-8">
  6.     <title>Barcode Example</title>
  7.     <script type="text/javascript" >
  8. // 扩展API加载完毕后调用onPlusReady回调函数 
  9. document.addEventListener( "plusready", onPlusReady, false );
  10. // 扩展API加载完毕，现在可以正常调用扩展API
  11. function onPlusReady() {
  12.     var e = document.getElementById("scan");
  13.     e.removeAttribute( "disabled" );
  14. }
  15. var scan = null;
  16. function onmarked( type, result ) {
  17.     var text = '未知: ';
  18.     switch(type){
  19.         case plus.barcode.QR:
  20.         text = 'QR: ';
  21.         break;
  22.         case plus.barcode.EAN13:
  23.         text = 'EAN13: ';
  24.         break;
  25.         case plus.barcode.EAN8:
  26.         text = 'EAN8: ';
  27.         break;
  28.     }
  29.     alert( text+result );
  30. }
  31. function startRecognize(){
  32.     scan = new plus.barcode.Barcode('bcid');
  33.     scan.onmarked = onmarked; 
  34. }
  35. function startScan(){
  36.     scan.start();
  37. }
  38.     </script>
  39.     <style type="text/css">
  40. *{
  41.     -webkit-user-select: none;
  42. }
  43. html,body{
  44.     margin: 0px;
  45.     padding: 0px;
  46.     height: 100%;
  47. }
  48. #bcid {
  49.     background:#0F0;
  50.     height:480px;
  51.     width:360px;
  52. }
  53.     </style>
  54.     </head>
  55.     <body >
  56.         <input type='button' onclick='startRecognize()' value='创建扫码控件' />
  57.         <input type='button' onclick='startScan()' value='开始扫码' />
  58.         <div id= "bcid"></div>
  59.         <input type='text' id='text'/>
  60.     </body>
  61. </html>
  62.

uni-app使用plus注意事项

cancel

取消扫码识别


void bc.cancel();

说明：

结束对摄像头获取图片数据进行条码识别操作，同时关闭摄像头的视频捕获。结束后可调用start方法重新开始识别。

参数：

无

返回值：

void: 无

close

关闭条码识别控件


void bc.close();

说明：

释放控件占用系统资源，调用close方法后控件对象将不可使用。

参数：

无

返回值：

void: 无

setFlash

操作闪光灯


void obj.setFlash( open );

说明：

设置扫码识别控件在扫码时是否开启摄像头的闪光灯，默认值为不开启闪光灯。

参数：

  • open: (Boolean)必选 是否开启闪光灯可取值true或false，true表示打开闪光灯，false表示关闭闪光灯。

返回值：

void: 无

setStyle

设置扫码识别控件的样式


void bc.setStyle(styles);

说明：

用于动态更新扫码识别控件的显示样式参数。

参数：

返回值：

void: 无

示例：


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'        // 调整扫码控件的位置
    });
}

uni-app使用plus注意事项

start

开始扫码识别


void bc.start(options);

说明：

调用设备的摄像头在控件中预览，并获取捕获数据进行扫码识别，当识别出条码（二维码）数据时触发onmarked事件返回扫码结果。

参数：

  • optons: (BarcodeOptions)可选 扫码识别的参数通过此参数可设置是否获取扫码成功的条码截图等。

返回值：

void: 无

onmarked

扫码识别成功事件


void bc.onmarked = function(type, code, file){
    // loaded code 
}

说明：

BarcodeSuccessCallback类型

扫码识别控件成功识别到条码（二维码）数据时触发的事件，并返回扫码结果。

onerror

扫码识别错误事件


void bc.onerror = function(error){
    // loaded code 
}

说明：

BarcodeErrorCallback类型

扫码识别控件在扫码过程中发生错误时触发的事件，并返回错误信息。

BarcodeStyles

Barcode扫码控件样式


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;
}

说明：

设置Barcode扫码控件的样式，如扫码框、扫码条的颜色等。

属性：

  • background: (String类型)条码识别控件背景颜色颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值，默认值为红色。

  • frameColor: (String类型)扫码框颜色颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值，默认值为红色。

  • scanbarColor: (String类型)扫码条颜色颜色值支持(参考CSS颜色规范)：颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值，默认值为红色。

  • top: _(String类型)_Barcode扫码控件左上角的垂直偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度；自动计算，如"auto",根据height值自动计算，相对于父Webview窗口垂直居中。

  • left: _(String类型)_Barcode扫码控件左上角的水平偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度；自动计算，如"auto"，根据width值自动计算，相对于父Webview窗口水平居中。默认值为"0px"。

  • width: _(String类型)_Barcode扫码控件的宽度可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度。默认值为"100%"。

  • height: _(String类型)_Barcode扫码控件的高度可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度。默认值为"100%"。

  • position: _(String类型)_Barcode扫码控件在Webview窗口的布局模式可取值："static" - 静态布局模式，如果页面存在滚动条则随窗口内容滚动；"absolute" - 绝对布局模式，如果页面存在滚动条不随窗口内容滚动；默认值为"static"。

BarcodeOptions

条码识别控件扫描参数


interface plus.barcode.BarcodeOptions {
    attribute Boolean conserve;
    attribute String filename;
    attribute Boolean vibrate;
    attribute String sound;
}

说明：

设置Barcode扫码控件的扫码识别参数，如是否保存扫码功时的截图等。

属性：

  • conserve: (Boolean类型)是否保存扫码成功时的截图如果设置为true则在扫码成功时将图片保存，并通过onmarked回调函数的file参数返回保存文件的路径。默认值为false，不保存截图。

  • filename: (String类型)保存扫码成功时图片保存路径可通过此参数设置保存截图的路径和名称，如果设置图片文件名称则必须指定文件的后缀名（必须是.png），否则认为是指定目录，文件名称则自动生成。

  • vibrate: (Boolean类型)扫码成功时是否需要震动提醒如果设置为true则在扫码成功时震动设备，false则不震动。默认值为true。

  • sound: (String类型)扫码成功时播放的提示音可取值："none" - 不播放提示音；"default" - 播放默认提示音（5+引擎内置）。默认值为"default"。

BarcodeSuccessCallback

扫码识别成功回调函数


void BarcodeSuccessCallback(type, code, file){
    // Barcode success code
}

说明：

当Barcode控件扫码成功时的回调函数，返回识别成功的扫码数据。

参数：

  • type: (Number)必选 识别到的条码类型Number类型的值，与Barcode对象定义的条码类型常量一致。
  • code: (String)必选 识别到的条码数据扫码识别出的数据内容，字符串类型，采用UTF8编码格式。
  • file: (String)可选 扫码成功的截图文件路径扫码识别到的截图，png格式文件，如果设置为不保存截图，则返回undefined。

返回值：

void: 无

BarcodeErrorCallback

扫码识别错误回调函数


void BarcodeErrorCallback(error){
    // Error 
    var code = error.code;             // 错误编码
    var message = error.message;    // 错误描述信息
}

参数：

  • error: (DOMException)必选 扫码识别的错误信息可通过error.code（Number类型）获取错误编码；可通过error.message（String类型）获取错误描述信息。

返回值：

void: 无