基于mui实现扫一扫二维码功能
Posted 9608kai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于mui实现扫一扫二维码功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="false" name="twcClient" id="twcClient"> <meta content="no-cache,must-revalidate" http-equiv="Cache-Control"> <meta content="no-cache" http-equiv="pragma"> <meta content="0" http-equiv="expires"> <!--允许全屏模式--> <meta content="yes" name="apple-mobile-web-app-capable" /> <!--指定sari的样式--> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta content="telephone=no" name="format-detection" /> <title>扫一扫</title> <!-- <link href="../css/mui.min.css" rel="stylesheet" />--> <link rel="stylesheet" href="../css/default.css"> <style> .mui-bar-nav { top: 0; -webkit-box-shadow: 0 1px 6px #ccc; box-shadow: 0 1px 6px #ccc; } .mui-bar { position: fixed; z-index: 999; right: 0; left: 0; height: 44px; padding-right: 10px; padding-left: 10px; border-bottom: 0; background-color: #f7f7f7; -webkit-box-shadow: 0 0 1px rgba(0,0,0,.85); box-shadow: 0 0 1px rgba(0,0,0,.85); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mui-pull-right { float: right; } .mui-bar-footer { bottom: 0; } #bcid{ width: 100%; height: 80%; position: absolute; top:1rem; z-index: 1; } .fbt{ color: #0E76E1; width: 50%; background-color: #ffffff; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class="mui-bar mui-bar-nav" style="background-color: #ffffff;"> <span class="mui-pull-right" style="padding:.5rem 0;" id="turnTheLight">开灯</span> </header> <div> <div id="bcid"> <!--盛放扫描控件的div--> </div> </div> <div class="mui-bar mui-bar-footer" style="padding: 0px;"> <div class="fbt" onclick="scanPicture();">从相册选择二维码</div> <div class="fbt" onclick="scanClose();">取 消</div> </div> </body> <script src="../js/mui.min.js"></script> <script type="text/javascript" > scan = null;//扫描对象 mui.plusReady(function () { //通过mui初始化扫描 mui.init(); startRecognize();//开始扫描 }); function startRecognize(){ //开启扫描方法 try{ var filter; //自定义的扫描控件样式 var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""} //扫描控件构造 scan = new plus.barcode.Barcode(‘bcid‘,filter,styles); scan.onmarked = onmarked;////扫描完毕后的回调 scan.onerror = onerror; //扫描错误 scan.start(); }catch(e){ alert("出现错误啦: "+e); } }; //打开关闭闪光灯处理 var flag = false; document.getElementById("turnTheLight").addEventListener(‘tap‘,function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); // 从相册中选择二维码图片 function scanPicture() { //可以直接识别二维码图片 plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert( "无法识别此图片" ); }); },function(err){ plus.nativeUI.alert("Failed: "+err.message); }); } //这个是扫描二维码的回调函数，type是扫描二维码回调的类型 function onmarked( type, result ) { var text = ‘‘; switch(type){ //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果 case plus.barcode.QR: text = ‘QR: ‘; break; case plus.barcode.EAN13: text = ‘EAN13: ‘; break; case plus.barcode.EAN8: text = ‘EAN8: ‘; break; } scan.close(); javascript:window.history.back(-1); localStorage.value = [result]; /* window.location.href = "single_code.html?id="+result; */ /* alert( text + " : "+ result+‘111‘ );//扫描完毕后的回调 */ }; //关闭控件 function scanClose(){ scan.close(); javascript:window.history.back(-1); } </script> </html>
1：必须在app里运行（可以使用hbuilder真机测试）；
2：页面的样式特别不好调；
3：可以参考h5+的文档
以上是关于基于mui实现扫一扫二维码功能的主要内容，如果未能解决你的问题，请参考以下文章