Hoje, meu supervisor me fez uma solicitação, dizendo que preciso usar o desenvolvimento híbrido e usar o H5 para chamar a câmera local para escanear o código QR. Já fiz a leitura do código QR nativo do Android, principalmente chamando o plug-in zxing. Também tive um flash. Mas nunca tinha encontrado um H5 puro, então não sabia o que fazer, então fui para casa à noite e comecei a procurar soluções online. A seguir está meu entendimento e código de leitura de QR do H5. códigos e ligando para câmeras locais.
Site científico popular:
Como H5 gera objetos de componentes Android
H5 chama API de câmera local do Android
Gerador de imagem de código QR online
Digitalização de código QR: (usando a estrutura mui, o seguinte é o código html)
<!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=> <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 H5webapp</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--A div que contém 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> var height = window.innerHeight + 'px';//Obter a altura real da página var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid).style.width= width; scan = null;//Verificar objeto mui.plusReady(function () { //Inicializar varredura mui através de mui. init(); startRecognize() }); function startRecognize(){ //Ativar digitalização try{ var filter; #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); //Alerta pop-up de erro(e }; function onmarked( type, result ) { //Esta é a função de retorno de chamada para escanear o código QR, type é o tipo de retorno de chamada para escanear o código QR var text = ''; (type ){ //QR, EAN13 e EAN8 são todos formatos de codificação de códigos QR e resultado é o resultado retornado case plus.barcode.QR: text = 'QR: '; texto = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; text + : + result }; Identifique diretamente imagens de código QR plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(Incapaz de reconhecer esta imagem); }); },function(err){ plus.nativeUI.alert(Falha: +err.message } } </script> </body> </html>);A seguir está a estrutura do pacote: a ferramenta de desenvolvimento é hbuilder
A função mui.plusReady é principalmente para inicialização
startRecognize() é habilitar a função de leitura de códigos QR
onerror é uma mensagem de erro
onmarked é o ponto chave, é a função de retorno de chamada após a leitura do código QR, type é o tipo de reconhecimento do código QR e o resultado é o conteúdo do retorno de chamada do código QR.scanPicture() pode identificar diretamente imagens de códigos QR locais e analisá-las
H5 chama câmera local
<!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(); //String array, resolução da câmera suportada pela câmera var Resolutions = cam.supportedImageResolutions[0]; //Array de string, formatos de arquivo de foto suportados pela câmera var Formats = cam.supportedImageFormats[0]; //Chama o método photo //capturedFile, após a conclusão da foto, o endereço de armazenamento da foto cam. .captureImage( function(capturedfile){ //Alerta de fotografia bem sucedida(capturedfile); //Imprima}, function(){ //Falha na fotografia},{ //Formato dos parâmetros de fotografia: Formatos, índice: 1//1 representa a câmera principal, 2 representa a câmera auxiliar}); 0] ; //Chame o método de fotografia //capturedFile Após a conclusão da fotografia, o endereço de armazenamento da foto cam.captureImage(function(capturedFile){ //Foto tirada com sucesso alert(capturedFile); //Imprimi-la //Chama o método do sistema para obter a foto de acordo com o endereço da foto plus.io.resolvLocalFileSystemURL(capturedFile, //Função de retorno de chamada com sucesso //Função de informações relacionadas ao arquivo de entrada( entrada){ var img = document.createElement(img); img.src = entry.toLocalURL(); },function(){ //falha na função de retorno de chamada}); }); </script></head><body> <button onclick=getCamera()>Fotografia</button></body></html >mui.init(); é a inicialização do framework mui
O método getCamera() primeiro gera um objeto de câmera, depois tira uma foto e imprime o caminho da imagem gerada após tirar a foto.
ResumirO texto acima é a digitalização do código QR de desenvolvimento híbrido HTML5 e a chamada da câmera local apresentada 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!