HBuilder webApp开发(十三)二维码扫描
来源:互联网 发布:网络节点怎么查 编辑:程序博客网 时间:2024/05/22 08:17
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
《【iOS】CoreImage原生二维码生成(一)》
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
在做H5的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>
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
代码下载地址:请点击我!
2 0
- HBuilder webApp开发(十三)二维码扫描
- HBuilder webApp开发(十一)二维码生成
- HBuilder webApp开发(一)新建项目
- HBuilder webApp开发(三)轮播图swiper
- HBuilder webApp开发(六)事件绑定
- HBuilder webApp开发(十六)定位geolocation
- android 二维码扫描开发
- 二维码开发,扫描,生成
- IOS开发 扫描二维码
- 二维码扫描ios开发
- iOS开发扫描二维码
- Android二维码扫描开发
- iOS开发二维码扫描
- android开发二维码扫描
- [swift学习之十三]二维码扫描练习
- HBuilder webApp开发(十四)iOS平台5+插件开发
- HBuilder webApp开发 Websql增删改查操作
- HBuilder webApp开发(四)相册/拍照-图片上传
- 对图片进行二次采样,解决图片过大出现OM
- java并发实战阅读笔记 --1
- 从assets拷贝数据库到file目录
- 当前页汇总和全部汇总的显示问题
- Sublime_text 3 插件资源查看器 PackageResourceViewer
- HBuilder webApp开发(十三)二维码扫描
- Android水平ProgressBar
- 精通java技术应该掌握哪些知识
- Oxford场景文本识别样本生成工具
- 如何利用API实现行式报表后台导入excel数据入库
- 如何在go程序中捕获退出信号
- 微信支付流程
- sql语句
- PHP常用函数总结