Wie Uniapp Routen zwischenspeichert

uniapp ist ein plattformübergreifendes Entwicklungsframework, das die Anwendungsentwicklung mit mehreren Terminals mit einem Codesatz realisieren kann. In Uniapp ist der Seitenrouting-Sprung eine sehr wichtige Funktion. Um das Benutzererlebnis zu optimieren, müssen wir einige häufig verwendete Routing-Seiten zwischenspeichern, damit sie bei der nächsten Eingabe schnell geladen werden können. In diesem Artikel wird erläutert, wie Uniapp Routen zwischenspeichert.

1. Hintergrund

In mobilen Anwendungen dauert es normalerweise Hunderte bis Tausende von Millisekunden, um eine neue Seite zu öffnen. Dieses Mal verschlechtert sich die Benutzererfahrung, da der Benutzer nichts anderes tun kann, während er auf das Laden der Seite wartet. Insbesondere in einigen Fällen, in denen die Netzwerkumgebung schlecht ist, ist die Ladezeit der Seite offensichtlicher. Um dies zu verhindern, müssen wir einige Methoden anwenden, um das Benutzererlebnis zu optimieren.

2. Uniapp-Routen-Cache

uniapp bietet eine Routen-Cache-Methode zur Optimierung der Benutzererfahrung. Die Bedeutung des Routen-Caching besteht darin, dass beim Verlassen einer Seite durch den Benutzer die Seite nicht entladen wird, sondern im Speicher verbleibt, sodass der Benutzer beim nächsten Betreten der Seite sehr schnell vorgeht.

In Uniapp ist das Routen-Caching standardmäßig deaktiviert. Wenn Sie also Routen-Caching verwenden müssen, müssen Sie uniapp entsprechend konfigurieren.

In der Datei „pages.json“ können wir das „keepAlive“-Attribut verwenden, um festzulegen, ob eine Seite zwischengespeichert werden muss. Die Werte dieses Attributs sind „true“ und „false“. „True“ bedeutet, dass Caching erforderlich ist, „false“ bedeutet, dass kein Caching erforderlich ist.

Beispiel:

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "keepAlive": true
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      },
      "keepAlive": false
    }
  ]
}

Im Beispiel gibt „keepAlive“: true an, dass die „Startseite“ zwischengespeichert werden muss, während „keepAlive“: false angibt, dass kein Zwischenspeichern erfolgt durchgeführt wird.

Es ist zu beachten, dass einige Seiten nicht für das Caching geeignet sind, beispielsweise Seiten mit interaktiven Szenarien wie Eingabefeldern und Countdowns. Da diese Seiten anfällig für Probleme mit der erneuten Anzeige zuvor gespeicherter Daten oder des Status sind. Für diese Seiten sollten wir das Routen-Caching deaktivieren.

3. Lebenszyklus des Routencaches

Im Lebenszyklus des Routencaches müssen hauptsächlich die folgenden drei Phasen verarbeitet werden:

1 .aktiviert

Wenn die Seite geöffnet und angezeigt wird, wird die „aktivierte“ Lebenszyklus-Hook-Funktion der Seite ausgelöst. In dieser Hook-Funktion können wir normalerweise einige Initialisierungsvorgänge auf der Seite durchführen.

2.deaktiviert

Wenn die Seite verlassen und ausgeblendet wird, wird die „deaktivierte“ Lebenszyklus-Hook-Funktion der Seite ausgelöst. In dieser Hook-Funktion können wir einige Seitendaten speichern und bereinigen. Diese gespeicherten Daten können beim erneuten Aufruf der Seite wieder verwendet werden.

3.destroyed

Wenn die Seite zerstört wird, wird die „zerstörte“ Lebenszyklus-Hook-Funktion der Seite ausgelöst. In dieser Hook-Funktion können wir normalerweise einige Bereinigungsvorgänge durchführen, z. B. das Abbrechen von Seitendatenabonnements, das Löschen von Timern usw.

4. Fazit

Routen-Caching kann die Benutzererfahrung von Uniapp-Anwendungen effektiv verbessern. Mithilfe des Attributs „keepAlive“ können wir die Seiten konfigurieren, die zwischengespeichert werden müssen. Gleichzeitig müssen wir während des Lebenszyklus der zwischengespeicherten Seite auch verwandte Vorgänge ausführen, um sicherzustellen, dass die zwischengespeicherte Seite besser genutzt werden kann.

Das obige ist der detaillierte Inhalt vonWie Uniapp Routen zwischenspeichert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!