Zusammenfassung von 4 Lösungen zum Zurückgeben von Werten auf WeChat Mini-Programmseiten

Anwendungsszenarien

Das Applet springt von Seite A zu Seite B, wählt auf Seite B einen Wert aus und kehrt dann zu Seite A zurück, wobei es den auf Seite B ausgewählten Wert auf Seite A verwendet. Beispiel: Auf der Bestellseite zur Adressliste springen und nach Auswahl der Adresse wieder zur Bestellseite zurückkehren. Die Lieferadresse auf der Bestellseite muss synchron aktualisiert werden.

Lösung

Die übliche und einfachere Lösung besteht darin, den globalen Speicher globalData des Applets und den lokalen Cache-Speicher zu verwenden, den Seitenstapel des Applets abzurufen, die Methode setData der vorherigen Seite aufzurufen und die Eigenschaft events von wx.navigateTo zu verwenden, um die von der geöffneten Seite an die aktuelle Seite gesendeten Daten abzuhören. Hier ein kurzer Vergleich der Vor- und Nachteile der vier Methoden:

1. Verwenden Sie globalData zur Implementierung

//Seite A
const app = getApp() //Holen Sie sich die App.js-Instanz onShow() { //Lebenszyklusfunktion -- Achten Sie auf die Seitenanzeige if (app.globalData.backData) {
    this.setData({ //Rendere den aktualisierten Wert von Seite B auf der Seite backData: app.globalData.backData
    },()=>{
     	delete app.globalData.backData //Daten löschen um wiederholtes Rendern von onShow zu vermeiden})
  }
}
//Seite B
const app = getApp() //App.js-Instanz abrufen changeBackData(){
   app.globalData.backData = 'Ich wurde geändert'
   wx.navigateBack()
}

2. Verwenden Sie den lokalen Cache-Speicher zur Implementierung

//Seite A
  onShow: Funktion () {
    let backData = wx.getStorageSync('backData')
    wenn(zurückDaten){
       dies.setData({
     		 zurückDaten
    	},()=>{
     		 wx.removeStorageSync('backData')
    	})
    }
  },
 //Seite B
 changeBackData(){
    wx.setStorageSync('backData', 'Ich wurde geändert')
    wx.navigateBack()
 },

3. Verwenden Sie den Seitenstapel des Applets zur Implementierung

Der Seitenstapel des Miniprogramms ist praktischer als die beiden anderen Methoden und rendert schneller. Sie müssen nicht warten, bis Sie zu Seite A zurückkehren, um die Daten zu rendern. Der Wert auf Seite A wird direkt auf Seite B aktualisiert. Wenn Sie zu Seite A zurückkehren, wurde der Wert aktualisiert. Das Prinzip von globalData und Storage besteht darin, den Wert auf Seite B zu ändern, dann zu Seite A zurückzukehren, die Lebenszyklusfunktion onShow auszulösen und die Seitendarstellung zu aktualisieren.

//Seite B
changeBackData(){
    const Seiten = getCurrentPages();
    const beforePage = Seiten[Seitenlänge - 2]
    beforePage.setData({ // Aktualisiert die Daten von Seite A direkt, Seite A benötigt keine weiteren Vorgänge. backData: „Ich wurde geändert.“
    })
}

4. Implementierung von Ereignissen mithilfe der wx.navigateTo-API

Das Implementierungsprinzip von wx.navigateTo-Ereignissen wird mithilfe des Publish-Subscribe-Modells des Entwurfsmusters implementiert. Interessierte Studenten können selbst ein einfaches Modell implementieren, um denselben Effekt zu erzielen.

//Seite A
 geheSeiteB() {
    wx.navigateTo({
      URL: 'B',
      Ereignisse: {
        getBackData: res => { //Listener-Ereignis in Ereignissen hinzufügen this.setData({
            zurückDaten: res.zurückDaten
          })
        },
      },
    })
  },
//Seite B	
changeBackData(){
    const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit('getBackData', {  
     	 backData: 'Ich wurde geändert'
    });
     wx.navigateBack()
 }

Zusammenfassen

Die Methoden 1 und 2 sind in Bezug auf den Seiten-Rendering-Effekt etwas langsamer als die beiden letzteren. Die Methoden 3 und 4 haben das Update ausgelöst, bevor Seite B auf Seite A zurückfällt, während die Methoden 1 und 2 das Update auf Seite A auslösen, nachdem sie auf Seite A zurückgekehrt sind. Und bei den Methoden 1 und 2 müssen Sie berücksichtigen, dass nach der Aktualisierung von Seite A die Daten in globalData und Storage gelöscht werden müssen, um ein wiederholtes Auslösen von setData in der onShow-Methode zum Aktualisieren der Seite zu vermeiden. Daher empfehle ich persönlich, die folgenden Methoden 3 und 4 zu verwenden.

Damit ist dieser Artikel über 4 Lösungen zum Zurückgeben und Übergeben von Werten auf WeChat Mini-Programmseiten abgeschlossen. Weitere relevante Inhalte zum Zurückgeben und Übergeben von Werten auf WeChat Mini-Programmseiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!