基于mui实现扫一扫二维码功能

宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

<!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 rgba0,0,0,.85);
                    box-shadow: 0 0 1px rgba0,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.plusReadyfunction ) {  //通过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);
       
      }catche){
        alert"出现错误啦:
"+e);
         }
      };
                
            //打开关闭闪光灯处理
        var flag = false;
        document.getElementById"turnTheLight").addEventListener'tap',function){
           ifflag == false){
              scan.setFlashtrue);
              flag = true;
           }else{
             scan.setFlashfalse);
             flag = false;
           }
        });
        // 从相册中选择二维码图片
    function scanPicture) {  //可以直接识别二维码图片
        plus.gallery.pickfunctionpath){
            plus.barcode.scanpath,onmarked,functionerror){
                plus.nativeUI.alert "无法识别此图片" );
            });
        },functionerr){
            plus.nativeUI.alert"Failed: "+err.message);
        });
    } 
         //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
        function onmarked type, result ) { 
                var text = '';
                switchtype){ //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>