Das MUI-Framework verwendet HTML5, um die Funktion zum Scannen von QR-Codes zu implementieren-HTML-Tutorial-php.cn

Das MUI-Framework verwendet HTML5, um die Funktion zum Scannen von QR-Codes zu implementieren

小云云

Freigeben： 2018-03-03 10:11:09

Original

4249 Leute haben es durchsucht

1. Einführung

Das Barcode-Modul verwaltet das Scannen von Barcodes und bietet Scan- und Identifikationsfunktionen für gängige Barcodes (QR-Codes und eindimensionale Codes). Die Kamera des Geräts kann aufgerufen werden, Barcode-Bilder zur Dateneingabe zu scannen . Barcode-Verwaltungsobjekte können über plus.barcode abgerufen werden.

2. Implementierungseffekt

3. Implementierungscode

<!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" />  
    <script src="js/mui.min.js"></script>  
    <style type="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>  
    <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>  
    <p id="bcid">     
         <!--盛放扫描控件的p-->          
    </p>  
    <p class="mui-bar mui-bar-footer" style="padding: 0px;">  
        <p class="fbt" onclick="scanPicture();">从相册选择二维码</p>  
        <p class="fbt mui-action-back">取　 消</p>  
    </p>  
    <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 );  
            };    
        // 从相册中选择二维码图片   
        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);  
            });  
        }         
        </script>  
    </body>  
</html>

Nach dem Login kopieren

3 > a, p nimmt die gesamte Seite ein

1, die Breite und Höhe dieses p sind 100%, die Höhe des übergeordneten Elements ist ebenfalls gleich (und so weiter bis zum Wurzelknoten) oder die Position dieses p ist absolut;

2. Sie können js verwenden, um die Seitenbreite und -höhe dynamisch festzulegen

b Das Scan-Steuerelement hat obere und untere Ränder

var height = window.innerHeight + 'px';//获取页面实际高度  
var width = window.innerWidth + 'px';  
document.getElementById("bcid").style.height= height;  
document.getElementById("bcid").style.width= width;

Nach dem Login kopieren

und füllen Sie es mit Schwarz, um den visuellen Unterschied zu verwässern, nicht wirklich gelöst, (wenn Sie es lösen, hinterlassen Sie bitte eine Nachricht, danke)

Verwandte Empfehlungen:

HTML5 Beispiel-Tutorial für Hybridentwicklung zum Scannen und Aufrufen lokaler Kameras mit QR-Code

H5-Codebeispiel für das Scannen und Parsen von QR-Codes

Html5-Implementierung des QR-Code-Scannens und Parsing_html5 Tutorial-Tipps

Das obige ist der detaillierte Inhalt vonDas MUI-Framework verwendet HTML5, um die Funktion zum Scannen von QR-Codes zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!