Aujourd'hui, mon superviseur m'a fait une demande disant que je devais utiliser le développement hybride et utiliser H5 pour appeler la caméra locale afin de scanner le code QR. J'ai déjà effectué une numérisation native du code QR Android, principalement en appelant le plug-in zxing. J'ai aussi eu un flash. Mais je n'avais jamais rencontré de H5 pur, donc je ne savais pas quoi faire, alors je suis rentré chez moi le soir et j'ai commencé à chercher des solutions en ligne. Voici ma compréhension et le code du QR de numérisation H5. codes et appeler les caméras locales.
Site Web de vulgarisation scientifique :
Comment H5 génère des objets composants Android
H5 appelle l'API de la caméra locale Android
Générateur d'images de code QR en ligne
Scan du code QR : (en utilisant le framework mui, voici le code html)
<!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 mui-bar-nav style=> <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 H5webapp</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--Le div contenant le contrôle de scan--> </div> <div class=mui-bar mui-bar-footer style=padding : 0px;> <div class=fbt onclick=scanPicture();>Sélectionner le code QR dans l'album</div> <div class=fbt mui-action-back>Annuler</div> </div> <script type=text / javascript> var height = window.innerHeight + 'px';//Obtenir la hauteur réelle de la page var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//Scan object mui.plusReady(function () { //Initialiser l'analyse de mui via mui. init(); startRecognize(); }); function startRecognize(){ //Activer l'analyse 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.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 } } ; // Alerte contextuelle d'erreur (e); }; function onmarked (type, result) { // Ceci est la fonction de rappel pour scanner le code QR, type est le type de rappel pour scanner le code QR var text = ''; (type ){ //QR, EAN13 et EAN8 sont tous des formats d'encodage de codes QR, et le résultat est le résultat renvoyé case plus.barcode.QR: text = 'QR: '; break plus.barcode.EAN13 : texte = 'EAN13 : '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; alert( text + : + result }; Identifiez directement les images de code QR plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Impossible de reconnaître cette image); }); },function(err){ plus.nativeUI.alert(Échec : +err.message } } </script> </body> </html>);Voici la structure du paquet : l'outil de développement est hbuilder
La fonction mui.plusReady est principalement destinée à l'initialisation
startRecognize() sert à activer la fonction de numérisation des codes QR
onerror est un message d'erreur
onmarked est le point clé, c'est la fonction de rappel après la numérisation du code QR, le type est le type de reconnaissance du code QR et le résultat est le contenu du rappel du code QR.scanPicture() peut identifier directement les images de code QR local et les analyser
H5 appelle la caméra locale
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no /> <title></title> <script src=js/mui.min.js></script> <link href=css/mui.min.css rel=stylesheet/> <script type=text/javascript charset=utf-8> document.addEventListener( plusready, function(){ mui.init(); }); { var cam = plus.camera.getCamera(); //Tableau de chaînes, résolution de caméra prise en charge par la caméra var Résolutions = cam.supportedImageResolutions[0]; //Tableau de chaînes, formats de fichiers photo pris en charge par la caméra var Formats = cam.supportedImageFormats[0]; //Appelle la méthode photo //capturedFile, une fois la photo terminée, l'adresse de stockage de la photo cam. .captureImage( function(capturedfile){ //Photographie réussie alert(capturedfile); //Imprimez-le}, function(){ //Photographie échouée},{ //Format des paramètres de photographie : Formats, index : 1//1 représente la caméra principale, 2 représente la caméra auxiliaire}); var Résolutions = cam.supportedImageResolutions[0]; //Tableau de chaînes, format de fichier photo pris en charge par la caméra var Formats = cam.supportedImageFormats[ 0] ; //Appelle la méthode de photographie //capturedFile. Une fois la photographie terminée, l'adresse de stockage des photos cam.captureImage(function(capturedFile){ //Photo prise avec succès alert(capturedFile); //Imprimez-la //Appelez la méthode système pour obtenir la photo en fonction de l'adresse de la photo plus.io.resolvLocalFileSystemURL(capturedFile, //Fonction de rappel réussie //Fonction d'informations relatives au fichier d'entrée( entrée){ var img = document.createElement(img); img.src = entrée.toLocalURL(); },function(){ //Échec de la fonction de rappel}); }); } </script></head><body> <button onclick=getCamera()>Photographie</button></body></html >mui.init(); est l'initialisation du framework mui
La méthode getCamera() génère d'abord un objet caméra, puis prend une photo et imprime le chemin de l'image généré après avoir pris la photo.
RésumerCe qui précède est la numérisation du code QR de développement hybride HTML5 et l'appel de la caméra locale introduits par l'éditeur. J'espère que cela 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 !