HTML5 abre la función de escaneo de códigos de teléfonos móviles y sus ventajas y desventajas

1. Posibilidad de activar la cámara en el cliente Weibo para escanear el código QR y analizarlo;

2. Capaz de escanear y analizar códigos QR en navegadores nativos y clientes WeChat;

El lado web o el lado h5 pueden completar directamente el trabajo de escaneo del código;

Si la imagen no es clara, es fácil fallar en el análisis (tomar fotografías para escanear la imagen requiere que la lente esté muy cerca del código QR, en comparación con la llamada nativa, el análisis de la cámara tendrá un retraso de 1-). 2 segundos.

ilustrar:

Este complemento debe usarse con zepto.js o jQuery.js

1. En la página que desea utilizar, introduzca los archivos js en el directorio lib en el siguiente orden

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

2. Personaliza el estilo html del botón.

Agregue un atributo personalizado para el botón personalizado, el nombre del atributo es tipo de nodo

Agregue un atributo personalizado al botón de entrada, el nombre del atributo es tipo de nodo

Debido a que el complemento necesita usar <input type=file /> , la estructura html tiene un estilo de visualización fijo en la página web. Para personalizar el estilo del botón, podemos anidar el código de acuerdo con la siguiente estructura de código de muestra.

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

Luego configure el CSS del botón de entrada para ocultar el botón. Por ejemplo, uso el selector de atributos.

 entrada[tipo-nodo=jsbridge]{ pantalla:ninguno;}

Aquí solo necesitamos definir el estilo de class=qr-btn según nuestras propias necesidades.

3. Inicialice el objeto Qrcode en la página.

 //Inicializa el botón de escaneo de código QR y pasa el atributo de tipo de nodo personalizado $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Análisis del código principal.

 (función ($) { var Qrcode = función (tempBtn) { var _this_ = esto; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } demás { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn); Qrcode.prototype = { nativoReady: function(tempBtn) { $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e) { $(this).find('input[node-type=jsbridge]').trigger('click' }); $(tempBtn).bind('change', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', nulo, función (parámetros) { //Obtener el resultado del escaneo del código QR $('.result-qrcode').append(params.result + '<br/>'); getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; imgFile[0]; var oFReader = nuevo FileReader(); /^(?:imagen//bmp|imagen//cis/-cod|imagen//gif|imagen//ief|imagen//jpeg|imagen//jpeg|imagen//jpeg|imagen//pipeg|imagen/ /png|imagen//svg/+xml|imagen//tiff|imagen//x/-cmu/-raster|imagen//x/-cmx|imagen//x/-i con|image//x/-portable/-anymap|image//x/-portable/-bitmap|image//x/-portable/-graymap|image//x/-portable/-pixmap|image//x /-rgb|imagen//x/-xbitmap|imagen//x/-xpixmap|imagen//x/-xwindowdump)$/i; if (imgFile.length === 0) { return } if (!rFilter.test(oFile.type)) { alerta(¡Elija el formato de imagen correcto! } oFReader.onload = function(oFREvent) { qrcode; .decode(oFREvent.target.result); qrcode.callback = función(datos) { //Obtener el resultado del escaneo del código QR $('.result-qrcode').append(data + '<br/>' } }; { $( tempBtn).off('hacer clic'); Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); } }); ventana.Qrcode = Qrcode;})(ventana.Zepto? Zepto: jQuery);

Lo anterior es la función de escaneo de teléfonos móviles HTML5 y sus ventajas y desventajas presentadas 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!