So legen Sie den Cache in Uniapp fest, um den weißen Bildschirm zu beheben

Mit der Entwicklung der mobilen Internettechnologie hat das Benutzererlebnis mobiler Anwendungen immer mehr Aufmerksamkeit auf sich gezogen. Unter anderem achten immer mehr Entwickler auf die Startgeschwindigkeit von Anwendungen als einen wichtigen Faktor für die Benutzererfahrung. Während des Entwicklungsprozesses müssen wir häufig Caching verwenden, um den Anwendungsstart zu beschleunigen, die Zeit auf dem weißen Bildschirm zu reduzieren und die Benutzererfahrung zu verbessern. In diesem Artikel erfahren Sie, wie Sie den Cache in Uniapp einrichten, um das Problem mit dem weißen Bildschirm zu lösen.

1. Warum tritt das Problem mit dem weißen Bildschirm auf?

Beim Starten einer Anwendung müssen häufig viele Ressourcen geladen werden, darunter JS, CSS, Bilder usw., und diese Ressourcen müssen von der heruntergeladen werden Server. Wenn viele Ressourcen vorhanden sind oder der Server langsam reagiert, zeigt die Frontend-Seite einen weißen Bildschirm an oder friert ein. Wie in der folgenden Abbildung dargestellt:

Aufgrund der Verzögerung beeinträchtigt ein langer weißer Bildschirm das Benutzererlebnis erheblich und führt sogar zu Benutzerverlusten.

2. So legen Sie den Cache fest

In uniapp können wir die Methode uni.setStorageSync verwenden, um den Cache festzulegen.

1. Konfiguration in main.js

In main.js können wir den folgenden Code hinzufügen, um den Cache der Startseite festzulegen:

// main.js
const showSplashScreen = () => {
  const splashScreenCacheKey = 'splashScreenCacheKey';
  const cacheTimeLimit = 10 * 60 * 1000;  // 单位为毫秒，这里设置10分钟

  const cacheData = uni.getStorageSync(splashScreenCacheKey);
  const now = Date.now();

  if (cacheData && cacheData.timestamp && now  {
        const data = res.data;
        uni.hideLoading();
        uni.redirectTo({ url: data.path });
        uni.setStorageSync(splashScreenCacheKey, {path: data.path, timestamp: now})
      }
    })
  }
}

App({
  async onLaunch() {
    showSplashScreen();
  },
  //...
})

Die Methode im obigen Code dient hauptsächlich dazu, festzustellen, ob wann ein Cache vorhanden ist Starten Sie die zwischengespeicherte Startseite und stellen Sie fest, ob der Cache abgelaufen ist. Wenn ein Cache vorhanden ist und dieser nicht abgelaufen ist, wird die zwischengespeicherte Startseite direkt angezeigt. Andernfalls wird die Startseite erneut abgerufen.

Nachdem Sie die neueste Startseite erhalten haben, müssen die Daten für die nächste Verwendung lokal zwischengespeichert werden. Hier können wir den angeforderten Startseitenpfad und den aktuellen Zeitstempel im Cache speichern. Dadurch wird sichergestellt, dass die zwischengespeicherten Daten beim nächsten Start der Anwendung direkt verwendet werden können, wenn der Cache nicht abgelaufen ist, ohne dass die Daten erneut abgerufen werden müssen, wodurch das Benutzererlebnis verbessert wird.

2. Andere Ressourcen zwischenspeichern

In Uniapp können wir auch andere Ressourcen wie CSS, JS usw. der Seite zwischenspeichern. Es ist zu beachten, dass einige Ressourcen jederzeit aktualisiert werden können und bei jedem Laden erneut angefordert werden müssen. Beispielsweise erfordern einige Daten über Benutzer eine dynamische Darstellung der Seite basierend auf den Echtzeitinformationen des Benutzers. Wir können kein Caching zum Speichern dieser Daten verwenden.

3. Hinweise

1. Die effektive Zeit des Caches muss entsprechend der tatsächlichen Situation eingestellt werden. Wenn die Cache-Zeit zu lang ist, sind die Daten möglicherweise nicht in Echtzeit verfügbar. Wenn die Zeit zu kurz eingestellt ist, sind die zwischengespeicherten Daten möglicherweise nicht verfügbar und müssen erneut angefordert werden.
2. Es ist zu beachten, dass die Verwendung des Caching-Mechanismus dazu führen kann, dass die Daten nicht in Echtzeit verfügbar sind. Daher muss er entsprechend der tatsächlichen Situation verwendet werden, um Fehler zu vermeiden, die dadurch verursacht werden, dass die Daten nicht in Echtzeit verfügbar sind.
3. Beim Einrichten des Caches müssen Sie die entsprechende Cache-Methode entsprechend der tatsächlichen Situation auswählen, z. B. localStorage, sessionStorage, Cookie usw.

4. Zusammenfassung

Bei der Entwicklung von Uniapp-Anwendungen ist das Festlegen des Caches eine der effektivsten Methoden, um die Startgeschwindigkeit und Benutzererfahrung von Anwendungen zu verbessern. In diesem Artikel wird hauptsächlich die Verwendung von Caching in Uniapp vorgestellt, um den Anwendungsstart zu beschleunigen, die Zeit auf dem weißen Bildschirm zu reduzieren und die Benutzererfahrung zu verbessern. Gleichzeitig ist zu beachten, dass bei Verwendung des Caching-Mechanismus dieser entsprechend der tatsächlichen Situation verwendet und entsprechend eingestellt werden muss, um Fehler durch unzureichende Echtzeitdaten zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo legen Sie den Cache in Uniapp fest, um den weißen Bildschirm zu beheben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!