HBuilder开发wpp2app增强性能之实现扫一扫

2024年3月30日 151次阅读 来源: 张公子

需求明确

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

实现步骤

创建条码扫描识别控件实例对象,涉及到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>
    原文作者：张公子
    原文地址: https://segmentfault.com/a/1190000017372191
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞