mui实现二维码扫描功能

最新推荐文章于 2024-08-23 09:17:42 发布

木易66丶

最新推荐文章于 2024-08-23 09:17:42 发布

阅读量4.7k

点赞数 1

分类专栏：前端js 文章标签：前端二维码扫描

本文链接：https://blog.csdn.net/q_qman/article/details/83182678

版权

前端js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

注意事项：

1.mui扫描二维码需在HBuilder中真机运行调试，不然无法实现扫描

2.正常情况下扫描结果为一个链接，可以通过定义方法将此链接传到后台，此处为ajax方式提交

3.以下为项目代码，使用时需要引入mui的样式及js:

<!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="__STATIC__/assets/mobile/css/mui.min.css" rel="stylesheet" />
    <script src="__STATIC__/assets/mobile/js/mui.min.js"></script>
    <script src="__STATIC__/assets/js/jquery.min.js"></script>
        <script src="__STATIC__/assets/js/layer/layer.js"></script>
    <style type="text/css">
        #bcid{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000000;
        }
        html, body ,div{
            height:100%;
            width: 100%;
        }
        .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;">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
      <span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
    </header>
        
    <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 mui-action-back">取　 消</div>
    </div>
        
    <script type="text/javascript">
        scan = null;//扫描对象
        mui.plusReady(function () {
            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();
            //打开关闭闪光灯处理
            var flag = 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);
             }
          };
            function onerror(e){
                    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;
                    }
                 //    alert( text + " : "+ result);
                    scan.cancel();
                    scan.close();
            //        plus.runtime.openURL(result);
                    scanDoit(result);    
            };
                
        // 从相册中选择二维码图片 
        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);
            });
        }
        function scanDoit(path){
            $.ajax({
            type: "POST",  
            url:"{:url('/index/Purchase/wstatus')}",  
            data:{path:path},
            async: false,  
            error: function(request) {  
                alert("其他错误,请联系客服");  
            },  
            success: function(data) {  
                 var data = JSON.parse(data);
                console.log(data);
                if(data['status'] == 1){
                //    layer.msg('登录成功',{time:2000});
                    window.location.href = "/courier/order/distribution2/id/"+data['info'];
                }

            }  
        });  
    
        }

        </script>
    </body>
</html>

效果如下：