HTML5 abre a função de digitalização de código de telefone celular e suas vantagens e desvantagens

1. Capacidade de acessar a câmera no cliente Weibo para escanear o código QR e analisá-lo;

2. Capaz de escanear e analisar códigos QR em navegadores nativos e clientes WeChat;

O lado web ou o lado h5 podem concluir diretamente o trabalho de digitalização de código;

Se a imagem não estiver nítida, é fácil falhar na análise (tirar fotos para digitalizar a imagem requer que a lente esteja muito próxima do código QR. Em comparação com a chamada nativa, a análise da câmera terá um atraso de 1-). 2 segundos.

ilustrar:

Este plug-in precisa ser usado com zepto.js ou jQuery.js

1. Na página que deseja usar, insira os arquivos js no diretório lib na seguinte ordem

 <script src=lib/zepto.js></script> <script src=lib/qrcode.lib.min.js></script> <script src=lib/qrcode.js></script>

2. Personalize o estilo HTML do botão

Adicione um atributo personalizado para o botão personalizado, o nome do atributo é tipo de nó

Adicione um atributo personalizado ao botão de entrada, o nome do atributo é tipo de nó

Como o plug-in precisa usar <input type=file /> , a estrutura html tem um estilo de exibição fixo na página da web. Para personalizar o estilo do botão, podemos aninhar o código de acordo com a seguinte estrutura de código de exemplo.

 <div> <div class=qr-btn node-type=qr-btn>Escanear código QR 1 <input node-type=jsbridge type=nome do arquivo=myPhoto value=Escanear código QR 1 /> </div> </div >

Em seguida, defina o css do botão de entrada para ocultar o botão. Por exemplo, eu uso o seletor de atributos.

 input[node-type=jsbridge]{ display:none;}

Aqui só precisamos definir o estilo de class=qr-btn de acordo com nossas próprias necessidades.

3. Inicialize o objeto Qrcode na página

 //Inicialize o botão de leitura do código QR e passe o atributo de tipo de nó personalizado $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Análise de código principal

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } outro { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); } } } else { _this_.nativeReady(tempBtn) { Qrcode.prototype = { nativeReady: function(tempBtn) { $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); { $(this).find('input[node-type=jsbridge]').trigger('click' }); this.getImgFile); função(parâmetros) { //Obter o resultado da leitura do código QR $('.result-qrcode').append(params.result + '<br/>' }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); imgFile[0]; var oFReader = new FileReader(); /^(?:imagem//bmp|imagem//cis/-cod|imagem//gif|imagem//ief|imagem//jpeg|imagem//jpeg|imagem//jpeg|imagem//pipeg|imagem/ /png|imagem//svg/+xml|imagem//tiff|imagem//x/-cmu/-raster|imagem//x/-cmx|imagem//x/-i con|imagem//x/-portável/-anymap|imagem//x/-portável/-bitmap|imagem//x/-portável/-graymap|imagem//x/-portável/-pixmap|imagem//x /-rgb|imagem//x/-xbitmap|imagem//x/-xpixmap|imagem//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; if (!rFilter.test(oFile.type)) { alert(Escolha o formato de imagem correto!); .decode(oFREvent.target.result); qrcode.callback = função(dados) { //Obter o resultado da leitura do código QR $('.result-qrcode').append(data + '<br/>'); oFReader.readAsDataURL(oFile); { $( tempBtn).off('clique' } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

O texto acima é a função de digitalização de telefones celulares HTML5 e suas vantagens e desvantagens apresentadas 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!