オフライン キャッシュとデータ永続性を実装するための UniApp の設計および開発方法

UniApp は、Vue.js に基づくクロスプラットフォーム開発フレームワークで、Web アプリケーション、モバイル アプリケーション、デスクトップ アプリケーションなどのさまざまなアプリケーションの開発に使用できます。実際の開発では、ネットワークが不安定だったり、ユーザーがオフラインでアクセスできなかったりするなどの問題に直面することがよくあります。ユーザーエクスペリエンスを向上させるには、UniAppにオフラインキャッシュとデータ永続化機能を実装する必要があります。この記事では、UniApp でのオフライン キャッシュとデータ永続化の設計と開発方法を紹介し、対応するコード例を示します。

1. オフライン キャッシュの設計と開発方法

オフライン キャッシュとは、ネットワークから要求されたデータをローカルにキャッシュすることを指し、ユーザーはネットワーク接続なしでキャッシュされたデータに引き続きアクセスできます。 UniAppでは、uni.setStorageSyncとuni.getStorageSyncを使用してオフラインキャッシュ機能を実装できます。

まず、キャッシュの有効期限が切れているかどうかを判断するツール関数を定義する必要があります:

function isCacheExpired(cacheTime) {
  if (!cacheTime) {
    return true;
  }
  const currentTime = new Date().getTime();
  const expireTime = new Date(cacheTime).getTime() + 24 * 60 * 60 * 1000; // 缓存时间为一天
  return currentTime > expireTime;
}

次に、ネットワーク リクエストを開始するときに、まずキャッシュが存在するかどうかを判断できます。有効期限が切れていない場合は、キャッシュされたデータが直接使用されます。それ以外の場合は、ネットワーク要求を送信し、返されたデータをキャッシュします。

import { isCacheExpired } from '@/utils'

async function fetchData(api, dataKey, cacheKey) {
  const cache = uni.getStorageInfoSync(cacheKey);
  if (cache && !isCacheExpired(cache.time)) {
    return uni.getStorageSync(cacheKey);
  }else{
    const res = await uni.request({
      url: api,
      method: 'GET',
      data: dataKey,
    });
    const data = res.data;
    uni.setStorageSync(cacheKey, { data, time: new Date() });
    return data;
  }
}

fetchData 関数を使用する場合は、api、dataKey、cacheKey パラメータを渡す必要があります。このうち、api はネットワーク リクエストのインターフェイス アドレス、dataKey はリクエスト パラメータ、cacheKey はキャッシュされたキーの値です。

2. データ永続性の設計および開発方法

データ永続性とは、アプリケーション内のデータをローカルに保存し、次回アプリケーションを開いたときにもデータを読み取ることができるようにすることを指します。 UniApp では、uni.setStorageSync と uni.getStorageSync を使用してデータ永続化機能を実装できます。

まず、永続化する必要があるデータを保存するためにグローバル ストア オブジェクトを定義する必要があります:

const store = {
  state: {
    userInfo: null,
    token: null,
  },
  setUserInfo(userInfo) {
    this.state.userInfo = userInfo;
    uni.setStorageSync('userInfo', userInfo);
  },
  setToken(token) {
    this.state.token = token;
    uni.setStorageSync('token', token);
  },
  init() {
    this.state.userInfo = uni.getStorageSync('userInfo');
    this.state.token = uni.getStorageSync('token');
  },
};
store.init();
export default store;

アプリケーションが起動したら、ストアの init 関数を呼び出して取得する必要があります。ローカル キャッシュからデータを取得し、保存されたデータを読み取り、ストア オブジェクトを初期化します。これにより、アプリを閉じて再度開いた場合でも、データを正しく読み取ることができます。

アプリケーションがストア内のデータを更新する必要がある場合、ストア オブジェクトの state 属性を更新するだけでなく、更新されたデータをローカル キャッシュに保存する必要もあります:

import store from '@/store'

function setUserInfo(userInfo) {
  store.setUserInfo(userInfo);
  // 其他逻辑
}

function setToken(token) {
  store.setToken(token);
  // 其他逻辑
}

上記のコード内 フラグメントでは、setUserInfo 関数と setToken 関数がそれぞれストア オブジェクトの state 属性を更新し、uni.setStorageSync 関数を呼び出してデータをローカル キャッシュに保存します。こうすることで、次回アプリを開いたときにデータがローカル キャッシュから読み取られます。

まとめると、UniApp でオフライン キャッシュとデータ永続化機能を実装するための設計および開発方法は上記のとおりです。 uni.setStorageSync 関数と uni.getStorageSync 関数を適切に使用することで、オフライン キャッシュとデータ永続化機能を簡単に実装し、アプリケーションのユーザー エクスペリエンスを向上させることができます。もちろん、実際の開発では、特定のビジネス シナリオに基づいていくつかの調整や最適化を行う必要があります。この記事が、UniApp を調べて使用する皆さんにとって少しでも役立つことを願っています。

以上がオフライン キャッシュとデータ永続性を実装するための UniApp の設計および開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。