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

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

王林

リリース： 2023-07-04 22:37:15

オリジナル

2634 人が閲覧しました

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 サイトの他の関連記事を参照してください。