Kaedah reka bentuk dan pembangunan untuk UniApp untuk melaksanakan caching luar talian dan ketekunan data

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js yang boleh digunakan untuk membangunkan pelbagai aplikasi, termasuk aplikasi web, aplikasi mudah alih dan aplikasi desktop. Dalam pembangunan sebenar, kami sering menghadapi beberapa masalah, seperti ketidakstabilan rangkaian, akses luar talian pengguna, dll. Untuk meningkatkan pengalaman pengguna, kami perlu melaksanakan caching luar talian dan fungsi kegigihan data dalam UniApp. Artikel ini akan memperkenalkan reka bentuk dan kaedah pembangunan caching luar talian dan ketekunan data dalam UniApp, dan memberikan contoh kod yang sepadan.

1. Reka bentuk dan kaedah pembangunan cache luar talian

Cache luar talian merujuk kepada cache data yang diminta rangkaian secara setempat, dan pengguna boleh terus mengakses data cache tanpa sambungan rangkaian. Dalam UniApp, anda boleh menggunakan uni.setStorageSync dan uni.getStorageSync untuk melaksanakan fungsi caching luar talian.

Pertama, kita perlu mentakrifkan fungsi alat untuk menentukan sama ada cache telah tamat tempoh:

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;
}

Seterusnya, apabila membuat permintaan rangkaian, kita boleh terlebih dahulu menentukan sama ada cache wujud Jika ia wujud dan belum tamat tempoh, data cache akan digunakan secara langsung. Jika tidak, hantar permintaan rangkaian dan cache data yang dikembalikan.

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;
  }
}

Apabila menggunakan fungsi fetchData, kita perlu menghantar parameter api, dataKey dan cacheKey. Antaranya, api ialah alamat antara muka permintaan rangkaian, dataKey ialah parameter permintaan, dan cacheKey ialah nilai kunci cache.

2. Reka bentuk dan kaedah pembangunan ketekunan data

Kegigihan data merujuk kepada menyimpan data dalam aplikasi secara tempatan, supaya data masih boleh dibaca pada kali berikutnya aplikasi dibuka. Dalam UniApp, anda boleh menggunakan uni.setStorageSync dan uni.getStorageSync untuk melaksanakan fungsi kegigihan data.

Pertama, kita perlu menentukan objek kedai global untuk menyimpan data yang perlu diteruskan:

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;

Apabila aplikasi bermula, kita perlu memanggil fungsi init kedai untuk membaca data yang disimpan daripada cache tempatan dan mulakan ia menyimpan objek. Dengan cara ini, walaupun apl ditutup dan dibuka semula, data masih boleh dibaca dengan betul.

Apabila aplikasi perlu mengemas kini data dalam stor, kita bukan sahaja perlu mengemas kini atribut keadaan objek kedai, tetapi juga perlu menyimpan data yang dikemas kini ke cache setempat:

import store from '@/store'

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

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

Dalam coretan kod di atas, fungsi setUserInfo dan fungsi setToken Atribut keadaan objek kedai dikemas kini masing-masing dan fungsi uni.setStorageSync dipanggil untuk menyimpan data ke cache setempat. Dengan cara ini, apabila anda membuka apl seterusnya, data akan dibaca daripada cache setempat.

Ringkasnya, kaedah reka bentuk dan pembangunan untuk melaksanakan caching luar talian dan fungsi kegigihan data dalam UniApp adalah seperti yang diterangkan di atas. Dengan menggunakan fungsi uni.setStorageSync dan uni.getStorageSync dengan betul, kami boleh melaksanakan caching luar talian dan fungsi kegigihan data dan meningkatkan pengalaman pengguna aplikasi. Sudah tentu, dalam pembangunan sebenar, beberapa pelarasan dan pengoptimuman perlu dibuat berdasarkan senario perniagaan tertentu. Saya harap artikel ini dapat memberikan sedikit bantuan kepada semua orang dalam menyelidik dan menggunakan UniApp.

Atas ialah kandungan terperinci Kaedah reka bentuk dan pembangunan untuk UniApp untuk melaksanakan caching luar talian dan ketekunan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!