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 ของปุ่มอินพุตเพื่อซ่อนปุ่ม ตัวอย่างเช่น ฉันใช้ตัวเลือกแอตทริบิวต์

 อินพุต [ประเภทโหนด = jsbridge] { จอแสดงผล: ไม่มี;}

ที่นี่เราเพียงแต่ต้องกำหนดรูปแบบของ 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); }); } } อื่น ๆ { _this_.nativeReady(tempBtn); } }; $('[node-type=jsbridge]',tempBtn).on('คลิก',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e) { $(this).find('input[node-type=jsbridge]').trigger('click'); }); $(tempBtn).bind('เปลี่ยน', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.inrigg('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; var oFile = imgFile[0]; var oFReader = ใหม่ FileReader(); var rFilter = /^(?: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|รูปภาพ//x/-พกพา/-anymap|รูปภาพ//x/-พกพา/-บิตแมป|รูปภาพ//x/-พกพา/-graymap|รูปภาพ//x/-พกพา/-pixmap|รูปภาพ//x /-rgb|รูปภาพ//x/-xbitmap|รูปภาพ//x/-xpixmap|รูปภาพ//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { alert(เลือกรูปแบบรูปภาพที่ถูกต้อง!); return; .decode(oFREvent.target.result); qrcode.callback = ฟังก์ชัน(ข้อมูล) { //รับผลลัพธ์จากการสแกนโค้ด QR $('.result-qrcode').append(data + '<br/>' }; oFReader.readAsDataURL(oFile); { $( tempBtn).off('click'); Qrcode.init = function(tempBtn) { var _this_ = สิ่งนี้; tempBtn.each(function() { new _this_($(this)); }); }; window.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);

ข้างต้นคือฟังก์ชันการสแกนโทรศัพท์มือถือ HTML5 รวมถึงข้อดีและข้อเสียที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความไว้ให้ฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!