في تطوير حسابات WeChat العامة، في بعض الأحيان يكون من الضروري اعتراض ومعالجة منطق الصفحة المتعلق بزر العودة في الزاوية اليسرى العليا من المتصفح، بدلاً من السماح للصفحة بالعودة مباشرة إلى الصفحة السابقة نفذت بشكل جيد للغاية من قبل. ومع ذلك، رأيت أن النتائج على الحساب الرسمي لـ JD Shopping كانت جيدة جدًا، لذلك بدأت في تجربة ذلك بنفسي. تأثير JD.com هو كما يلي:
انطلاقًا من تأثير التسوق Jingdong في الصورة أعلاه، يؤدي النقر فوق بحث إلى ظهور واجهة بحث، ثم النقر فوق الزاوية اليسرى العليا للعودة، فهو يؤدي فقط إلى إغلاق واجهة البحث، لكن الصفحة لا تعود مثل قراءة شريط التقدم مرة أخرى ، وتحتاج صفحتي إلى هذا التأثير، فلنستخدم vue لعمل عرض توضيحي لهذه العملية.
الفرضية: لا يمكن اعتراض زر العودة الموجود في الزاوية اليسرى العليا من WeChat، ولكن يمكن مراقبة حدث العودة.
الفكرة: إذا كنت تريد اعتراض حدث الإرجاع حقًا، فيمكنك أولاً إضافة سجل إلى window.history في الصفحة الحالية (في الواقع فقط قم بإضافة سجل PushState إلى مكدس المحفوظات، ولن يقوم المتصفح فعليًا بتحميل هذا المسار)، عندما انقر للعودة، واستمع إلى حدث الإرجاع وقم بمعالجة المنطق الذي تريد معالجته. على أي حال، يجب على WeChat تنفيذ الإرجاع. سيتم إخراج السجل الذي تمت إضافته للتو من window.history وسيحل هذا المسار محل مسار الصفحة الحالية. ملاحظة: هذا مجرد استبدال للمسار، فهو يغير اسم المسار فقط ولا يقوم بتحميل المسار فعليًا.
التنفيذ: يتم إنشاء صفحتين vue (الأولى والاثنتين) في العرض التوضيحي، وتنتقل الصفحة الأولى إلى الصفحة الثانية. ثم تنبثق طبقة قناع في الصفحة الثانية، وعندما تنقر على الزاوية اليسرى العليا للعودة، فإنها لا تعود إلى الصفحة الأولى، ولكن تختفي طبقة القناع أولاً.
التأثير هو كما يلي:
شرح الكود ذو الصلة:1 أضف إلى الطريقة المحملة للصفحة الثانية وأضف طريقة للاستماع إلى حدث الإرجاع. عند النقر على زر العودة، يكون القناع المنبثق مخفيًا؛
mount() { Let that = this; // إضافة مستمع حدث الإرجاع window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false });2. راقب طبقة التقنيع وأضف سجلاً إلى window.history (مكدس المحفوظات) عند عرضه؛
watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory() } } } PushHistory() { // تعديل السجل varstate = { title: , url: /two /; / يمكن ملء عنوان URL هذا بشكل عرضي، فقط لمنع تغيير عنوان URL الذي يعرضه المتصفح، وليس له أي تأثير على الصفحة}; },3. إذا قام المستخدم بالنقر فوق العملية ذات الصلة على الطبقة المقنعة لإغلاق الطبقة المقنعة، فيجب عليه إزالة السجل الذي أضافه من السجل يدويًا وإعادة المسار في Vue.
helloClick() { // انقر على قناع الترحيب المنبثق this.isShowTestDiv = false; this.$router.back(); // إزالة السجل المضاف من السجل}العنوان التجريبي
جيثب: https://github.com/LiJinShi/wechat_back_vue
تلخيصما ورد أعلاه هو وظيفة حظر زر الرجوع في الزاوية اليسرى العليا من متصفح WeChat التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك وقت. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!