How to set cache in uniapp to solve white screen

With the development of mobile Internet technology, the user experience of mobile applications has attracted more and more attention. Among them, application startup speed, as one of the important factors of user experience, has been paid attention to by more and more developers. During the development process, we often need to use caching to speed up application startup, reduce white screen time, and improve user experience. This article will introduce how to set up cache in uniapp to solve the white screen problem.

1. Why the white screen problem occurs

In the process of starting an application, it is often necessary to load many resources, including js, css, images, etc., and these resources need to be obtained from the server. If there are many resources or the server responds slowly, the front-end page will display a white screen or freeze. As shown in the figure below:

# Due to delay, a long white screen will seriously affect the user experience and even lead to user loss.

2. How to set the cache

In uniapp, we can use the uni.setStorageSync method to set the cache.

1. Configuration in main.js

In main.js, we can add the following code to set the cache of the startup page:

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

Above The method in the code is mainly to first determine whether there is a cached startup page when starting the application, and determine whether the cache has expired. If there is a cache and it has not expired, the cached startup page will be displayed directly, otherwise the startup page will be obtained again.

After obtaining the latest startup page, the data needs to be cached locally for next use. Here we can store the requested startup page path and current timestamp in the cache. This ensures that when the application is started next time, if the cache has not expired, the cached data can be used directly without having to re-obtain the data, thereby improving the user experience.

2. Caching other resources

In uniapp, we can also cache other resources, such as the css, js, etc. of the page. It should be noted that some resources may be updated at any time and need to be re-requested every time they are loaded. For example, some data about users requires dynamic rendering of the page based on the user's real-time information. We cannot use caching to store this data.

3. Notes

1. The cache validity time needs to be set according to the actual situation. If the cache time is too long, the data may not be real-time enough. If the time is set too short, the cached data may not be available and needs to be requested again.
2. It should be noted that using the caching mechanism may cause the data to be not real-time enough, so it needs to be used according to the actual situation to avoid errors caused by the data not being real-time enough.
3. When setting up cache, you need to choose the appropriate cache method according to the actual situation, such as localStorage, sessionStorage, cookie, etc.

4. Summary

In the process of developing uniapp applications, setting cache is one of the effective methods to improve application startup speed and user experience. This article mainly introduces how to use caching in uniapp to speed up application startup, reduce white screen time, and improve user experience. At the same time, it should be noted that when using the caching mechanism, it needs to be used and set appropriately according to the actual situation to avoid errors caused by insufficient real-time data.

The above is the detailed content of How to set cache in uniapp to solve white screen. For more information, please follow other related articles on the PHP Chinese website!