กรณีการใช้งานบาร์โค้ด
1. บทนำโมดูลบาร์โค้ดจัดการการสแกนบาร์โค้ดและมีฟังก์ชันการสแกนและการระบุบาร์โค้ดทั่วไป (รหัส QR และรหัสหนึ่งมิติ) โดยสามารถเรียกกล้องของอุปกรณ์เพื่อสแกนภาพบาร์โค้ดเพื่อป้อนข้อมูลได้ ออบเจ็กต์การจัดการบาร์โค้ดสามารถรับได้ผ่าน plus.barcode
2. ได้ผลสำเร็จ 3. ติดตั้งโค้ด <!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,ขนาดสูงสุด=1,ผู้ใช้ปรับขนาดได้=ไม่ /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; พื้นหลัง: #000000; } html, เนื้อหา { ความสูง:100%; ความกว้าง: 100%; } .fbt{ สี: #0E76E1; ความกว้าง: 50%; #ffffff; float: left; line-height: 44px; text-align: center; } </style> </head> <body> <header class=mui-bar-nav style=พื้นหลัง-สี: # ffffff;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>การสแกนรหัส QR รายการ</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--div ถือการควบคุมการสแกน--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>เลือกรหัส QR จากอัลบั้ม</div> <div class=fbt mui-action-back>ยกเลิก</div> </div> <script type=text/javascript> สแกน = null; //สแกนวัตถุ mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ try{ var filter; //Customized scan control style var styles = {frameColor: #29E52C,scanbarColor: #29E52C,พื้นหลัง: } // สแกนโครงสร้างการควบคุม = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; ; scan.start(); //เปิดและปิดการประมวลผลแฟลช var flag = false; document.getElementById(turnTheLight).addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); }catch(e){ alert(เกิดข้อผิดพลาด:/n+e); } }; onmarked( ประเภท, ผลลัพธ์ ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; case plus.barcode.EAN8: text = 'EAN8: '; } การแจ้งเตือน ( text + : + result ) }; plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(ภาพนี้ไม่รู้จัก); }); },function(err){ plus . NativeUI.alert(ล้มเหลว: +err.message); }); } </script> </body> </html> 3. ปัญหาที่พบในระหว่างกระบวนการก, div กินทั้งหน้า
1. ความกว้างและความสูงของ div นี้คือ 100% และความสูงขององค์ประกอบหลักก็เป็นเช่นนี้ (และต่อ ๆ ไปจนกระทั่งถึงโหนดรูท) หรือตำแหน่งของ div นี้เป็นค่าสัมบูรณ์
2. คุณสามารถใช้ js เพื่อตั้งค่าความกว้างและความสูงของหน้าแบบไดนามิก
var height = window.innerHeight + 'px';//รับความสูงที่แท้จริงของหน้า var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; document.getElementById(bcid) .style.width=ความกว้าง;
b ตัวควบคุมการสแกนมีระยะขอบบนและล่าง
การเติมสีดำใช้เพื่อเจือจางความแตกต่างของการมองเห็นแต่ยังไม่ได้รับการแก้ไขจริง (หากแก้ปัญหาได้โปรดฝากข้อความไว้ขอบคุณ)
สรุปข้างต้นคือฟังก์ชันการสแกนโค้ด QR ที่ใช้งานโดย HTML5 ตามเฟรมเวิร์ก MUI ที่โปรแกรมแก้ไขแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!