วิธีเรียกใช้แอปใน html5

เป็นเรื่องปกติที่ h5 จะทำให้เกิดความต้องการนี้ในแอป ในยุคที่อุปกรณ์เคลื่อนที่เป็นราชา h5 มีบทบาทสำคัญในการเปลี่ยนเส้นทางการรับส่งข้อมูลของแอป

วิธีการเรียกใช้ที่เราใช้อยู่ในปัจจุบันคือ Scheme URL (รองรับทั้งแพลตฟอร์ม iOS และ Android) คุณจะต้องลงทะเบียน Scheme ในระหว่างการพัฒนา APP แบบเนทีฟเท่านั้น จากนั้นเมื่อผู้ใช้คลิกที่ลิงก์ดังกล่าว ผู้ใช้จะข้ามไปที่ APP โดยอัตโนมัติ

ไอเฟรม

 var สุดท้าย = Date.now(), doc = window.document, ifr = doc.createElement('iframe');//สร้าง iframe ที่ซ่อนอยู่ ifr.src = NativeUrl;ifr.style.cssText = 'display:none;border :0;width:0;height:0;';doc.body.appendChild(ifr);setTimeout(function() { doc.body.removeChild(ifr); //setTimeout น้อยกว่า 2000 โดยทั่วไปคือการโทรล้มเหลว if (Date.now() - Last < 2000) { if (typeof onFail == 'function') { onFail( } else { // ป๊อปอัปแจ้งหรือกำลังดาวน์โหลด ฯลฯ } } else { if (typeof onSuccess == 'function') { onSuccess(); 1,000);

หลักการเรียกใช้โซลูชัน iframe คือ: เมื่อโปรแกรมสลับไปที่พื้นหลัง ตัวจับเวลาจะล่าช้า (อีกสถานการณ์หนึ่งที่ตัวจับเวลาไม่ถูกต้อง) หากแอปถูกปลุกขึ้นมา หน้าเว็บจะเข้าสู่พื้นหลังอย่างหลีกเลี่ยงไม่ได้ หากผู้ใช้เปลี่ยนกลับจากแอป โดยทั่วไปเวลาจะเกิน 2 วินาที หากแอปไม่ตื่นขึ้น หน้าเว็บจะไม่เข้าสู่พื้นหลัง เวลาและเวลาจะไม่เกิน 2 วินาที

window.location.href กระโดดโดยตรง

 window.location.href = NativeUrl;

แท็กกระตุ้น

 <a href=nativeUrl>เพิกถอนแอป</a>

การทดสอบเบราว์เซอร์ของสถานการณ์การเรียกใช้สามสถานการณ์

1. X หมายถึงการเร้าอารมณ์ล้มเหลว √ หมายความว่าการเร้าอารมณ์สำเร็จ
2. เครื่องหมายสีแดงบ่งบอกว่าจะปรากฏขึ้นโดยตรงหลังจากเข้าสู่หน้า และเครื่องหมายสีเขียวบ่งชี้ว่าจะปรากฏขึ้นหลังจากการดำเนินการเหตุการณ์ด้วยตนเอง
3. เครื่องทดสอบ iOS: iPhone 6p; เครื่องทดสอบ Android: Xiaomi 1s

iframe กระตุ้นให้เกิดผลการทดสอบแอป

window.location.href กระตุ้นให้เกิดผลการทดสอบแอป

แท็กทำให้เกิดผลการทดสอบแอป

iframe และ window.location.href ทำให้เกิดความแตกต่าง

iframe, window.location.href และแท็กทำให้เกิดการเปรียบเทียบระหว่างทั้งสาม

ประการแรก รุ่นและเบราว์เซอร์ที่ทดสอบนั้นมีจำกัด และผลลัพธ์ข้างต้นมีไว้เพื่อการอ้างอิงเท่านั้น

เมื่อเปรียบเทียบ iframe evocation และ location.href เราจะพบ:

1. สำหรับ iOS การกระโดด location.href มีความเหมาะสมมากกว่า เนื่องจากวิธีนี้สามารถเรียกใช้แอปใน Safari ได้สำเร็จ ไม่จำเป็นต้องพูดว่าความสำคัญของ Safari ในฐานะเบราว์เซอร์เริ่มต้นสำหรับ iPhone แต่สำหรับลูกค้า WeChat และ QQ วิธีการทั้งสองนี้ใน iOS นั้นไร้ประโยชน์==
2. สำหรับ Android เมื่อมีการเรียกใช้เพจโดยตรง iframe และ location.href จะเหมือนกัน แต่ถ้าเป็นแบบขับเคลื่อนด้วยเหตุการณ์ iframe จะกระตุ้นได้ดีกว่า location.href
3. จากการทดสอบ พบว่าสำหรับเบราว์เซอร์จำนวนมาก ประสิทธิภาพของการเรียกใช้โดยตรงเมื่อเข้าสู่เพจและการเรียกใช้ตามเหตุการณ์จะแตกต่างกัน

จากการวิเคราะห์เปรียบเทียบข้างต้น การใช้ iframe สำหรับ Android และ window.location.href สำหรับ iOS เหมาะสมกว่า

ความแตกต่างระหว่างการเรียกโดยตรงและการเรียกตามเหตุการณ์เมื่อเข้าสู่หน้า

มีความแตกต่างที่ชัดเจนระหว่างสถานการณ์เร้าอารมณ์ทั้งสองนี้ใน Android ไม่ว่าจะเกิดขึ้นโดย iframe หรือ location.href ให้ใช้ Chrome ของ Xiaomi 1s เป็นตัวอย่าง:

 <a id=goApp href=javascript:void(0);>คลิกฉันเพื่อเปิดแอป</a>

การเชื่อมโยงเหตุการณ์กระตุ้นการดึงข้อมูลด้วยตนเอง:

 // ปรากฏสำเร็จ window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = NativeUrl; });};

เข้าสู่หน้าเพื่อเรียกใช้โดยตรง:

 //การเรียกคืนล้มเหลว window.onload = function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = NativeUrl;};

ผูกเหตุการณ์ js ทำให้เกิด

 //การเรียกคืนล้มเหลว window.onload = function () { $('#goApp').on(คลิก, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = NativeUrl; }); $('#goApp).trigger('คลิก');};

เดิมที ฉันคิดว่าวิธีการของ $('#goApp).trigger('click'); นั้นเหมือนกับการคลิกด้วยตนเอง แต่ประสิทธิภาพที่แท้จริงคือประสิทธิภาพของเหตุการณ์ที่ทริกเกอร์ js นั้นไม่ถูกต้องเท่ากับการข้ามหน้าโดยตรง

จากโพสต์ในบล็อกอ้างอิง เราจะเห็นว่าแพลตฟอร์ม Android และผู้ผลิตแอปต่างๆ แตกต่างกันมาก ตัวอย่างเช่น Chrome ไม่รองรับการเรียกใช้รูปแบบการเรียกใช้ js (การคลิกที่ไม่ใช่ของผู้ใช้) การตั้งค่าที่อยู่ iframe src เป็นต้น จาก 25 และ เป็นต้นไป ดังนั้น ยังคงมีความแตกต่างอย่างมากระหว่างการเรียกใช้ js และการคลิกของผู้ใช้โดยตรง ซึ่งอาจคล้ายกับข้อจำกัดในการเล่นเสียง

หลังจากการทดสอบและวิเคราะห์ข้างต้น มีการพิจารณาโดยทั่วไปว่าควรใช้ window.location.href สำหรับ iOS และ iframe สำหรับ Android เหมาะสมกว่า เมื่อเราใช้ iframe เพื่อกระตุ้น เรามักจะจัดการกับความล้มเหลวของการเรียกใช้โดยการดาวน์โหลดโดยตรง อย่างไรก็ตาม มีปัญหาคือ เบราว์เซอร์ไม่สามารถตรวจพบได้ว่าการเรียกใช้สำเร็จหรือไม่ นั่นคือ ถ้าฉันกลับไปที่เบราว์เซอร์หลังจาก การเรียกคืนสำเร็จ เบราว์เซอร์จะยังคงปรากฏขึ้น ประสบการณ์การดาวน์โหลดข้อมูลแย่มาก แน่นอนว่า เรายังจำเป็นต้องจัดการกับฟังก์ชันการเรียกกลับที่สำเร็จหรือล้มเหลว บางทีสถานการณ์ของเราอาจจำเป็นต้องถูกเรียกใช้เท่านั้น และไม่จำเป็นต้องดาวน์โหลดหลังจากล้มเหลว

สำหรับการใช้ location.href เพื่อเรียกใช้แอปแบบเนทีฟบน iPhone วิธีการข้ามไปยังหน้ากลางอาจดีกว่าการประมวลผลโดยตรงของหน้าปัจจุบัน

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network