HTML5 открывает функцию сканирования кода мобильного телефона, ее преимущества и недостатки.

1. Возможность вызвать камеру в клиенте Weibo для сканирования QR-кода и его анализа;

2. Возможность сканировать и анализировать QR-коды в собственных браузерах и клиентах WeChat;

Веб-сторона или сторона h5 могут напрямую выполнять работу по сканированию кода;

Если картинка нечеткая, ее легко не разобрать (для съемки для сканирования картинки необходимо, чтобы объектив находился очень близко к QR-коду. По сравнению с родным звонком, разбор камеры будет иметь задержку 1-). 2 секунды.

проиллюстрировать:

Этот плагин необходимо использовать с zepto.js или jQuery.js.

1. На странице, которую необходимо использовать, добавьте файлы js в каталог lib в следующем порядке.

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

2. Настройте HTML-стиль кнопки.

Добавьте настраиваемый атрибут для настраиваемой кнопки, имя атрибута — тип узла.

Добавьте пользовательский атрибут к кнопке ввода, имя атрибута — тип узла.

Поскольку плагин должен использовать <input type=file /> , структура html имеет фиксированный стиль отображения на веб-странице. Чтобы настроить стиль кнопки, мы можем вложить код в соответствии со следующим примером структуры кода.

 <div> <div class=qr-btn node-type=qr-btn>Сканировать QR-код 1 <input node-type=jsbridge type=file name=myPhoto value=Сканировать QR-код 1 /> </div> </div >

Затем установите CSS кнопки ввода, чтобы скрыть кнопку. Например, я использую селектор атрибутов.

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

Здесь нам нужно только определить стиль class=qr-btn в соответствии с нашими потребностями.

3. Инициализируйте объект Qrcode на странице.

 //Инициализируем кнопку сканирования QR-кода и передаем пользовательский атрибут типа узла $(function() { Qrcode.init($('[node-type=qr-btn]')); });

Основной анализ кода

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn) ); } еще { 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(); }); $(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', null, функция (параметры) { //Получаем результат сканирования 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]; вар oFReader = новый FileReader (); /^(?:image//bmp|image//cis/-cod|image//gif|image//ief|image//jpeg|image//jpeg|image//jpeg|image//pipeg|image/ /png|изображение//svg/+xml|изображение//tiff|изображение//x/-cmu/-raster|изображение//x/-cmx|изображение//x/-i con|image//x/-portable/-anymap|image//x/-portable/-bitmap|image//x/-portable/-graymap|image//x/-portable/-pixmap|image//x /-rgb|изображение//x/-xbitmap|изображение//x/-xpixmap|изображение//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { alert(Выберите правильный формат изображения! } oFReader.onload = function(oFREvent) { qrcode .decode(oFREvent.target.result); qrcode.callback = функция (данные) { //Получаем результат сканирования QR-кода $('.result-qrcode').append(data + '<br/>' }; oFReader.readAsDataURL(oFile }, destory: function()); { $(tempBtn).off('click'); } }; Qrcode.init = функция (tempBtn) {var _this_ = this; tempBtn.each(function() {new _this_($(this)); }); window.Qrcode = Qrcode;})(window.Zepto ? Zepto: jQuery);

Выше описана функция сканирования мобильного телефона HTML5, а также ее преимущества и недостатки, представленные редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!