Bagaimana untuk menetapkan cache dalam uniapp untuk menyelesaikan skrin putih

Dengan perkembangan teknologi Internet mudah alih, pengalaman pengguna aplikasi mudah alih telah menarik lebih banyak perhatian. Antaranya, kelajuan permulaan aplikasi, sebagai salah satu faktor penting pengalaman pengguna, telah diberi perhatian oleh semakin ramai pembangun. Semasa proses pembangunan, kami selalunya perlu menggunakan caching untuk mempercepatkan permulaan aplikasi, mengurangkan masa skrin putih dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menyediakan cache dalam uniapp untuk menyelesaikan masalah skrin putih.

1. Mengapakah masalah skrin putih berlaku

Dalam proses memulakan aplikasi, selalunya perlu memuatkan banyak sumber, termasuk js, css, imej, dll., dan sumber ini perlu diperolehi daripada pelayan. Jika terdapat banyak sumber atau pelayan bertindak balas dengan perlahan, halaman hujung hadapan akan memaparkan skrin putih atau beku. Seperti yang ditunjukkan dalam rajah di bawah:

Disebabkan kelewatan, skrin putih yang panjang akan menjejaskan pengalaman pengguna dengan serius dan malah menyebabkan kehilangan pengguna.

2. Cara menetapkan cache

Dalam uniapp, kita boleh menggunakan kaedah uni.setStorageSync untuk menetapkan cache.

1. Konfigurasikan dalam main.js

Dalam main.js, kita boleh menambah kod berikut untuk menetapkan cache halaman permulaan:

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

Kaedah dalam kod di atas adalah untuk menentukan terlebih dahulu sama ada terdapat halaman permulaan cache semasa memulakan aplikasi, dan menentukan sama ada cache telah tamat tempoh Jika terdapat cache dan ia belum tamat tempoh, halaman permulaan cache akan menjadi dipaparkan secara langsung, jika tidak, halaman permulaan akan diperoleh semula.

Selepas mendapatkan halaman permulaan terkini, data perlu dicache secara setempat untuk kegunaan seterusnya. Di sini kita boleh menyimpan laluan halaman permulaan yang diminta dan cap masa semasa dalam cache. Ini memastikan bahawa apabila aplikasi dimulakan pada masa akan datang, jika cache belum tamat tempoh, data cache boleh digunakan terus tanpa perlu mendapatkan semula data, dengan itu meningkatkan pengalaman pengguna.

2. Menyimpan sumber lain

Dalam uniapp, kami juga boleh menyimpan sumber lain, seperti css, js, dsb. halaman. Perlu diingatkan bahawa sesetengah sumber mungkin dikemas kini pada bila-bila masa dan perlu diminta semula setiap kali ia dimuatkan. Contohnya, sesetengah data tentang pengguna memerlukan pemaparan dinamik halaman berdasarkan maklumat masa nyata pengguna Kami tidak boleh menggunakan caching untuk menyimpan data ini.

3. Nota

1. Masa sah cache perlu ditetapkan mengikut situasi sebenar. Jika masa cache terlalu lama, data mungkin tidak cukup masa nyata Jika masa ditetapkan terlalu singkat, data cache mungkin tidak tersedia dan perlu diminta semula.
2. Perlu diambil perhatian bahawa menggunakan mekanisme caching boleh menyebabkan data tidak mencukupi masa nyata, jadi ia perlu digunakan mengikut situasi sebenar untuk mengelakkan ralat disebabkan oleh data masa nyata yang tidak mencukupi.
3. Apabila menyediakan cache, anda perlu memilih kaedah cache yang sesuai mengikut situasi sebenar, seperti localStorage, sessionStorage, cookie, dll.

4. Ringkasan

Dalam proses membangunkan aplikasi uniapp, menetapkan cache ialah salah satu kaedah yang berkesan untuk meningkatkan kelajuan permulaan aplikasi dan pengalaman pengguna. Artikel ini terutamanya memperkenalkan cara menggunakan caching dalam uniapp untuk mempercepatkan permulaan aplikasi, mengurangkan masa skrin putih dan meningkatkan pengalaman pengguna. Pada masa yang sama, perlu diingatkan bahawa apabila menggunakan mekanisme caching, ia perlu digunakan dan ditetapkan dengan sewajarnya mengikut situasi sebenar untuk mengelakkan ralat yang disebabkan oleh data masa nyata yang tidak mencukupi.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan cache dalam uniapp untuk menyelesaikan skrin putih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!