Um caso de implementação de código de barras
1. IntroduçãoO módulo de código de barras gerencia a leitura de código de barras e fornece funções de leitura e identificação para códigos de barras comuns (códigos QR e códigos unidimensionais). Ele pode chamar a câmera do dispositivo para digitalizar imagens de código de barras para entrada de dados. Os objetos de gerenciamento de código de barras podem ser obtidos através do plus.barcode.
2. Efeito alcançado 3. Implemente o 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, escalonável pelo usuário = não /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ largura: 100%; posição: fundo absoluto: #000000; { altura:100%; largura: 100% } .fbt{ cor: #0E76E1; #ffffff; float: esquerda; altura da linha: 44px; alinhamento de texto: centro; } </style> </head> <body> <header class=mui-bar 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;>Leitura de código QR do item</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--div segurando o controle de varredura--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>Selecione o código QR do álbum</div> <div class=fbt mui-action-back>Cancelar</div> </div> <script type=text/javascript> digitalização = null; //Verificar objeto mui.plusReady(function () { mui.init(); startRecognize(); }); estilos = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //Construção do controle de digitalização scan = new plus.barcode.Barcode('bcid',filter,styles); ; scan.start(); //Ativa e desativa o processamento 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(Ocorreu um erro:/n+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; text + : + result }; plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Esta imagem não pode ser reconhecida); }); },function(err){ plus .nativeUI.alert(Falha: +err.message } } </script> </body> </html>); 3. Problemas encontrados durante o processoa, div ocupa a página inteira
1. A largura e altura desta div são 100%, e a altura do elemento pai também é esta (e assim sucessivamente até o nó raiz), ou a posição desta div é absoluta;
2. Você pode usar js para definir dinamicamente a largura e a altura da página.
var height = window.innerHeight + 'px';//Obter a altura real da página var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; .estilo.largura=largura;
b, o controle de digitalização tem margens superiores e inferiores
O preenchimento com preto é usado para diluir a diferença visual, mas não foi realmente resolvido (se resolver deixe mensagem, obrigado)
ResumirA descrição acima é a função de digitalização de código QR implementada pelo HTML5 com base na estrutura MUI introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!