Un cas d'implémentation de Barcode
1. PrésentationLe module Barcode gère la numérisation des codes-barres et fournit des fonctions de numérisation et d'identification pour les codes-barres courants (codes QR et codes unidimensionnels). Il peut appeler la caméra de l'appareil pour numériser les images de codes-barres pour la saisie de données. Les objets de gestion de codes-barres peuvent être obtenus via plus.barcode.
2. Effet obtenu 3. Implémentez le 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{ largeur : 100 % ; hauteur : 100 % ; position : arrière-plan : #000000 ; { hauteur : 100 % ; largeur : 100 % ; } .fbt{ couleur : #0E76E1 ; largeur : 50 % ; #ffffff; float : gauche ; hauteur de ligne : 44 px ; texte-align : centre ; } </style> </head> <body> <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;>Analyse du code QR de l'article</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--div tenant le contrôle de scan--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Sélectionnez le code QR dans l'album</div> <div class=fbt mui-action-back>Annuler</div> </div> <script type=text/javascript> scan = null; //Objet d'analyse mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ try{ var filter; //Style de contrôle d'analyse personnalisé var styles = {frameColor : #29E52C,scanbarColor : #29E52C,background : } //Construction du contrôle de numérisation scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked scan.onerror = onerror; ; scan.start(); //Activer et désactiver le traitement flash 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){ alert(Une erreur s'est produite :/n+e); function onerror(e){ alert(e); onmarked( type, result ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert( text + : + result }; // Sélectionnez une image de code QR dans l'album function scanPicture() { plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Cette image ne peut pas être reconnue); }); },function(err){ plus . nativeUI.alert(Échec : +err.message }); </script> </body> </html> 3. Problèmes rencontrés au cours du processusa, div occupe toute la page
1. La largeur et la hauteur de ce div sont de 100 %, et la hauteur de l'élément parent est également celle-ci (et ainsi de suite jusqu'au nœud racine), ou la position de ce div est absolue ;
2. Vous pouvez utiliser js pour définir dynamiquement la largeur et la hauteur de la page.
var height = window.innerHeight + 'px';//Obtenir la hauteur réelle de la page var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= document.getElementById(bcid) .style.largeur=largeur;
b, le contrôle de numérisation a des marges supérieure et inférieure
Le remplissage de noir est utilisé pour diluer la différence visuelle, mais cela n'a pas été réellement résolu (si vous le résolvez, veuillez laisser un message, merci).
RésumerCe qui précède est la fonction de numérisation de code QR implémentée par HTML5 basée sur le framework MUI introduit par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !