Un caso de implementación de código de barras
1. IntroducciónEl módulo de código de barras gestiona el escaneo de códigos de barras y proporciona funciones de escaneo e identificación para códigos de barras comunes (códigos QR y códigos unidimensionales). Puede llamar a la cámara del dispositivo para escanear imágenes de códigos de barras para ingresar datos. Los objetos de gestión de códigos de barras se pueden obtener a través de plus.barcode.
2. Efecto logrado 3. Implementar el código <!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,escala máxima=1,escalable por usuario=no /> <enlace href=css/mui.min.css rel=hoja de estilo /> <script src=js/mui.min.js></script> <tipo de estilo=text/css> #bcid{ ancho: 100%; alto: 100%; posición: absoluto; } html, cuerpo, div { altura: 100%; ancho: 100% } .fbt{ color: #0E76E1; ancho: 50%; #ffffff; float: izquierda; altura de línea: 44px; alineación de texto: centro; </style> </head> <body> <header class=mui-bar mui-bar-nav style=fondo-color: # ffffff;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title estilo=color: #0E76E1;>Escaneo de código QR de artículo</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--div sosteniendo el control de escaneo--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Seleccionar código QR del álbum</div> <div class=fbt mui-action-back>Cancelar</div> </div> <script type=text/javascript> escaneo = null; //Objeto de escaneo mui.plusReady(function () { mui.init(); startRecognize(); }); función startRecognize(){ try{ var filter; estilos = {frameColor: #29E52C,scanbarColor: #29E52C,fondo: } //Construcción del control de escaneo scan = new plus.barcode.Barcode('bcid',filter,styles scan.onmarked = onmarked; ; scan.start(); //Activar y desactivar el procesamiento 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){ alerta(Ocurrió un error:/n+e); función onerror(e){ alerta(e }); onmarked( tipo, resultado ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; case plus.barcode.EAN8: text = 'EAN8: '; break } alert( text + : + result } // Selecciona una imagen de código QR de la función scanPicture() { plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Esta imagen no se puede reconocer); }); },function(err){ plus .nativeUI.alert(Error: +err.message } } </script> </body> </html>); 3. Problemas encontrados durante el procesoa, div ocupa toda la página
1. El ancho y el alto de este div son 100%, y el alto del elemento padre también es este (y así sucesivamente hasta el nodo raíz), o la posición de este div es absoluta;
2. Puede utilizar js para establecer dinámicamente el ancho y el alto de la página.
var height = window.innerHeight + 'px';//Obtener la altura real de la página var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; .estilo. ancho= ancho;
b, el control de escaneo tiene márgenes superior e inferior
Se utiliza relleno de negro para diluir la diferencia visual, pero en realidad no se ha solucionado (si lo solucionas, deja un mensaje, gracias).
ResumirLo anterior es la función de escaneo de código QR implementada por HTML5 basada en el marco MUI introducido por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!