So schließen Sie eine Seite in Uniapp

Uniapp ist ein plattformübergreifendes Entwicklungsframework, mit dem Entwickler gleichzeitig Anwendungen für iOS, Android, H5 und andere Plattformen schreiben können, wodurch die Entwicklungseffizienz erheblich verbessert und Entwicklungskosten gespart werden. Bei der Entwicklung von Uniapp-Anwendungen ist es häufig erforderlich, die Funktion zum Schließen einer bestimmten Seite zu implementieren. In diesem Artikel wird erläutert, wie eine bestimmte Seite in Uniapp geschlossen wird.

1. Schließen Sie die Seite über die Seitenstapelverwaltung.

In der Uniapp-Anwendung werden Seitensprünge über die Seitenstapelverwaltung implementiert. Der Seitenstapel ist eine Datenstruktur, die zum Speichern der Sprungbeziehung zwischen Seiten verwendet wird. Wenn Sie zu einer neuen Seite springen, wird die Seite oben im Seitenstapel hinzugefügt wird aus dem Seitenstapel entfernt. Daher kann die Funktion zum Schließen der angegebenen Seite durch Betreiben des Seitenstapels realisiert werden.

Uniapp bietet mehrere APIs zum Verwalten von Seitenstapeln. Die am häufigsten verwendeten davon sind uni.navigateBack und uni.reLaunch. uni.navigateBack wird verwendet, um die aktuelle Seite zu schließen und zur vorherigen Seite zurückzukehren, und uni.reLaunch wird verwendet, um alle Seiten zu schließen und zu einer bestimmten Seite der Anwendung zu springen. Diese beiden APIs unterstützen jedoch nicht das direkte Schließen der angegebenen Seite. Daher ist es notwendig, die API uni.getCurrentPages zum Abrufen von Seitenstapelinformationen zu kombinieren, um die Funktion zum Schließen der angegebenen Seite zu realisieren.

uni.getCurrentPages wird verwendet, um die Informationen des aktuellen Seitenstapels abzurufen und ein Array zurückzugeben, das alle Seitenobjekte enthält. Das letzte Element des Arrays ist das aktuelle Seitenobjekt. Suchen Sie durch Durchlaufen der Seitenobjekte in diesem Array den Index des Seitenobjekts, das geschlossen werden muss, und verwenden Sie uni.navigateBack oder uni.reLauch, um die Seite zu schließen.

Das Folgende ist ein Beispielcode:

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

Dieser Beispielcode definiert eine closePage-Funktion, die den Namen der Seite, die geschlossen werden muss, pageName, als Parameter empfängt. Rufen Sie zunächst die aktuellen Seitenstapelinformationen über uni.getCurrentPages ab, durchlaufen Sie dann das Seitenobjektarray, suchen Sie das Seitenobjekt, dessen Routenattribut gleich pageName ist, berechnen Sie, wie viele Seitenebenen zurückgegeben werden müssen, und verwenden Sie schließlich uni.navigateBack Schließen Sie die Zielseite.

2. Schließen Sie die Seite über den Ereignisbus

Der Ereignisbus ist ein in der Front-End-Entwicklung weit verbreitetes Muster, um die Kommunikation zwischen Komponenten zu erreichen. In Uniapp kann der Ereignisbus auch zur Implementierung der Kommunikation zwischen Seiten verwendet werden, einschließlich der Funktion zum Schließen einer bestimmten Seite.

Um den Ereignisbus zu implementieren, müssen Sie den Reaktionsmechanismus von vue.js verwenden, indem Sie eine globale Vue-Instanz als Ereignisbus erstellen. Andere Komponenten oder Seiten können über die Methoden $emit und $on Ereignisse auslösen und abhören der Instanz. Beim Auslösen des Ereignisses können Parameter übergeben werden, und das Überwachungsereignis empfängt die vom Ereignis übertragenen Parameter und kann diese entsprechend verarbeiten.

Das Folgende ist ein Beispielcode:

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

In diesem Beispielcode wird zunächst eine EventBus-Instanz erstellt, die als Ereignisbus dient. Wenn dann auf der Seite Seite1 die Seite Seite2 geschlossen werden muss, wird eventBus.$emit verwendet, um das Ereignis auszulösen. Der Ereignisname lautet „closePage“ und der Name der Seite, die geschlossen werden muss, wird übergeben. Hören Sie auf der Seite „Page2“ auf das Ereignis „closePage“ und rufen Sie den Namen der aktuellen Seitenkomponente über this.$options.name ab. Wenn der Name dem vom Ereignis übergebenen Seitennamen „pageName“ entspricht, verwenden Sie zum Schließen uni.navigateBack die aktuelle Seite.

Kurz gesagt, Uniapp bietet verschiedene Möglichkeiten, die angegebene Seite zu schließen. Sie können die geeignete Methode entsprechend dem jeweiligen Geschäftsszenario auswählen. Persönlich denke ich, dass das Schließen der Seite durch die Seitenstapelverwaltung und die Kombination mit der uni.getCurrentPages-API eine relativ einfache und intuitive Möglichkeit ist. Über den Ereignisbus kann eine flexiblere Kommunikation zwischen Seiten erreicht werden, er muss jedoch mäßig eingesetzt werden, um Ereignisverschmutzung und unnötige Leistungsprobleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo schließen Sie eine Seite in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!