HTML5 öffnet die Code-Scanfunktion für Mobiltelefone und ihre Vor- und Nachteile

1. Möglichkeit, die Kamera auf dem Weibo-Client aufzurufen, um den QR-Code zu scannen und zu analysieren;

2. Kann QR-Codes in nativen Browsern und WeChat-Clients scannen und analysieren;

Die Webseite oder die H5-Seite kann die Code-Scan-Arbeit direkt abschließen;

Wenn das Bild nicht klar ist, kann es leicht zu Fehlern beim Parsen kommen (zum Aufnehmen von Bildern zum Scannen des Bildes muss sich das Objektiv sehr nahe am QR-Code befinden. Im Vergleich zum nativen Aufruf kommt es beim Parsen der Kamera zu einer Verzögerung von 1-30 Sekunden). 2 Sekunden.

veranschaulichen:

Dieses Plug-in muss mit zepto.js oder jQuery.js verwendet werden

1. Führen Sie auf der zu verwendenden Seite die js-Dateien im lib-Verzeichnis in der folgenden Reihenfolge ein

 <script src=lib/zepto.js></script> <script src=lib/qrcode.lib.min.js></script> <script src=lib/qrcode.js></script>

2. Passen Sie den HTML-Stil der Schaltfläche an

Fügen Sie ein benutzerdefiniertes Attribut für die benutzerdefinierte Schaltfläche hinzu. Der Attributname ist Knotentyp

Fügen Sie der Eingabeschaltfläche ein benutzerdefiniertes Attribut hinzu. Der Attributname ist Knotentyp

Da das Plug-in <input type=file /> verwenden muss, hat die HTML-Struktur einen festen Anzeigestil auf der Webseite. Um den Schaltflächenstil anzupassen, können wir den Code gemäß der folgenden Beispielcodestruktur verschachteln

 <div> <div class=qr-btn node-type=qr-btn>QR-Code 1 scannen <input node-type=jsbridge type=file name=myPhoto value=QR-Code 1 scannen /> </div> < /div >

Stellen Sie dann das CSS der Eingabeschaltfläche so ein, dass die Schaltfläche ausgeblendet wird. Ich verwende beispielsweise den Attributselektor.

 Eingabe[node-type=jsbridge]{ display:none;}

Hier müssen wir nur den Stil von class=qr-btn entsprechend unseren eigenen Bedürfnissen definieren.

3. Initialisieren Sie das Qrcode-Objekt auf der Seite

 //Die Schaltfläche „QR-Code scannen“ initialisieren und das benutzerdefinierte Knotentypattribut übergeben $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Hauptcode-Analyse

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } anders { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); } }); else { _this_.nativeReady(tempBtn); } }; $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); { $(this).find('input[node-type=jsbridge]').trigger('click'); this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', null, Funktion(Parameter) { //Ergebnis des Scannens des QR-Codes abrufen $('.result-qrcode').append(params.result + '<br/>' }), getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; imgFile[0]; var oFReader = new FileReader(); var rFilter = /^(?:image//bmp|image//cis/-cod|image//gif|image//ief|image//jpeg|image//jpeg|image//jpeg|image//pipeg|image/ /png|image//svg/+xml|image//tiff|image//x/-cmu/-raster|image//x/-cmx|image//x/-i con|image//x/-portable/-anymap|image//x/-portable/-bitmap|image//x/-portable/-graymap|image//x/-portable/-pixmap|image//x /-rgb|image//x/-xbitmap|image//x/-xpixmap|image//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; if (!rFilter.test(oFile.type)) { Alert(Wählen Sie das richtige Bildformat!); .decode(oFREvent.target.result); qrcode.callback = function(data) { //Ergebnis des Scannens des QR-Codes $('.result-qrcode').append(data + '<br/>' }, destory: function() { $( tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); } });

Das Obige ist die vom Herausgeber vorgestellte HTML5-Handy-Scanfunktion. Ich hoffe, sie wird Ihnen hilfreich sein. 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!