uniapp がルートをキャッシュする方法

Uniapp は、1 つのコードで複数端末のアプリケーション開発を実現できるクロスプラットフォーム開発フレームワークです。 uniapp では、ページルーティングジャンプは非常に重要な機能です。ユーザー エクスペリエンスを最適化するには、よく使用されるルーティング ページをキャッシュして、次回入力したときにすぐに読み込めるようにする必要があります。この記事では、uniapp がルートをキャッシュする方法を紹介します。

1. 背景

モバイル アプリケーションでは、通常、新しいページを開くのに数百ミリ秒から数千ミリ秒かかります。この場合、ユーザーはページの読み込みを待っている間は他のことができないため、ユーザー エクスペリエンスが低下します。特にネットワーク環境が悪い場合、ページの読み込み時間はより顕著になります。これを回避するには、ユーザー エクスペリエンスを最適化するためのいくつかの方法を採用する必要があります。

2. uniapp ルート キャッシュ

uniapp は、ユーザー エクスペリエンスを最適化するためのルート キャッシュ メソッドを提供します。ルート キャッシュの意味は、ユーザーがページを離れるときにページがアンロードされずにメモリ内に残るため、次回ユーザーがページに入るときの処理が非常に高速になることです。

uniapp では、ルート キャッシュはデフォルトでオフになっています。したがって、ルート キャッシュを使用する必要がある場合は、それに応じて uniapp を設定する必要があります。

pages.json ファイルでは、「keepAlive」属性を使用して、ページをキャッシュする必要があるかどうかを設定できます。この属性の値は true と false で、true はキャッシュが必要であることを意味し、false はキャッシュが必要ないことを意味します。

例:

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

この例では、「keepAlive」: true は「ホームページ」をキャッシュする必要があることを示し、「keepAlive」: false はキャッシュが実行されないことを示します。

入力ボックスやカウントダウンなどのインタラクティブなシナリオを含むページなど、一部のページはキャッシュに適していないことに注意してください。これらのページでは、以前に保持されていたデータや状態が再表示されるという問題が発生しやすいためです。これらのページでは、ルート キャッシュをオフにする必要があります。

3. ルーティング キャッシュのライフ サイクル

ルーティング キャッシュのライフ サイクルでは、主に次の 3 つの段階を処理する必要があります:

1.activated

ページを開いて表示すると、ページの「アクティブ化された」ライフ サイクル フック関数がトリガーされます。このフック関数では、通常、ページ上でいくつかの初期化操作を実行できます。

2.deactivated

ページが非表示のまま放置されると、ページの「非アクティブ化」ライフサイクル フック機能がトリガーされます。このフック関数では、一部のページ データを保存して消去できます。この保存されたデータは、ページが返されたときに再度使用できます。

3.destroyed

ページが破棄されると、ページの「破棄」ライフサイクル フック関数がトリガーされます。このフック関数では、通常、ページ データ サブスクリプションのキャンセル、タイマーのクリアなど、いくつかのクリーンアップ操作を実行できます。

4. 結論

ルート キャッシュは、uniapp アプリケーションのユーザー エクスペリエンスを効果的に向上させることができます。 「keepAlive」属性を使用すると、キャッシュする必要があるページを構成できます。同時に、キャッシュされたページのライフサイクル中に、キャッシュされたページをより適切に使用できるように関連する操作を実行する必要もあります。

以上がuniapp がルートをキャッシュする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。