开启扫一扫示例教程

需求明确

开启常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

知识点明确

Barcode模块:plus.barcode,提供开启摄像头扫描功能。
Gallery模块:plus.gallery，提供读取相册二维码图片功能。

效果展示

实现步骤

创建条码扫描识别控件实例对象,涉及到Barcode模块,具体参数设置可参考5+ API Barcode
在plusReady事件触发之后创建一个Barcode实例对象，此对象提供四个方法：
start: 开始条码识别
cancel: 结束条码识别
close: 关闭条码识别控件
setFlash: 是否开启闪光灯
和两个事件：
onmarked: 条码识别成功事件
onerror: 条码识别错误事件

function plusReady() {  
    if(ws || !window.plus || !domready) {  
        return;  
    }  
    // 获取窗口对象  
    ws = plus.webview.currentWebview();  
    // 开始扫描  
    ws.addEventListener('show', function() {  
        scan = new plus.barcode.Barcode('bcid');  
        // 定义识别成功事件  
        scan.onmarked = onmarked;  
        // 定义开始条码识别  
        scan.start({  
            conserve: true, // 是否保存成功扫描到的条码数据时的截图  
            filename: '_doc/barcode/'  // 保存成功扫描到的条码数据时的图片路径  
        });  
    }, false);  
    // 显示页面并关闭等待框  
    ws.show('pop-in');  
}  

// 二维码扫描成功  
function onmarked(type, result, file) {  
    switch(type) {  
        case plus.barcode.QR:  
            type = 'QR';  
            break;  
        case plus.barcode.EAN13:  
            type = 'EAN13';  
            break;  
        case plus.barcode.EAN8:  
            type = 'EAN8';  
            break;  
        default:  
            type = '其它' + type;  
            break;  
    }  
    result = result.replace(/\n/g, '');  
    plus.nativeUI.alert('扫描结果:' + JSON.stringify(result), function() {  
        console.log('扫描成功')  
    }, "helloW2A", "OK");  
    back();  
}

2.从相册中选择图片识别,涉及到Gallery模块，具体参数设置可参考5+ API：Gallery

// 从相册中选择二维码图片   
function scanPicture() {  
    plus.gallery.pick(function(path) {  
        plus.barcode.scan(path, onmarked, function(error) {  
            plus.nativeUI.alert('无法识别此图片');  
        });  
    }, function(err) {  
        console.log('Failed: ' + err.message);  
    });  
}

3.DOM结构参考

<body style="background-color: #000000;">  
    <!--指定Barcode对象的在界面中关联div标签的id号。-->  
    <div id="bcid">  
        <div style="height:40%"></div>  
        <p class="tip">...载入中...</p>  
    </div>  
    <footer>  
        <div class="fbt" onclick="back()">取　 消</div> <!--退出页面-->  
        <div class="fbt" onclick="scanPicture()">从相册选择二维码</div>  
    </footer>  
</body>

示例工程已上传，供开发者参考