MUI框架使用HTML5实现二维码扫描功能

  <!doctypehtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <title></title>
 
  <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
 
  <linkhref="css/mui.min.css"rel="stylesheet"/>
 
  <scriptsrc="js/mui.min.js"></script>
 
  <styletype="text/css">
 
  #bcid{
 
  width:100%;
 
  height:100%;
 
  position:absolute;
 
  background:#000000;
 
  }
 
  html,body,p{
 
  height:100%;
 
  width:100%;
 
  }
 
  .fbt{
 
  color:#0E76E1;
 
  width:50%;
 
  background-color:#ffffff;
 
  float:left;
 
  line-height:44px;
 
  text-align:center;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <headerclass="mui-barmui-bar-nav"style="background-color:#ffffff;">
 
  <aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a>
 
  <h1class="mui-title"style="color:#0E76E1;">物品二维码扫描</h1>
 
  <spanclass="mui-iconmui-icon-spinner-cyclemui-spinmui-pull-right"id="turnTheLight"></span>
 
  </header>
 
  <pid="bcid">
 
  <!--盛放扫描控件的p-->
 
  </p>
 
  <pclass="mui-barmui-bar-footer"style="padding:0px;">
 
  <pclass="fbt"onclick="scanPicture();">从相册选择二维码</p>
 
  <pclass="fbtmui-action-back">取消</p>
 
  </p>
 
  <scripttype="text/javascript">
 
  scan=null;//扫描对象
 
  mui.plusReady(function(){
 
  mui.init();
 
  startRecognize();
 
  });
 
  functionstartRecognize(){
 
  try{
 
  varfilter;
 
  //自定义的扫描控件样式
 
  varstyles={frameColor:"#29E52C",scanbarColor:"#29E52C",background:""}
 
  //扫描控件构造
 
  scan=newplus.barcode.Barcode('bcid',filter,styles);
 
  scan.onmarked=onmarked;
 
  scan.onerror=onerror;
 
  scan.start();
 
  //打开关闭闪光灯处理
 
  varflag=false;
 
  document.getElementById("turnTheLight").addEventListener('tap',function(){
 
  if(flag==false){
 
  scan.setFlash(true);
 
  flag=true;
 
  }else{
 
  scan.setFlash(false);
 
  flag=false;
 
  }
 
  });
 
  }catch(e){
 
  alert("出现错误啦:\n"+e);
 
  }
 
  };
 
  functiononerror(e){
 
  alert(e);
 
  };
 
  functiononmarked(type,result){
 
  vartext='';
 
  switch(type){
 
  caseplus.barcode.QR:
 
  text='QR:';
 
  break;
 
  caseplus.barcode.EAN13:
 
  text='EAN13:';
 
  break;
 
  caseplus.barcode.EAN8:
 
  text='EAN8:';
 
  break;
 
  }
 
  alert(text+":"+result);
 
  };
 
  //从相册中选择二维码图片
 
  functionscanPicture(){
 
  plus.gallery.pick(function(path){
 
  plus.barcode.scan(path,onmarked,function(error){
 
  plus.nativeUI.alert("无法识别此图片");
 
  });
 
  },function(err){
 
  plus.nativeUI.alert("Failed:"+err.message);
 
  });
 
  }
 
  </script>
 
  </body>
 
  </html>
 
  三、做的过程中遇见的问题
 
  a,p占满整个页面
 
  1,此p宽高都为100%,父级元素的高度也为此(依次类推直至根节点),或者此p的position为absolute;
 
  2,可采用js动态设置页面宽高
 
  varheight=window.innerHeight+'px';//获取页面实际高度
 
  varwidth=window.innerWidth+'px';
 
  document.getElementById("bcid").style.height=height;
 
  document.getElementById("bcid").style.width=width;
 
  b,扫描控件有上下边距
 
  采用填充黑色来淡化视觉上面的差异,未实际解决,(如果你解决的话,欢迎留言,谢谢)





本文转载自中文网

 

推荐阅读