Lassen Sie uns darüber sprechen, wie Uniapp andere Seiten aufruft

Mit der rasanten Entwicklung mobiler Anwendungen nutzen wir H5 zunehmend zur Entwicklung plattformübergreifender Anwendungen. Als beliebtes Framework für die plattformübergreifende Front-End-Entwicklung wird Uniapp aufgrund seiner leistungsstarken Funktionen und benutzerfreundlichen Features von immer mehr Entwicklern bevorzugt. Bei der Uniapp-Entwicklung müssen wir häufig Methoden auf anderen Seiten aufrufen, um einige Funktionen zu implementieren. In diesem Artikel wird erläutert, wie Uniapp andere Seiten aufruft.

1. Aufruf über vuex

vuex ist ein Tool zum Verwalten von Daten in Uniapp. Es speichert Daten im globalen Zustand und kann in jeder Komponente aufgerufen werden. Über vuex können wir Methodenaufrufe auf anderen Seiten durchführen. Hier ist ein einfaches Beispiel:

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

In der Komponente, die diese Methode aufrufen muss, können wir die Methode this.$store.commit() verwenden, um Folgendes aufzurufen:

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2 Durch uni . $emit-Methodenaufruf

Tatsächlich gibt es in Vue auch eine gute Komponentenkommunikationsmethode: Event Delivery. Uniapp unterstützt diese Methode ebenfalls. Wir können die Methode uni.$emit() verwenden, um ein benutzerdefiniertes Ereignis in einer Komponente auszulösen, und $on() verwenden, um das Ereignis abzuhören und entsprechende Vorgänge in einer anderen Komponente auszuführen.

In der Quellkomponente:

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

In der Zielkomponente:

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Auf diese Weise können wir eine Komponente in einer anderen Komponentenmethode aufrufen ermöglichen eine komponentenübergreifende funktionale Interaktion.

3. Rufen Sie über uni.navigateTo auf.

Im eigentlichen Entwicklungsprozess müssen wir oft von einer Seite zur anderen springen und eine bestimmte Funktion auf einer anderen Seite ausführen Operationen. Mit der Methode uni.navigateTo können wir zur Seite springen und entsprechende Vorgänge auf der Zielseite ausführen.

Auf der Quellseite:

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

Auf der Zielseite können wir die Funktion onLoad() verwenden, um die entsprechenden Vorgänge beim Laden der Seite auszuführen:

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

#🎜🎜 #4. Aufruf über den Uni-App-Event-Bus

Uni-App bietet die Event-Bus-Funktion, mit der die Kommunikation zwischen verschiedenen Seiten realisiert werden kann. Die Verwendungsmethode ist sehr einfach. Wir können uni auf jeder Seite importieren und ihre Publish-Subscribe-Funktion verwenden.

Auf der Quellseite verwenden wir $emit, um ein benutzerdefiniertes Ereignis auszulösen:

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

Auf der Zielseite können wir $on verwenden, um das Ereignis anzuhören und auszuführen entsprechende Aktion:

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Zusammenfassung

Bei der Entwicklung von Uniapp müssen wir häufig Methoden auf anderen Seiten aufrufen, um einige Funktionen zu implementieren. Durch Vuex, Event Delivery, Page Jumps und Uni-App Event Bus können wir seitenübergreifende Aufrufmethoden implementieren, um die Entwicklung zu erleichtern und die Skalierbarkeit der Anwendung zu verbessern.

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Uniapp andere Seiten aufruft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!