Comment mettre en œuvre la numérisation du code du téléphone mobile H5

Cette fois, je vais vous montrer comment mettre en œuvre la numérisation de code de téléphone mobile H5, comment utiliser H5 pour mettre en œuvre la numérisation de code de téléphone mobile ? Quelles sont les précautions pour le scan d'un téléphone portable H5 ? Ci-dessous un cas pratique, jetons un oeil.

Problèmes résolus :

1. Possibilité d'appeler la caméra sur le client Weibo pour scanner le code QR et l'analyser

2 .Capable de scanner et d'analyser les codes QR dans les navigateurs natifs et les clients WeChat ;

2 Avantages :

Le côté Web ou le côté h5 peut directement effectuer le travail de numérisation du code QR ;

3. Inconvénients :

L'image

n'est pas claire et peut facilement échouer à être analysée (prendre des photos pour numériser l'image nécessite que l'objectif soit très proche du code QR) , par rapport à la caméra native, il y aura un délai d'analyse de 1 à 2 secondes. Remarque :

Ce plug-in doit être utilisé avec zepto.js ou

jQuery

.jsMéthode d'utilisation :

1. Dans Les pages qui doivent être utilisées, introduisez les fichiers js dans le répertoire lib dans l'ordre suivant

2. Personnalisez le style html du bouton

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

Ajouter des boutons personnalisés Définissez le

attribut

, le nom de l'attribut est type de nœudAjoutez un attribut personnalisé pour le bouton de saisie, le nom de l'attribut est type de nœud

parce que le plug-in doit utiliser , cette structure html a un style d'affichage fixe sur la page web. Afin de personnaliser le style des boutons, nous pouvons imbriquer le code en fonction du style. exemple de structure de code suivant

puis définissez le CSS du bouton de saisie pour masquer le bouton. Par exemple, j'utilise le

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

sélecteur d'attribut

. Ici, il nous suffit de définir le style de class="qr-btn" en fonction de nos propres besoins.

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

3. Initialisez l'objet Qrcode sur la page

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

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

Lecture connexe :

Comment réveiller l'application dans h5

Un résumé de tous les éléments et la syntaxe de base de H5

Comment gérer l'incompatibilité des anciennes versions des navigateurs avec H5 et C3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!