ユニアプリでキャッシュを設定して白い画面を解決する方法

モバイル インターネット テクノロジーの発展に伴い、モバイル アプリケーションのユーザー エクスペリエンスはますます注目を集めています。中でも、アプリケーションの起動速度はユーザーエクスペリエンスを左右する重要な要素の一つとして、ますます多くの開発者が注目しています。開発プロセスでは、アプリケーションの起動を高速化し、ホワイト スクリーン時間を短縮し、ユーザー エクスペリエンスを向上させるために、キャッシュを使用する必要があることがよくあります。この記事では、白い画面の問題を解決するためにuniappでキャッシュを設定する方法を紹介します。

1. 白い画面の問題が発生する理由

アプリケーションを起動するプロセスでは、多くの場合、js、css、画像などを含む多くのリソースをロードする必要があります。サーバーから取得する必要があります。リソースが多い場合、またはサーバーの応答が遅い場合、フロントエンド ページに白い画面が表示されるか、フリーズします。次の図に示すように:

# 遅延により、長い白い画面がユーザー エクスペリエンスに深刻な影響を与え、ユーザーの損失につながることもあります。

2. キャッシュの設定方法

uniapp では、uni.setStorageSync メソッドを使用してキャッシュを設定できます。

1. main.js の構成

main.js に次のコードを追加して、スタートアップ ページのキャッシュを設定できます:

// 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();
  },
  //...
})

上記のコードのメソッドは主に、アプリケーション起動時にキャッシュされた起動ページがあるかどうかを判断し、キャッシュが期限切れになっているかどうかを判断します。キャッシュがあり、有効期限が切れていない場合は、キャッシュされた起動ページが直接表示されます。そうでない場合は、起動ページが再度取得されます。

最新の起動ページを取得した後、次回使用するためにデータをローカルにキャッシュする必要があります。ここで、要求された起動ページのパスと現在のタイムスタンプをキャッシュに保存できます。これにより、次回アプリケーションを起動するときに、キャッシュの有効期限が切れていなければ、データを再取得することなくキャッシュされたデータを直接使用できるため、ユーザー エクスペリエンスが向上します。

2. 他のリソースのキャッシュ

uniapp では、ページの CSS、JS などの他のリソースもキャッシュできます。一部のリソースはいつでも更新される可能性があり、ロードされるたびに再リクエストする必要があることに注意してください。たとえば、ユーザーに関する一部のデータは、ユーザーのリアルタイム情報に基づいてページを動的にレンダリングする必要があるため、このデータを保存するためにキャッシュを使用することはできません。

3. 注意事項

1. キャッシュの有効期限は、実際の状況に応じて設定する必要があります。キャッシュ時間が長すぎると、データが十分にリアルタイムにならない可能性があり、設定時間が短すぎると、キャッシュされたデータが利用できないため、再度リクエストする必要がある可能性があります。
2. キャッシュ メカニズムを使用すると、データが十分にリアルタイムでなくなる可能性があるため、データがリアルタイムでないことによって引き起こされるエラーを避けるために、実際の状況に応じて使用する必要があることに注意してください。十分。
3. キャッシュを設定するときは、localStorage、sessionStorage、Cookie など、実際の状況に応じて適切なキャッシュ方法を選択する必要があります。

4. 概要

ユニアプリ アプリケーションの開発プロセスにおいて、キャッシュの設定はアプリケーションの起動速度とユーザー エクスペリエンスを向上させる効果的な方法の 1 つです。この記事では主に、uniapp でキャッシュを使用してアプリケーションの起動を高速化し、白い画面時間を減らし、ユーザー エクスペリエンスを向上させる方法を紹介します。同時に、キャッシュメカニズムを使用する場合、リアルタイムデータ不足によるエラーを避けるために、実際の状況に応じて適切に使用および設定する必要があることに注意してください。

以上がユニアプリでキャッシュを設定して白い画面を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。