Die Funktion zum Abfangen der Zurück-Schaltfläche des WeChat-Browsers befindet sich in der oberen linken Ecke

Bei der Entwicklung öffentlicher WeChat-Konten ist es manchmal erforderlich, die Seitenlogik im Zusammenhang mit der Zurück-Schaltfläche in der oberen linken Ecke des Browsers abzufangen und zu verarbeiten, anstatt die Seite direkt zur vorherigen Seite zurückkehren zu lassen Vorher sehr gut umgesetzt. Allerdings sah ich, dass die Ergebnisse auf dem offiziellen Konto von JD Shopping sehr gut waren, also begann ich, es selbst auszuprobieren. Die Wirkung von JD.com ist wie folgt:

Dem Jingdong-Einkaufseffekt im Bild oben nach zu urteilen, wird durch Klicken auf „Suchen“ eine Suchoberfläche angezeigt. Wenn Sie dann auf die obere linke Ecke klicken, wird die Suchoberfläche nur geschlossen, die Seite wird jedoch nicht wie beim erneuten Lesen des Fortschrittsbalkens angezeigt , und meine Seite braucht diesen Effekt. Lassen Sie uns Vue verwenden, um eine Demo dieses Prozesses zu erstellen.

Prämisse: Der Return-Button in der oberen linken Ecke von WeChat kann nicht abgefangen werden, aber das Return-Ereignis kann überwacht werden.

Idee: Wenn Sie das Rückgabeereignis wirklich abfangen möchten, können Sie zunächst einen Datensatz zu window.history auf der aktuellen Seite hinzufügen (eigentlich fügen Sie einfach einen Datensatz pushState zum Verlaufsstapel hinzu, der Browser lädt diesen Pfad nicht wirklich), wenn Sie Klicken Sie, um zurückzukehren, das Rückgabeereignis abzuhören und die Logik zu verarbeiten, die Sie verarbeiten möchten. Der gerade hinzugefügte Datensatz wird aus window.history entfernt und dieser Pfad ersetzt den aktuellen Seitenpfad. Hinweis: Dies ist nur ein Ersatz des Pfads. Es wird lediglich der Name des Pfads geändert und der Pfad nicht tatsächlich geladen.

Implementierung: In der Demo werden zwei Vue-Seiten (erste und zwei) erstellt, und die erste Seite springt zur zweiten Seite. Dann erscheint auf der zweiten Seite eine Maskenebene. Wenn Sie auf die obere linke Ecke klicken, kehren Sie nicht zur ersten zurück, sondern die Maskenebene verschwindet. Wenn Sie erneut auf „Zurück“ klicken, kehren Sie zur vorherigen Seite zurück.

Der Effekt ist wie folgt:

1 Fügen Sie der gemounteten Methode der zweiten Seite eine Methode hinzu, um auf das Rückgabeereignis zu warten. Wenn Sie auf die Schaltfläche „Zurück“ klicken, wird die Popup-Maske ausgeblendet.

 mount() { let that = this; // Return-Event-Listener hinzufügen window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },

2. Überwachen Sie die Maskierungsebene und fügen Sie bei der Anzeige einen Datensatz zu window.history (Verlaufsstapel) hinzu.

 watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Verlauf ändern var state = { title: , url: /two / / Diese URL kann beiläufig ausgefüllt werden, um zu verhindern, dass sich die vom Browser angezeigte URL-Adresse ändert. Sie hat keine Auswirkungen auf die Seite}; },

3. Wenn der Benutzer auf den entsprechenden Vorgang auf der maskierten Ebene klickt, um die maskierte Ebene zu schließen, muss er den von ihm hinzugefügten Datensatz manuell aus dem Verlauf entfernen und die Route in Vue wiederherstellen.

 helloClick() { // Klicken Sie auf die Popup-Hallo-Maske this.isShowTestDiv = false this.$router.back( // Den hinzugefügten Datensatz aus dem Verlauf entfernen}

Demo-Adresse

gitHub:https://github.com/LiJinShi/wechat_back_vue

Das Obige ist die vom Herausgeber eingeführte Funktion zum Blockieren der Zurück-Schaltfläche in der oberen linken Ecke des WeChat-Browsers. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!