Ausführliche Erläuterung des globalen Status des WeChat-Applets

Vorwort

Im WeChat-Applet können Sie globalData von App.js als Zwischenbrücke verwenden, um die Informationen zwischen Seite und Komponente weiterzugeben, einschließlich zwischen Seiten, zwischen Seiten und Komponenten und zwischen Komponenten. Wir können die Änderungen unter globalData jedoch nicht rechtzeitig kennen. Im offiziellen Standardfall der Erstellung eines neuen Applets verzögert sich der Netzwerkvorgang zum Abrufen von UserInfo, und dafür wird viel unnötiger Code geschrieben. Sogar in offiziellen Fällen gibt es diese Situation, ich glaube, Sie werden während der Entwicklung auf ähnliche Situationen stoßen. In diesem Artikel wird erläutert, wie Sie diese Art von Problem lösen können.

Bedarfsanalyse

Ich glaube, dass die folgenden Situationen häufige Vorgänge sind, die wir ohne globale Statusverwaltung durchführen:

• In den OnLoad- und Attached-Lifecycle-Hook-Funktionen von Seite und Komponente werden einige vorhandene Eigenschaften aus den globalen Daten der App den Daten in der Seite oder Komponente zugewiesen.
• Ganz am Anfang gibt es einige asynchrone Netzwerkanforderungen, und die erhaltenen Daten werden global verwendet. Zu Beginn haben die globalData möglicherweise keine relevanten Attribute, bis die Anforderung erfolgreich ist und die relevanten Attribute den globalData hinzugefügt werden. Zu diesem Zeitpunkt ist der Zuweisungsvorgang der Seite aus den globalData möglicherweise abgeschlossen, aber er ist undefiniert. Daher ist eine weitere Beurteilung erforderlich, bevor sie der Seite und der Komponente zugewiesen wird. Wenn es nur eine oder zwei sind, ist es ganz einfach, aber wenn mehrere Seiten oder mehrere Variablen zugewiesen werden müssen, werden Sie dies meiner Meinung nach ablehnen und nach einfachen Wegen suchen.
• Einige von globalData in Seiten und Komponenten zugewiesene Variablen werden nicht nur zur Beurteilung und Anzeige verwendet, sondern wir müssen den Wert der Variablen möglicherweise auch basierend auf der Benutzerinteraktion ändern. In diesem Fall müssen dieselben Variablen auch in anderen Seiten und anderen Komponenten einheitlich geändert werden.

In der oben beschriebenen Situation können wir die folgenden Anforderungen stellen:

1. Wenn die Seite oder Komponente zum ersten Mal geladen wird, rufen Sie die erforderlichen Eigenschaften der Seite oder Komponente so schnell wie möglich aus globalData ab und weisen Sie sie zu.
2. Erhalten Sie rechtzeitig Änderungen an einem bestimmten Attribut von globalData und führen Sie einige nachfolgende zugehörige Vorgänge aus
3. Wenn Sie den Wert einer Seite oder Komponente ändern, werden die gleichen Änderungen auch auf anderen Seiten und Komponenten vorgenommen.

Unten ist der erforderliche Originalcode

// app.js
App({
 globalData: {
  Benutzerinfo: null
 },
 beim Starten(){
  wx.getSetting({
   Erfolg: res => {
    wenn(res.authSetting['scope.userInfo']){
     wx.getUserInfo({
      Erfolg: res => {
       this.globalData.userInfo = res.userInfo
       // Anforderung 2
       wenn (this.userInfoReadyCallback) {
        // Die Existenz dieser Rückruffunktion bedeutet, dass die Seite onLoad ausgeführt hat
        // Und userInfo wird nicht abgerufen und den Daten der Seite zugewiesen // Führe diese Rückruffunktion aus und weise sie der entsprechenden Seite zu this.userInfoReadyCallback(res)
       }
      }
     })
    }
   }
  })
 }
})

// Seiten/index/index.js
const app = getApp()
Seite({
 // ...
 beim Laden(Optionen){
  // Anforderung 1
  const userInfo = app.globalData.userInfo
  BenutzerInfo und this.setData({useInfo})
  // Anforderung 2
  // Wenn app.globalData.userInfo nicht abgerufen wird
  // bedeutet, dass die Callback-Funktion von wx.getUserInfo noch nicht ausgeführt wurde // füge der App eine Callback-Funktion hinzu, binde diese an die Callback-Funktion userInfo || app.userInfoReadyCallback = res => {
   dies.setData({
    Benutzerinfo: res.userInfo
   })
   app.userInfoReadyCallback löschen
  }
 }
})

Dies ist der Code des offiziellen Miniprogramms. Ich habe nur ein paar Änderungen vorgenommen. Hier wird nur Anforderung 2 angezeigt. Das Attribut globalData ändert sich von nichts zu manchmal der Ausführung der von der Seite festgelegten Rückruffunktion, implementiert jedoch nicht jedes Mal die Ausführung der Rückruffunktion. Der Code von Anforderung 3 ist komplizierter und wird hier nicht angezeigt.

Wir können darüber nachdenken, welche Codes notwendig sind, um die oben genannten Anforderungen umzusetzen. Es zeigt sich, dass die Anforderungen 1 und 3 hauptsächlich die Verwendung der Methode this.setData erfordern, wenn die Eigenschaften Seite, Komponenteninitialisierung und globalData geändert werden, die Instanz, auf die hiermit verwiesen wird, jedoch jedes Mal anders ist. Anforderung 2 besteht darin, dass eine Rückruffunktion vorhanden sein muss und dass das „this“ der Rückruffunktion auch auf die entsprechende Instanz verweisen muss. Außerdem müssen diese Rückruffunktionen ausgeführt werden, wenn die Eigenschaft „globalData“ geändert wird.
Aus Sicht der Zeitpunkte haben wir zwei, einer ist, wenn die Seite und die Komponente initialisiert werden, und der andere ist, wenn sich die Eigenschaft globalData ändert. Für den ersten Zeitpunkt können wir die Hook-Funktionen des Lebenszyklus des Applets, onLoad und attachment, berücksichtigen und den Vorgang this.setData zu diesen beiden Zeitpunkten ausführen. Die Änderungen der globalData-Attribute werden alle durch unsere eigene Initiative oder Benutzerereignisse verursacht. Das heißt, dieser Vorgang kann als Ereignis für ein bestimmtes Attribut von globalData angesehen werden, und nach Auftreten dieses Ereignisses werden einige geschriebene Rückruffunktionen ausgeführt.

Aus der Perspektive von Operationsobjekten sind sie grundsätzlich Instanzen dieser Seiten und Komponenten sowie von app.globalData.

Theoretische Zusammenfassung der Nachfrage

Zusammenfassend können wir this.setData automatisch ausführen (ohne es manuell zu tun) und dies während der Initialisierung speichern (wird verwendet, um auf die entsprechende Instanz zu verweisen, wenn das Ereignis ausgeführt wird), die entsprechende Rückruffunktion als Ereignis speichern (ein Ereignis ist eine nicht ausgeführte Funktion) und dieses Ereignis bei Bedarf aktiv auslösen. Dann können Sie sehen, dass wir während des gesamten Prozesses eine Variable benötigen, die sich über App, Seite und Komponente erstreckt, um die Initialisierungs-Hook-Funktion zu kapern, eine automatische Zuweisung durchzuführen, entsprechende Ereignisse zu speichern und eine ereignisgesteuerte Schnittstelle verfügbar zu machen.

Was Sie aus Büchern lernen, ist immer oberflächlich. Sie müssen es üben, um es gut zu beherrschen

Vor diesem Hintergrund glaube ich, dass Sie bereits ein gewisses Verständnis für die globale Zustandsverwaltung haben. Wie lässt sich dies also umsetzen? Hier möchte ich betonen, dass Sie, wenn Sie nach dem Lesen dieses Artikels und der von mir erwähnten Ideen ein gewisses Verständnis davon haben, versuchen müssen, den Code selbst zu implementieren. Egal, ob es gut oder schlecht ist, es ist immer besser, als es nicht zu implementieren, und Sie können von Ihrer eigenen Implementierung mehr profitieren. Der obige Fall unten zeigt einen einfachen Implementierungscode, um denen, die ihn nicht so gut verstehen, eine Vorstellung zu geben. Das nächste Mal, wenn ich eine Erklärung zur entsprechenden Codeimplementierung schreibe, sollte eine dabei sein.

// app.js
Klasse Store {
 Konstruktor(App){
 dies['Ereignis'] = {}
 diese.app = app
 }
 autoSet(globalData, Instanz){
 const instanceData = {}
 für (let prop von globalData) {
  Instanzdaten [Eigenschaft] = diese.App.globalData [Eigenschaft]
  const callBack = (neuerWert) => {
  Instanz.setData({[prop]: neuerWert})
  Instanz.watch[Eigenschaft] && Instanz.watch[Eigenschaft].call(Instanz, neuerWert)
  }
  dies.addEvent(Eigenschaft, Rückruf)
  Instanz.setData(Instanzdaten)
  Rückruf(Instanzdaten[Eigenschaft])
  Instanz löschen.watch
  Instanz löschen.globalData
 }
 }
 addEvent(Ereignisname, Rückruf){
 dieses.Ereignis[Ereignisname] = dieses.Ereignis[Ereignisname] || []
 dieses.Ereignis[Ereignisname].push(Rückruf)
 }
 dispatch(Ereignisname, neuerWert){
 this.app.globalData[eventName] = neuerWert
 dieses.Ereignis[Ereignisname] und dieses.Ereignis[Ereignisname].fürJeden(Element => Element(neuerWert))
 }
}

App({
 globalData: {
  Benutzerinfo: null
 },
 beim Starten(){
  //Erstelle eine neue Instanz und speichere sie in der Miniprogramm-App für den globalen Aufruf this.store = new Store(this)
  wx.getSetting({
   Erfolg: res => {
    wenn(res.authSetting['scope.userInfo']){
     wx.getUserInfo({
      Erfolg: res => {
       // Nachdem Sie die Benutzerinformationen erhalten haben, lösen Sie das Ereignis this.store.dispatch('userInfo', res.userInfo) aus.
      }
     })
    }
   }
  })
 }
})

// Seiten/index/index.js
const app = getApp()
Seite({
 // ...
 Daten: {
  Benutzername: null
 },
 // Das globalData-Array wird verwendet, um globalData automatisch zuzuweisen: ['userInfo'],
 // Auf das entsprechende globalData-Attribut achten und die Callback-Funktion watch einstellen: {
  Benutzerinfo(Benutzerinfo){
  console.log('Benutzerinfo aktualisiert', dies)
  this.setData({Benutzername: Benutzerinfo.Spitzname})
  }
 },
 beim Laden(Optionen){
  // Übergeben Sie diese globalData und Instanz, legen Sie die von der Instanz benötigten Daten fest und erstellen Sie das Ereignis app.store.autoSet(this.globalData, this)
  // Alles andere, was Sie tun möchten …
 }
})

Der obige Code entführt die Hook-Funktion nicht, sondern führt die gebundene Funktion nur zusätzlich zu Beginn der Funktion aus, und es gibt keinen Vorgang zum Freigeben des Speichers, wenn die Seite zerstört wird. Es gibt noch viele Bereiche, die optimiert werden können. Dies wird beim nächsten Mal erläutert.

Zusammenfassen

Dies ist das Ende dieses Artikels über den globalen Status von WeChat Mini-Programmen. Weitere relevante Inhalte zum globalen Status von Mini-Programmen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!