ในการพัฒนาบัญชีสาธารณะ WeChat บางครั้งจำเป็นต้องสกัดกั้นและประมวลผลตรรกะของเพจที่เกี่ยวข้องกับปุ่มย้อนกลับที่มุมซ้ายบนของเบราว์เซอร์ แทนที่จะปล่อยให้เพจกลับไปยังเพจก่อนหน้าโดยตรง ดำเนินการเป็นอย่างดีมาก่อน อย่างไรก็ตาม ฉันเห็นว่าผลลัพธ์ในบัญชีอย่างเป็นทางการของ JD Shopping นั้นดีมาก ดังนั้นฉันจึงเริ่มลองด้วยตัวเอง ผลกระทบของ JD.com มีดังนี้:
เมื่อพิจารณาจากเอฟเฟกต์การช็อปปิ้งของ Jingdong ในภาพด้านบน การคลิกที่การค้นหาจะแสดงอินเทอร์เฟซการค้นหา จากนั้นคลิกที่มุมซ้ายบนเพื่อกลับมา เพียงปิดอินเทอร์เฟซการค้นหา แต่หน้าจะไม่กลับมาเหมือนการอ่านแถบความคืบหน้าอีกครั้ง และเพจของฉันต้องการ มันคือเอฟเฟกต์นี้ มาใช้ vue เพื่อสาธิตกระบวนการนี้กันดีกว่า
สถานที่: ปุ่มย้อนกลับที่มุมซ้ายบนของ WeChat ไม่สามารถดักจับได้ แต่สามารถตรวจสอบเหตุการณ์การส่งคืนได้
แนวคิด: หากคุณต้องการสกัดกั้นเหตุการณ์การส่งคืนอย่างแท้จริง คุณสามารถเพิ่มบันทึกลงใน window.history บนหน้าปัจจุบันก่อนได้ (จริงๆ แล้วเพียงเพิ่มบันทึก pushState ลงในสแต็กประวัติ เบราว์เซอร์จะไม่โหลดเส้นทางนี้จริง ๆ ) เมื่อคุณ คลิกเพื่อย้อนกลับ ฟังเหตุการณ์การส่งคืนและประมวลผลตรรกะที่คุณต้องการดำเนินการ อย่างไรก็ตาม WeChat จะต้องดำเนินการส่งคืน บันทึกที่เพิ่งเพิ่มจะถูกนำออกจาก window.history และเส้นทางนี้จะแทนที่เส้นทางหน้าปัจจุบัน หมายเหตุ: นี่เป็นเพียงการแทนที่เส้นทาง เพียงเปลี่ยนชื่อเส้นทางและไม่ได้โหลดเส้นทางจริง
การนำไปปฏิบัติ: สองเพจ vue (หน้าแรกและสอง) ถูกสร้างขึ้นในการสาธิต และหน้าแรกจะข้ามไปยังหน้าที่สอง จากนั้นเลเยอร์มาสก์จะปรากฏขึ้นบนหน้าที่ 2 เมื่อคุณคลิกที่มุมซ้ายบนเพื่อย้อนกลับ เลเยอร์มาสก์จะไม่กลับไปที่หน้าแรก แต่เลเยอร์มาสก์จะหายไปก่อน เมื่อคุณคลิกกลับอีกครั้ง คุณจะกลับไปยังหน้าก่อนหน้า
ผลกระทบมีดังนี้:
คำอธิบายรหัสที่เกี่ยวข้อง:1 เพิ่มวิธีการเมานต์ของเพจที่สองและเพิ่มวิธีการฟังเหตุการณ์การส่งคืน เมื่อคลิกปุ่มย้อนกลับ หน้ากากป๊อปอัปจะถูกซ่อน
mount() { la that = this; // เพิ่ม return event Listener window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },2. ตรวจสอบเลเยอร์การมาสก์และเพิ่มบันทึกลงใน window.history (สแต็กประวัติ) เมื่อปรากฏขึ้น
ดู: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // แก้ไขประวัติ var state = { title: , url: /two / / URL นี้สามารถกรอกแบบไม่เป็นทางการเพียงเพื่อป้องกันไม่ให้ที่อยู่ URL ที่แสดงโดยเบราว์เซอร์เปลี่ยนแปลงและไม่มีผลกับหน้า}; window.history.pushState(state, state.title, state.url); -3. หากผู้ใช้คลิกการดำเนินการที่เกี่ยวข้องบนเลเยอร์ที่มาสก์เพื่อปิดเลเยอร์ที่มาสก์ เขาหรือเธอจะต้องลบเรกคอร์ดที่เขาเพิ่มออกจากประวัติด้วยตนเองและกลับเส้นทางใน Vue
helloClick() { // คลิกที่ป๊อปอัป hello mask this.isShowTestDiv = false; this.$router.back(); // ลบบันทึกที่เพิ่มออกจากประวัติ}ที่อยู่สาธิต
gitHub:https://github.com/LiJinShi/wechat_back_vue
สรุปด้านบนคือฟังก์ชันการบล็อกปุ่มย้อนกลับที่มุมซ้ายบนของเบราว์เซอร์ WeChat ที่โปรแกรมแก้ไขแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!