1、首先打开Hbu坡纠课柩ilder，点击菜单中的“文件”—“新建”—“创建移动app”是的，HTML5的扫描功能需要在app的状态下才能使用，不过用这个可以一边调试一边修改，我们继续。。。
2、打开的界面中，填写应用名称这里随意，我填写的是plugtest，保存的路径按照需要选择，然后下方选择“空模板”—“确认”后左侧出现一个项目组
3、然后写代码之前，我们先下载两个文件，mui.min.js，mui.min.css，不要问我哪里有在哪里，百度一下吧
4、再然后，就是实现代码了：<!doctype html> <html> <head> <meta charset=&鳎溻趄酃quot;UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/iconfont.css" /> <script src="js/mui.min.js"></script> <style type="text/css"> </style> </head> <body> <header class="mui-bar" style="background-color:#000000;"id="head1"> <a class=" mui-icon mui-icon-left-nav mui-pull-left mui-action-back"style="color: #FFFFFF;"><font size="4">发现</font></a> <h1 class="mui-title" style="color: #FFFFFF;font-family:'微软雅黑';">物品二维码扫描</h1> <span class="mui-icon mui-icon-image mui-spin mui-pull-right" id="turnTheLight" style="color:white;" onclick="scanPicture();">测试</span> </header> <div id="code" style="width:100%;height:100%;position:absolute;background:#000000;"> <!--盛放扫描控件的div--> </div> <div class="mui-bar mui-bar-tab" style="background-color: #000000;"> <a class="mui-tab-item mui-active" data-index="0"> <span class="mui-icon iconfont icon-saoyisao"></span> <span class="mui-tab-label">扫码</span> </a> <a class="mui-tab-item mui-action-back" data-index="1"> <span class="mui-icon iconfont icon-quxiao"></span> <span class="mui-tab-label"style="color:white">取消</span> </a> </div> <script type="text/javascript"> scan = null;//扫描对象 mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ try{ var filters; //自定义的扫描控件样式 var styles = {frameColor: "#0000FF",scanbarColor: "#0000FF"}; //扫描控件构造 scan = new plus.barcode.Barcode('code',filters,styles); scan.onmarked = onmarked; scan.onerror = onerror; scan.start(); }catch(e){ mui.alert("出现错误啦:\n"+e); } }; function onerror(e){ miu.alert(e); }; 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; } plus.runtime.openURL(result); }; // 从相册中选择二维码图片 function scanPicture() { plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert( "无法识别此图片" ); }); }); } </script> </body> </html>注意看，需要引入之前的两个文件
5、接下来就是，将手机用数据线连接到电脑上，安装稍僚敉视个360手机助手，手机和电脑都有，测试确实连接之后，点击如图所示“在手机设备上运行”快捷键Ctrl+R
6、如果手机能找到的话，Hbuilder就会自动将这个项目安装到目标手机上，并在下方显示出一些数据，如图就是完成了
7、这个时候就可以调试你的代码了，而且只要修改保存之后就会同步到你的手机上，以便于你的调试
