So legen Sie Seitenparameter in Uniapp fest

Mit der rasanten Entwicklung der mobilen Anwendungsentwicklung nutzen immer mehr Entwickler Uniapp, um schnell plattformübergreifende Anwendungen zu erstellen. Wenn wir jedoch eine Seite erstellen, müssen wir manchmal Parameter an die Seite übergeben, und diese Parameter können von anderen Seiten übergeben werden. Wie legt Uniapp also Seitenparameter fest? In diesem Artikel wird ausführlich beschrieben, wie Seitenparameter in Uniapp festgelegt werden.

1. Parameter über die URL übergeben

Wir können Parameter über die URL übergeben, was eine sehr gängige Methode ist. In uniapp können wir dazu Routing-Sprünge verwenden. Wir können zunächst die Parameter festlegen, die auf der Originalseite übergeben werden müssen:

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

Beim Springen zur Zielseite können wir Daten über den Abfrageparameter der URL übertragen. Auf der Zielseite können wir die Parameter auf folgende Weise abrufen:

export default {
  onLoad(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 uniapp
  }
}

Hier verwenden wir die onLoad-Lebenszyklus-Hook-Funktion, um die Parameter abzurufen. Die onLoad-Funktion ist eine Hook-Funktion, die beim Laden der Seite ausgelöst wird und die in der URL enthaltenen Parameter abrufen kann.

2. Parameter über globale Daten übergeben

Wir können Parameter auch über globale Daten übergeben. In uniapp können wir vuex verwenden, um globale Daten zu verwalten. Wir können in Vuex eine globale Variable definieren, um die zu übergebenden Parameter zu speichern, und dann die entsprechenden Parameter auf der Zielseite abrufen.

Definieren Sie zunächst die Parameter, die im Status von vuex übergeben werden müssen:

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

Dann können wir auf der Originalseite die Parameter wie folgt festlegen:

store.commit('setUserInfo', state.userInfo)

Hier verwenden wir die Commit-Funktion von vuex zum Aktualisieren globale Daten. setUserInfo ist eine Mutationsfunktion, die zum Aktualisieren des Werts von userInfo verwendet wird.

Auf der Zielseite können wir die Parameter auf folgende Weise abrufen:

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

Hier verwenden wir berechnete Eigenschaften, um den Wert von userInfo zu erhalten. $store ist ein von vuex bereitgestelltes globales Statusverwaltungsobjekt und kann direkt in jeder Komponente verwendet werden.

Zusammenfassung

In uniapp können wir Parameter über URLs und globale Daten übergeben. Beide Methoden haben ihre eigenen Vor- und Nachteile. Die Übergabe von Parametern über die URL kann unsere Anwendung flexibler machen, die Anzahl der Parametertypen ist jedoch begrenzt. Die Übergabe von Parametern über globale Daten kann die Koppelung des Codes verringern, nimmt jedoch mehr Speicherplatz in Anspruch. Bei der Verwendung müssen wir die geeignete Methode zur Parameterübergabe entsprechend dem jeweiligen Anwendungsszenario auswählen.

Das Obige ist eine Einführung zum Festlegen von Seitenparametern in Uniapp. Ich hoffe, dass es für alle hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo legen Sie Seitenparameter in Uniapp fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!