ในบริษัท ฉันเข้าร่วมในโครงการพัฒนาแบบผสมผสานของ Native APP และ h5 ฉันรับผิดชอบในส่วน h5 ของโครงการ ฉันจะสรุปปัญหาที่พบในโครงการดังนี้:
คำถามเฉพาะ คำถามที่ 1: ปัญหาแถบเลื่อนหน้าคำอธิบายปัญหา
หน้าเว็บมีแถบเลื่อนเมื่อเรียกดูบนเบราว์เซอร์พีซี แต่เมื่อเปิดบนเบราว์เซอร์มือถือ จะไม่มีแถบเลื่อน
สารละลาย
ตั้งค่าเลเยอร์นอกสุดของหน้า (เมื่อฉันเขียนหน้า ฉันมักจะเขียนคอนเทนเนอร์ขนาดใหญ่ในแท็ก body เพื่อจัดเก็บเนื้อหาของหน้า) ตั้งค่า overflow:auto/scroll; และไม่สามารถตั้งค่าของแอตทริบิวต์ height ( ส่วนสูง:100% ไม่มีทางเช่นกัน)
ตัวอย่าง
<body> <div style=overflow:scroll/auto;> //เนื้อหาเว็บเพจ</div></body>คำถามที่ 2: การใช้เหตุการณ์ touchstart และ touchend
คำอธิบายปัญหา
เมื่อมีการเปิดตัวไฟล์ touch.js และใช้เหตุการณ์ touchstart และ touchend เพื่อให้ได้เอฟเฟกต์แบบโต้ตอบ ปัญหาของเหตุการณ์ที่ทำให้เกิดความล้มเหลวจะเกิดขึ้นบนโทรศัพท์มือถือบางรุ่น [เช่น โทรศัพท์มือถือ Honor รุ่นต่ำ]
สารละลาย
วิธีที่ 1: ใช้ RemoveEventListener และ addEventListener ร่วมกัน
วิธีที่ 2: เพิ่ม e.preventDefault(); เพื่อป้องกันไม่ให้โทรศัพท์มือถือบางรุ่นกระโดดตามค่าเริ่มต้น
วิธีที่ 3: Jquery's ดำเนินการเชื่อมโยงเหตุการณ์
หมายเหตุ: วิธีที่ 1 และวิธีที่ 2 เป็นทั้ง JS ดั้งเดิมที่ใช้ addEventListener เพื่อใช้งานการฟังเหตุการณ์ และเมื่อองค์ประกอบ dom ใช้เหตุการณ์ touchstart และ touchend จะต้องใช้ร่วมกับการเชื่อมโยงเหตุการณ์หรือการฟังเหตุการณ์ มิฉะนั้นส่วน js จะส่ง ข้อยกเว้น
รหัส
//วิธีที่ 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend', โทรกลับ, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//วิธีที่ 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. ป้องกันค่าเริ่มต้น();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); คำถามที่ 3: ปัญหาข้อขัดข้องในการกดแบบยาวการฟื้นฟูสถานการณ์
มีหน้ารายการ XXX เมื่อกดรายการบนหน้ารายการค้างไว้ (ข้อความสัมผัส) จะเกิดการขัดข้องบนโทรศัพท์มือถือรุ่นต่ำกว่า
สารละลาย
ส่วน js: เพิ่ม e.preventDefault(); เมื่อเหตุการณ์ถูกทริกเกอร์เพื่อป้องกันพฤติกรรมเริ่มต้น
ส่วน css: เพิ่มโค้ดที่ห้ามการคัดลอกข้อความ
รหัส
// ส่วน js: e.preventDefault (); // ส่วน css: -webkit-touch-callout: none; // วิธีแก้ปัญหาที่จะขัดข้อง // ปิดการใช้งานการคัดลอก -moz-user-select: none;-khtml-user-select: ไม่มี; ผู้ใช้เลือก: ไม่มี;คำถามที่ 4: ปัญหากับ 1px บนเทอร์มินัลมือถือ
คำอธิบายปัญหา
เนื่องจากโทรศัพท์แต่ละรุ่นมีความหนาแน่นของพิกเซลต่างกัน 1px ใน CSS จึงไม่เท่ากับ 1px บนอุปกรณ์เคลื่อนที่ ในโปรเจ็กต์นี้ js และ rem ใช้สำหรับการปรับหน้าจอมือถือ ดังนั้นจึงเกิดสถานการณ์ 0.5px ส่งผลให้โทรศัพท์มือถือเวอร์ชันต่ำกว่าไม่สามารถแสดงเส้นขอบ 0.5px ได้
สารละลาย
ใช้ css เพื่อแก้ปัญหา 1px และเขียน: border-width:1px; ไปยังองค์ประกอบ dom ที่ต้องตั้งค่าเป็น 1px โดยตรง
รหัส
//ส่วน HTML: <div class='class1'></div>//css part: .class1{ border: 1px solid #ccc;}//css part/*ปัญหาของการแสดงผลปกติของ 1px บนเทอร์มินัลมือถือ start*/% border-1px{ display: block; position:absolute; left: 0; ความกว้าง: 100%; %border-1px; ด้านล่าง: 0; border-top: 1px solid #ccc; webkit-ขั้นต่ำ-อุปกรณ์พิกเซล-อัตราส่วน:1.5),(ขั้นต่ำ-อุปกรณ์พิกเซล-อัตราส่วน:1.5){ .border-1px{ &::after{ -webkit-transform: scaleY(0.7); แปลง: scaleY(0.7); :2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); แปลงร่าง: scaleY(0.5); }}/*ปัญหาการแสดงผลปกติขนาด 1px บนเทอร์มินัลมือถือ*/ ปัญหาที่ 5: js ไม่สามารถแยกวิเคราะห์ค่าพารามิเตอร์ของ url ที่มีเครื่องหมาย = ได้อย่างถูกต้องคำอธิบายปัญหา
ในโปรเจ็กต์ เนื่องจากค่าพารามิเตอร์ของคำขอข้อมูลได้มาจากที่อยู่ url และค่าพารามิเตอร์มีเครื่องหมาย = จึงไม่สามารถแยกวิเคราะห์ค่าพารามิเตอร์ได้อย่างถูกต้อง (ps:js ใช้เครื่องหมาย = เพื่อแยกพารามิเตอร์ของ url )
สารละลาย
แปลงรหัส URL แล้วถอดรหัส [ในโครงการนี้ APP จะให้ที่อยู่ URL ที่แปลงรหัสและส่วนหน้าใช้ปลั๊กอิน geturlparams เพื่อรับค่าพารามิเตอร์ของที่อยู่ URL]
รหัส
//Decoding = number dom.token = decodeURI($.query.get(token)); //Plug-in //รับค่าโดยไม่ต้องถอดรหัส dom.msgid = $.query.get(msgid);คำถามที่ 6: การฟังเหตุการณ์ Native js และการเชื่อมโยงเหตุการณ์ jquery ไม่ถูกต้องใน iOS
คำอธิบายปัญหา
เมื่อใช้การฟังเหตุการณ์หรือการเชื่อมโยงเหตุการณ์ เหตุการณ์ที่ทริกเกอร์ใน iOS จะไม่ถูกต้องเนื่องจากองค์ประกอบหลักเลือกองค์ประกอบเนื้อหาหรือเอกสาร
สารละลาย
อย่าใช้องค์ประกอบเนื้อหาและเอกสารเป็นองค์ประกอบหลัก
คำถามที่ 7: วันที่แสดงเป็น NaN ใน iOSคำอธิบายปัญหา
รูปแบบวันที่ของ Date มีปัญหาความเข้ากันได้ใน iOS วันที่ใน iOS จะแสดงเป็น: NaN
สารละลาย
วิธีแก้ไข: 26/12/2560 19:36:00 รองรับ iOS แต่ไม่รองรับรูปแบบ 2017-12-26 19:36:00 รูปแบบหลังแสดง Nan ใน iOS (สามารถแสดงผลได้ตามปกติใน Android)
รหัส
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//แปลง '-' ในรูปแบบเวลาเป็นรูปแบบ '/' เข้ากันได้กับ iOSคำถามที่ 8: มีปัญหากับเหตุการณ์การคลิกใน iOS
คำอธิบายปัญหา
เมื่อเหตุการณ์การคลิกถูกกระตุ้นโดยการคลิกของ iOS โมดูลองค์ประกอบหลักของการมอบหมายกิจกรรมจะถูกเลือก [นั่นคือ เนื่องจากเหตุการณ์เดือดปุด ๆ และพาเรนต์มีสไตล์เริ่มต้น] และจะมีเลเยอร์โปร่งใส เป็นต้น
<ul> <li>รายการที่ 1</li> <li>รายการที่ 2</li> <li>รายการที่ 3</li></ul>
การวิเคราะห์: ตัวอย่างเช่น เมื่อผู้ใช้ iOS คลิกรายการ 1 UL ของเลเยอร์หลักจะมีรูปแบบโปร่งใส
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network