HTML5 öffnet die Code-Scanfunktion für Mobiltelefone und ihre Vor- und Nachteile._HTML5-Tutorial-Fähigkeiten-HTML-Tutorial-php.cn

HTML5 öffnet die Code-Scanfunktion für Mobiltelefone und ihre Vor- und Nachteile._HTML5-Tutorial-Fähigkeiten

韦小宝

Freigeben： 2017-12-16 11:43:34

Original

3954 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich HTML5-bezogene Informationen zum Öffnen der Handy-Code-Scanfunktion und deren Vor- und Nachteile vorgestellt.

1 gelöst:

1. Kann mit dem Weibo-Client die Kamera aufrufen, um den QR-Code zu scannen und zu analysieren nativer Browser und WeChat-Client-QR-Code und Analyse;

2. Vorteile: Die Webseite oder h5-Seite kann den QR-Code direkt vervollständigen Scanarbeit;

3 Für das Bild muss sich das Objektiv sehr nahe am QR-Code befinden. Im Vergleich zu kommt es bei nativem Aufruf zu einer Verzögerung von 1–2 Sekunden bei der Kameraanalyse. Hinweis: Dieses Plug-in muss mit zepto.js oder jQuery.js verwendet werden

Verwendung:

1. Geben Sie auf der Seite, die verwendet werden muss, die js-Dateien im lib-Verzeichnis in der folgenden Reihenfolge ein:

2. Definieren Sie den HTML-Stil der Schaltfläche selbst.

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

Nach dem Login kopieren

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

Fügen Sie ein benutzerdefiniertes Attribut für die Schaltfläche hinzu Eingabeschaltfläche, der Attributname ist Knotentyp

Da dieses Plug-in die Verwendung von

erfordert, verfügt die HTML-Struktur über einen festen Anzeigestil auf der Webseite, um den Schaltflächenstil anzupassen. Wir können den Code gemäß der folgenden Beispielcodestruktur verschachteln

<input type="file" />

Dann legen Sie das CSS der Eingabeschaltfläche so fest, dass es ausgeblendet wird Zum Beispiel verwende ich den

Attributselektor

 <p>
        <p class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </p>
    </p>

Nach dem Login kopieren

Hier müssen wir nur das definieren Stil der Klasse="qr-btn" entsprechend unseren eigenen Bedürfnissen.

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

Nach dem Login kopieren

3. Initialisieren Sie das Qrcode-

-Objekt auf der Seite

Hauptcode Analyse

 //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($(&#39;[node-type=qr-btn]&#39;));
    });

Nach dem Login kopieren

(function($) {
    var Qrcode = function(tempBtn) {
        var _this_ = this;
        var isWeiboWebView = /weibo/.test(navigator.userAgent);
        if (isWeiboWebView) {
            if (window.WeiboJSBridge) {
                _this_.bridgeReady(tempBtn);
            } else {
                document.addEventListener(&#39;WeiboJSBridgeReady&#39;, function() {
                    _this_.bridgeReady(tempBtn);
                });
            }
        } else {
            _this_.nativeReady(tempBtn);
        }
    };
    Qrcode.prototype = {
        nativeReady: function(tempBtn) {
            $(&#39;[node-type=jsbridge]&#39;,tempBtn).on(&#39;click&#39;,function(e){
                e.stopPropagation();
            });
            $(tempBtn).bind(&#39;click&#39;,function(e){
                $(this).find(&#39;input[node-type=jsbridge]&#39;).trigger(&#39;click&#39;);
            });
            $(tempBtn).bind(&#39;change&#39;, this.getImgFile);
        },
        bridgeReady: function(tempBtn) {
            $(tempBtn).bind(&#39;click&#39;, this.weiBoBridge);
        },
        weiBoBridge: function() {
            window.WeiboJSBridge.invoke(&#39;scanQRCode&#39;, null, function(params) {
                //得到扫码的结果
                $(&#39;.result-qrcode&#39;).append(params.result + &#39;<br/>&#39;);
            });
        },
        getImgFile: function() {
            var _this_ = this;
            var inputDom = $(this).find(&#39;input[node-type=jsbridge]&#39;);
            var imgFile = inputDom[0].files;
            var oFile = 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\-icon|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("选择正确的图片格式!");
                return;
            }
            oFReader.onload = function(oFREvent) {
                qrcode.decode(oFREvent.target.result);
                qrcode.callback = function(data) {
                    //得到扫码的结果
                    $(&#39;.result-qrcode&#39;).append(data + &#39;<br/>&#39;);
                };
            };
            oFReader.readAsDataURL(oFile);
        },
        destory: function() {
            $(tempBtn).off(&#39;click&#39;);
        }
    };
    Qrcode.init = function(tempBtn) {
        var _this_ = this;
        tempBtn.each(function() {
            new _this_($(this));
        });
    };
    window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);

Nach dem Login kopieren

Zusammenfassung

Das Obige ist Der Herausgeber stellt Ihnen die HTML5-Handy-Scanfunktion und ihre Vor- und Nachteile vor. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken! Verwandte Empfehlungen:

HTML5-Methode zum Aufrufen einer App

Schritte zur Optimierung von HTML5-Formularen mit CSS3

Mehrere nützliche HTML5-Frameworks für die mobile Entwicklung

Das obige ist der detaillierte Inhalt vonHTML5 öffnet die Code-Scanfunktion für Mobiltelefone und ihre Vor- und Nachteile._HTML5-Tutorial-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!