HBuilder webApp开发(十三)二维码扫描

最新推荐文章于 2023-06-12 10:09:26 发布

小猿猪哥

最新推荐文章于 2023-06-12 10:09:26 发布

阅读量2.6w

点赞数 4

分类专栏： HBuilder webApp开发文章标签： hybrid app 二维码 barcode

本文链接：https://blog.csdn.net/zhuming3834/article/details/53391872

版权

HBuilder webApp开发专栏收录该内容

18 篇文章 222 订阅

订阅专栏

好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
《【iOS】CoreImage原生二维码生成（一）》
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
直接上代码，注释都在代码里面了。

<body >
    <header class="mui-bar mui-bar-nav white">
        <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">
        <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
        <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
        <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
        <div id= "bcid"></div>
    </div>
</body>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var scan = null;
    var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    // 条码识别成功事件
    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; 
    }
    // 开始扫描
    document.getElementById("startScan").addEventListener('tap',function(){
        startRecognize();
        scan.start();
    })
    // 取消扫描
    document.getElementById("cancelScan").addEventListener('tap',function(){
        startRecognize();
        scan.cancel();
    })
    //  开启和关闭闪光灯
    document.getElementById("setFlash").addEventListener('tap',function(){
        startRecognize();
        isOpen = !isOpen;
        if(isOpen){
            scan.setFlash(true);
        }else{
            scan.setFlash(false);
        }
    })
</script>

效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
代码下载地址：请点击我！

小猿猪哥

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
25
评论
HBuilder webApp开发(十三)二维码扫描

好久没有写《HBuild Hybrid App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：《【iOS】AVFoundation架构下的原生二维码和条形码扫描》《【iOS】CoreImage原生二维码生成（一）》《【iOS】CoreIm
复制链接

扫一扫