So implementieren Sie das Scannen von H5-Handycodes

Dieses Mal zeige ich Ihnen, wie Sie das H5-Handy-Code-Scannen implementieren, wie Sie mit H5 das Handy-Code-Scannen implementieren? Was sind die Vorsichtsmaßnahmen für das Scannen von H5-Mobiltelefonen? Unten sehen Sie einen praktischen Fall.

Probleme gelöst:

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;

2. Vorteile:

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

3. Nachteile:

Das Bild ist nicht klar und kann leicht nicht analysiert werden (das Fotografieren zum Scannen des Bildes erfordert, dass sich das Objektiv sehr nahe am QR-Code befindet) Im Vergleich zur nativen Kamera kommt es zu einer Verzögerung von 1 bis 2 Sekunden.

Hinweis:

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

Verwendungsmethode:

1. Geben Sie in „Die zu verwendenden Seiten“ 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

Benutzerdefinierte Schaltflächen hinzufügen Definieren Sie das

Attribut, der Attributname ist Knotentyp

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

Da das Plug-in verwenden muss, hat diese HTML-Struktur einen festen Anzeigestil auf der Webseite. Um den Schaltflächenstil anzupassen, können wir den Code entsprechend verschachteln Folgen Sie der Beispielcodestruktur

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

und legen Sie dann das CSS der Eingabeschaltfläche fest, um die Schaltfläche auszublenden. Ich verwende beispielsweise den

Attributselektor

input[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

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in den anderen verwandten Artikeln PHP chinesische Website!

Verwandte Lektüre:

So aktivieren Sie die App in h5

Eine Zusammenfassung aller Elemente und der grundlegenden Syntax von H5

So gehen Sie mit der Inkompatibilität älterer Browserversionen mit H5 und C3 um

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Scannen von H5-Handycodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!