Übergabe von Parametern auf verschiedenen Seiten von Uniapp

Mit der Popularität des mobilen Internets hat die Entwicklung mobiler Anwendungen immer mehr Aufmerksamkeit auf sich gezogen. Als eines der beliebtesten plattformübergreifenden Entwicklungsframeworks wird Uniapp häufig bei der Entwicklung mobiler Anwendungen eingesetzt. Bei der Entwicklung von Uniapp stellt die Übertragung von Parametern zwischen verschiedenen Seiten ein sehr häufiges Problem dar. In diesem Artikel wird die Übertragung von Parametern zwischen verschiedenen Seiten in Uniapp unter verschiedenen Gesichtspunkten vorgestellt.

1. Übergabe von Abfrageparametern

In Uniapp können Sie Parameter über den Abfrageparameter der Seite übergeben. Beispielsweise können wir durch Klicken auf die Schaltfläche auf der Startseite zur Detailseite springen und die Produkt-ID an die Detailseite übergeben. Der Code wird wie folgt implementiert:

// Sprungcode auf der Startseite
uni .navigateTo({
url: '/pages/detail/detail?id=' + this.goodsId
});

// Erhalten Code in der Detailseite#🎜 🎜#onLoad(options) {
this.goodsId = options.id;
}

Auf der Startseite springen wir zur Detailseite über die uni.navigateTo-Methode und hinzufügen Die Produkt-ID wird über den Abfrageparameter an die Detailseite übergeben. Auf der Detailseite erhalten wir die übergebene Produkt-ID über den Optionsparameter in der onLoad-Methode und weisen sie der Variablen „goodsId“ zu, die der Detailseite entspricht.

2. Vuex-Parameterübertragung

In Uniapp können Sie Vuex verwenden, um Parameter zwischen verschiedenen Seiten zu übertragen. Vuex ist eine Zustandsverwaltungsbibliothek, die speziell für das Vue.js-Framework entwickelt wurde und die Zustandsfreigabe zwischen verschiedenen Komponenten realisieren kann. In Uniapp können Sie eine globale Variable in Vuex definieren und Vuex in die Seiten einführen, die Parameter übergeben müssen, wodurch die Parameterübertragung zwischen Seiten realisiert wird.

Zum Beispiel können wir eine globale Variable „goodsId“ im Vuex-Status definieren, den Wert der Variablen auf der Startseite ändern und den Wert der Variablen auf der Detailseite abrufen. Der Code wird als implementiert folgt:

// Definieren Sie die globale Variable „goodsId“ im Status von Vuex

state: {
„goodsId: ''
}

// Ändern Sie dies auf der Homepage. Der Wert der Variablen

methods: {
jumpToDetail() {

this.$store.state.goodsId = '123456';
uni.navigateTo({
  url: '/pages/detail/detail'
});

}

}

// Holen Sie sich die Variable auf der Detailseite. Der Wert von

berechnet: {
warenId() {

return this.$store.state.goodsId;

}

}

In der Auf der Startseite übergeben wir this.$store .state.goodsId, weisen der globalen Variablen „goodsId“ einen Wert zu und springen über die Methode „uni.navigateTo“ zur Detailseite. Auf der Detailseite erhalten wir die Variable „goodsId“ in Vuex über das berechnete Attribut, um den übergebenen Wert zu erhalten.

3. Ereignisbus-Parameterübertragung

In Uniapp können wir den Ereignisbus auch verwenden, um Parameter zwischen verschiedenen Seiten zu übertragen. Der Ereignisbus ist ein Entwurfsmuster, das es verschiedenen Komponenten ermöglicht, durch Abhören von Ereignissen und Auslösen von Ereignissen zu kommunizieren und Parameter zu übergeben. In Uniapp können Sie die Methoden uni.$emit und uni.$on verwenden, um Ereignisse zu überwachen und auszulösen.

Zum Beispiel können wir das Ereignis über die uni.$emit-Methode auf der Homepage auslösen und das Ereignis über die uni.$on-Methode auf der Detailseite überwachen und so die Übertragung von Parametern realisieren. Der Code ist wie folgt implementiert: #🎜 🎜#

// Verwenden Sie uni.$emit, um Ereignisse auf der Homepage auszulösen

Methoden: {

jumpToDetail() {

uni.$emit('goodsId', '123456');
uni.navigateTo({
  url: '/pages/detail/detail'
});

#🎜 🎜#}
}#🎜 🎜#

// Verwenden Sie uni.$on, um auf der Detailseite auf Ereignisse zu warten

onLoad() {
uni.$on('goodsId ', (goodsId) => {#🎜🎜 #

this.goodsId = goodsId;

});

}

Auf der Startseite lösen wir das Ereignis namens „goodsId“ über die Uni aus .$emit-Methode und verwenden Sie die Produkt-ID „123456“ als Parameterübergabe. Auf der Detailseite hören wir das Ereignis mit dem Namen „goodsId“ über die Methode uni.$on in der onLoad-Methode ab und weisen die übergebene Produkt-ID der Variablen „goodsId“ zu, die der Detailseite entspricht.

Zusammenfassend kann die Parameterübertragung zwischen verschiedenen Seiten in Uniapp durch Abfrageparameterübertragung, Vuex-Parameterübertragung und Ereignisbus-Parameterübertragung erreicht werden. Entwickler können die geeignete Methode zum Übergeben von Parametern basierend auf den tatsächlichen Anforderungen auswählen, um die funktionalen Anforderungen der Anwendung besser zu realisieren.

Das obige ist der detaillierte Inhalt vonÜbergabe von Parametern auf verschiedenen Seiten von Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!