يفتح HTML5 وظيفة مسح رمز الهاتف المحمول ومزاياها وعيوبها

1. القدرة على استدعاء الكاميرا على عميل Weibo لمسح رمز الاستجابة السريعة وتحليله؛

2. القدرة على مسح وتحليل رموز QR في المتصفحات الأصلية وعملاء WeChat؛

يمكن لجانب الويب أو جانب h5 إكمال أعمال مسح الكود مباشرة؛

إذا كانت الصورة غير واضحة، فمن السهل أن تفشل في التحليل (يتطلب التقاط الصور لمسح الصورة أن تكون العدسة قريبة جدًا من رمز الاستجابة السريعة مقارنة بالمكالمة الأصلية، سيكون لتحليل الكاميرا تأخير قدره 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 العقدة-نوع=qr-btn>مسح رمز الاستجابة السريعة 1 <نوع العقدة الإدخال=نوع jsbridge=اسم الملف=قيمة الصورة الخاصة بي=مسح رمز الاستجابة السريعة 1 /> </div> < /div >

ثم قم بتعيين CSS لزر الإدخال لإخفاء الزر، على سبيل المثال، أستخدم محدد السمات.

 الإدخال[node-type=jsbridge]{ العرض: لا شيء؛}

نحتاج هنا فقط إلى تحديد نمط الفئة=qr-btn وفقًا لاحتياجاتنا الخاصة.

3. قم بتهيئة كائن Qrcode على الصفحة

 // تهيئة زر مسح رمز الاستجابة السريعة وتمرير سمة نوع العقدة المخصصة $(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) } }; $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e) { $(this).find('input[node-type=jsbridge]').trigger('click' }); this.getImgFile); }, BridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.invoc('scanQRCode', null, وظيفة (المعاملات) { // احصل على نتيجة مسح رمز الاستجابة السريعة $('.result-qrcode').append(params.result + '<br/>' }); getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; var oFile = imgFile[0]; var oFReader = new FileReader(); /^(?:image//bmp|image//cis/-cod|image//gif|image//ief|image//jpeg|image//jpeg|image//jpeg|image//pipeg|image/ /png|image//svg/+xml|image//tiff|image//x/-cmu/-raster|image//x/-cmx|image//x/-i con|image//x/-portable/-anymap|image//x/-portable/-bitmap|image//x/-portable/-graymap|image//x/-portable/-pixmap|image//x /-rgb|image//x/-xbitmap|image//x/-xpixmap|image//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { تنبيه (اختر تنسيق الصورة الصحيح!) return; .decode(oFREvent.target.result); qrcode.callback = function(data) { // احصل على نتيجة مسح رمز الاستجابة السريعة $('.result-qrcode').append(data + '<br/>'); oFReader.readAsDataURL(oFile }, destory: function()); { $( tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

ما ورد أعلاه هو وظيفة فحص الهاتف المحمول بتنسيق HTML5 ومزاياها وعيوبها التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!