微信关注
微信
移动客户端
您当前的位置 ：首页 > 学习资料 > HBuilder webApp开发(十三)二维码扫描
投稿

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

2021-03-21 23:22:48 来源： 作者： 责任编辑：cncml

好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
《【iOS】CoreImage原生二维码生成（一）》
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
直接上代码，注释都在代码里面了。
 
  1. <body >
  2.     <header class="mui-bar mui-bar-nav white">
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  4.         <h1 class="mui-title">二维码扫描</h1>
  5.     </header>
  6.     <div class="mui-content">
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
  10.         <div id= "bcid"></div>
  11.     </div>
  12. </body>
  13. <script>
  14.     mui.init({
  15.         swipeBack:true //启用右滑关闭功能
  16.     });
  17.     var scan = null;
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
  19.     // 条码识别成功事件
  20.     function onmarked( type, result ) {
  21.         var text = '未知: ';
  22.         switch(type){
  23.             case plus.barcode.QR:
  24.             text = 'QR: '; // 二维码
  25.             break;
  26.             case plus.barcode.EAN13:
  27.             text = 'EAN13: ';
  28.             break;
  29.             case plus.barcode.EAN8:
  30.             text = 'EAN8: ';
  31.             break;
  32.         }
  33.         alert( text+result );
  34.     }
  35.     // 创建扫描控件
  36.     function startRecognize() {
  37.         scan = new plus.barcode.Barcode('bcid');
  38.         scan.onmarked = onmarked;
  39.     }
  40.     // 开始扫描
  41.     document.getElementById("startScan").addEventListener('tap',function(){
  42.         startRecognize();
  43.         scan.start();
  44.     })
  45.     // 取消扫描
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
  47.         startRecognize();
  48.         scan.cancel();
  49.     })
  50.     //  开启和关闭闪光灯
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
  52.         startRecognize();
  53.         isOpen = !isOpen;
  54.         if(isOpen){
  55.             scan.setFlash(true);
  56.         }else{
  57.             scan.setFlash(false);
  58.         }
  59.     })
  60. </script>
  61.  
复制代码

效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
 
 
 
 

文章来源： 责任编辑：cncml

更多
版权声明：
1、本主题所有言论和图片纯属会员个人意见，与本网站立场无关
2、本站所有主题由该文章作者发表，该文章作者与享有文章相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该文章作者和的同意
4、文章作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、管理员和版主有权不事先通知发贴者而删除本文
精彩置顶
绘画资料
独家推荐
软件推荐
不良信息举报信箱 新闻热线:18733599993 技术服务:18733599993 网上投稿
关于本站 | 广告服务 | 免责申明 | 招聘信息 | 联系我们
在线网 版权所有 Copyright(C)2005-2025