html5怎么实现扫描二维码
1、首先打开Hbuilder，点击菜单中的“文件”—“新建”—“创建移动app”
是的，HTML5的扫描功能需要在app的状态下才能使用，不过用这个可以一边调试一边修改，我们继续。。。
2、打开的界面中，填写应用名称这里随意，我填写的是plugtest，保存的路径按照需要选择，然后下方选择“空模板”—“确认”后左侧出现一个项目组
3、然后写代码之前，我们先下载两个文件，mui.min.js，mui.min.css，不要问我哪里有在哪里，百度一下吧
4、再然后，就是实现代码了：
<!doctype html>
<html>
<head>
<meta charset="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、这个时候就可以调试你的代码了，而且只要修改保存之后就会同步到你的手机上，以便于你的调试
