Ein Implementierungsfall von Barcode
1. EinführungDas Barcode-Modul verwaltet das Barcode-Scannen und bietet Scan- und Identifizierungsfunktionen für gängige Barcodes (QR-Codes und eindimensionale Codes). Es kann die Kamera des Geräts aufrufen, Barcode-Bilder zur Dateneingabe zu scannen. Barcode-Verwaltungsobjekte können über plus.barcode abgerufen werden.
2. Erzielter Effekt 3. Implementieren Sie den Code <!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% } html, body ,div { height:100%; width: 100% } .fbt{ width: 50%; #ffffff; float: left; line-height: 44px; text-align: center } </style> </head> <header class=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;>Artikel-QR-Code-Scannen</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--div hält die Scan-Steuerung--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>QR-Code aus Album auswählen</div> <div class=fbt mui-action-back>Abbrechen</div> </div> <script type=text/javascript> scannen = null; //Objekt scannen mui.plusReady(function () { mui.init(); startRecognize(){ try{ var filter; styles = {frameColor: #29E52C,scanbarColor: #29E52C,background:} //Scan-Kontrollaufbau scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; scan.onerror = onerror ; scan.start(); // Flash-Verarbeitung ein- und ausschalten 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){ warning(Ein Fehler ist aufgetreten:/n+e }; onmarked( type, result ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; case plus.barcode.EAN8: text = 'EAN8: '; break; } Alert( text + : + result }; plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Dieses Bild kann nicht erkannt werden); }); },function(err){ plus . nativeUI.alert(Failed: +err.message } } </script> </body> </html> 3. Während des Prozesses aufgetretene Problemea, div nimmt die gesamte Seite ein
1. Die Breite und Höhe dieses Divs betragen 100 %, und die Höhe des übergeordneten Elements ist ebenfalls gleich (und so weiter bis zum Wurzelknoten), oder die Position dieses Divs ist absolut;
2. Sie können js verwenden, um die Seitenbreite und -höhe dynamisch festzulegen.
var height = window.innerHeight + 'px';//Ermitteln Sie die tatsächliche Höhe der Seite var width = window.innerWidth + 'px'; .style. width= width;
b, das Scan-Steuerelement hat einen oberen und einen unteren Rand
Das Füllen mit Schwarz wird verwendet, um den visuellen Unterschied zu verwässern, aber es wurde nicht wirklich gelöst (Wenn Sie es lösen, hinterlassen Sie bitte eine Nachricht, danke.)
ZusammenfassenDas Obige ist die von HTML5 implementierte QR-Code-Scanfunktion, die auf dem vom Herausgeber eingeführten MUI-Framework basiert. Ich hoffe, dass sie Ihnen hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!