Zusammenfassung der Fallstricke, die Ihnen bei der Entwicklung von WeChat-Applets möglicherweise noch nicht begegnet sind

getApp()

Mit der Funktion getApp() wird die App-Instanz abgerufen. Normalerweise gibt es kein Problem, aber in einigen speziellen Szenarien kann es zu unerwarteten Fehlern kommen.
Verwendung in der onLaunch-Rückruffunktion in app.js

// app.js
App({
 beim Starten() {
  Konsole.info(getApp(), '!!');
 }
});

Sie werden feststellen, dass zu diesem Zeitpunkt „undefined“ ausgegeben wird, was verständlich ist. Schließlich befindet es sich noch in der Initialisierungsphase und die App ist noch nicht geboren. Wenn der Code so einfach ist, können Sie dieses Problem leicht finden. Sobald Sie eine Methode darin aufrufen und diese Methode versehentlich die App-Instanz erhält, um die Variable abzurufen, tritt ein Unfall auf.

Wenn also keine Synchronisierung erforderlich ist, können Sie die Funktion in onLaunch aufrufen und mit setTimout umschließen, um Fallstricke zu vermeiden:

// app.js
App({
 beim Starten() {
  setzeTimeout(() => {
   // ... andere Funktionen aufrufen });
 }
});

Weisen Sie getApp() einer Variablen zu

Wir erstellen eine js-Datei:

// ein.js
const app = getApp();

Exportfunktion checkVersion() {
 console.log('geprüft!');
 konsole.info('App', App, '!!');
}

Die oben genannten Dateien verursachen im Allgemeinen keine Probleme, aber sobald Sie sie in app.js importieren, treten Überraschungen auf.

// app.js
importiere { checkVersion } von 'a';

App({
 beim Starten() {
  console.log('Mir geht es gut!');
 },
 beiAnzeigen() {
  checkVersion();
 }
});

Zu diesem Zeitpunkt werden Sie feststellen, dass die App-Variable nicht definiert ist. Diese Art von Fehler kann schwer zu erkennen sein, insbesondere bei einer gepackten allgemeinen Bibliothek, die normalerweise einwandfrei funktioniert, aber bei Verwendung in app.js plötzlich zusammenbricht.

Um dieses Problem zu vermeiden, versuchen Sie, die gemeinsame Nutzung öffentlicher App-Instanzen zu reduzieren und verwenden Sie stattdessen getApp() direkt in der Methode, um das Instanzobjekt abzurufen. Wenn Sie globale Variablen verwenden möchten, wäre es besser, die Variablen in einer separaten JS-Datei zu speichern, zum Beispiel:

// globalStore.js

Standard exportieren {
 Benutzerinfo: null,
 isIos: falsch,
 isLaunched: false,
};

// app.js
Store aus „GlobalStore“ importieren;

App({
 beim Starten() {
  store.isLaunched = wahr;
 },
 beiAnzeigen() {
  const { isLaunched } = getApp().store,
  console.log(wird gestartet);
 },
 speichern,
});

Auf diese Weise können Sie globale Variablen durch Importieren von Modulen erhalten, und Sie können globale Variablen auch über getApp().store erhalten.

Grundsätzlich empfehle ich aber trotzdem, globale Variablen über importierte Module zu lesen und zu schreiben. Schließlich gibt getApp() in manchen Fällen „undefined“ zurück.

Definieren Sie Variablen oben in Ihrer Seiteneintragsdatei

Es ist üblich, Variablen in der Seiteneintragsdatei zu definieren. Sie müssen jedoch beachten, dass die Seiteneintragsdatei nur einmal und nicht unabhängig für jede Seiteninstanz ausgeführt wird, wie beispielsweise der folgende Code:

// Seiten/Seite/index.js
importiere { getDetailInfo } von 'API';
lassen Sie ajaxLock = false;

Seite({
 beim Laden() {
  dies.getRemoteData();
 },
 async getRemoteData() {
  wenn (ajaxLock) {
   zurückkehren;
  }
  ajaxLock = wahr;
  versuchen {
   warte auf getDetailInfo();
  } Fang(Fehler) {
   // ... Fehler behandeln } finally {
   ajaxLock = falsch;
  }
 },
});

Die Seitenlogik ist relativ einfach. Sobald die Seite aufgerufen wird, werden Remote-Daten angefordert. Visuell gibt es kein Problem. Wenn Sie jedoch mehrere Seiten gleichzeitig öffnen, werden Sie feststellen, dass nur die erste Seite Daten anfordert und die nachfolgenden Seiten sie nicht anfordern. Dies liegt daran, dass diese Seiten alle die Variable ajaxLock gemeinsam nutzen. Wenn Sie daher Variablen oben auf der Seite deklarieren, müssen Sie auf die Verwendungsszenarien achten.

Direktes Zuweisen globaler Variablen zu Daten in der Seiteneintragsdatei

Direkt zum Code:

// Seiten/Seite/index.js
Seite({
 Daten: {
  isIos: getApp().store.isIos,
 },
});

// app.js
App({
 beim Starten() {
  dies.getSysInfo();
 },
 getSysInfo() {
  returniere neues Promise((lösen, ablehnen) => {
   wx.getSystemInfoAsync({
    Erfolg: Entschlossenheit,
    scheitern: ablehnen,
   });
  }).then((res) => {
   const { store } = getApp();
   store.isIos = res.platform.toLowerCase() === 'ios';
  });
 },
 speichern: {
  isIos: falsch,
 },
});

Die Hauptlogik des obigen Codes besteht darin, zu wissen, ob das aktuelle Gerät iOS ist. Der Code scheint sehr stabil zu sein, wenn er auf dem Simulator ausgeführt wird, aber sobald er auf der realen Maschine ausgeführt wird, ist er manchmal gut und manchmal schlecht, da die Variable isIos den Status nicht synchron erhält. Sobald der Wert nach Ausführung der Seiteneintragsfunktion zugewiesen wird, ist die Statusanzeige falsch.
Weisen Sie daher bei einigen Zuständen, die nicht synchron zugewiesen werden, den Daten während der Initialisierung niemals direkt Werte zu. Am besten weisen Sie den Zustand in der Rückruffunktion onLoad zu.

Was Sie nicht über wx.createSelectorQuery() und wx.createIntersectionObserver() wissen:

Diese beiden Funktionen werden auch häufig verwendet. wx.createSelectorQuery wird hauptsächlich zum Abfragen eines Elements verwendet und wx.createIntersectionObserver wird verwendet, um zu verarbeiten, ob sich das Element im sichtbaren Bereich befindet. Die Probleme dieser beiden Funktionen sind auf den ersten Blick niedlich. Ich habe sie erst entdeckt, als ich eine spezielle Anforderung implementierte. Es war wirklich eine Erkenntnis im Nachhinein, und ich hatte das Gefühl, dass es mächtig war, ohne es zu wissen. Es war erschreckend, als ich sorgfältig darüber nachdachte ...

Lassen Sie uns das Problem reproduzieren. Die Seiteneintragsfunktion wird wie folgt geschrieben:

// Seiten/Seite/index.js
lass Index = 0

Seite({
 Daten: {
  tag: 0
 },
 beim Laden() {
  wenn (index++ < 2) {
   wx.navigateTo({
    URL: '/Seiten/Seite/Index'
   });
  }
  dies.setData({
   Schlagwort: Index
  },() => {
   setzeTimeout(() => {
    const { tag } = diese.Daten;
    const query = wx.createSelectorQuery();
    // const query = this.createSelectorQuery();
    query.select(`.c-${ tag }`).boundingClientRect();
    query.exec((res) => {
     console.log(tag, res);
    });
   }, 2000);
  });
 }
});

<!-- Vorlagendatei-->
<view class="c-{{tag}}">Demo</view>

Ich habe die Situation simuliert, in der mehrere Seiten gleichzeitig geöffnet werden. In den Entwicklertools werden Sie feststellen, dass die Ergebnisse der ersten beiden Seiten null sind! ! ! Damals hatte ich das Gefühl, die Welt würde zusammenbrechen. Daher vermute ich, dass wx.createSelectorQuery letztendlich eine globale Funktion ist und daher das WXML unter dem aktuell aktiven Fenster abfragt. Wie kann ich das Problem lösen? Ich habe die offizielle Dokumentation durchgeblättert, mit der Lupe nach dem Kleingedruckten gesucht und die Methode this.createSelectorQuery gefunden. Ich habe es ausprobiert und das Problem war plötzlich gelöst. Natürlich hat wx.createIntersectionObserver das gleiche Problem, deshalb werde ich es nicht demonstrieren.

Aus Gesundheitsgründen empfehle ich dringend, this.createSelectorQuery und this.createIntersectionObserver direkt zu verwenden.

Das Obige sind die Fallstricke, auf die ich in den letzten Jahren bei der Entwicklung von WeChat-Applets gestoßen bin. Ich hoffe, Sie tappen nicht wieder in sie hinein~~

Zusammenfassen

Damit ist dieser Artikel über die Fallstricke bei der Entwicklung von WeChat Mini-Programmen abgeschlossen, die Ihnen möglicherweise noch nicht begegnet sind. Weitere Informationen zu den Fallstricken bei der Entwicklung von WeChat Mini-Programmen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!