How uniapp caches routes

Uniapp is a cross-platform development framework that can realize multi-terminal application development with one set of code. In uniapp, page routing jump is a very important function. In order to optimize the user experience, we need to cache some commonly used routing pages so that they can be loaded quickly the next time they are entered. This article will introduce how uniapp caches routes.

1. Background

In mobile applications, it usually takes hundreds to thousands of milliseconds to open a new page. This time degrades the user experience because the user cannot do anything else while waiting for the page to load. Especially in some cases where the network environment is poor, the page loading time will be more obvious. In order to avoid this from happening, we need to adopt some methods to optimize the user experience.

2. uniapp route cache

uniapp provides a route cache method to optimize user experience. The meaning of route caching is that when the user leaves a page, the page will not be unloaded, but will remain in the memory, so that the next time the user enters the page, it will be very fast.

In uniapp, route caching is turned off by default. Therefore, if you need to use route caching, you need to configure uniapp accordingly.

In the pages.json file, we can use the "keepAlive" attribute to set whether a page needs to be cached. The values ​​of this attribute are true and false. True means caching is required, false means no caching is required.

Example:

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "keepAlive": true
    },
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的"
      },
      "keepAlive": false
    }
  ]
}

In the example, "keepAlive": true indicates that the "home page" needs to be cached, while "keepAlive": false indicates that no caching is performed.

It should be noted that some pages are not suitable for caching, such as pages with interactive scenarios such as input boxes and countdowns. Because these pages are prone to problems with previously retained data or state being redisplayed. For these pages, we should turn off route caching.

3. Life cycle of routing cache

In the life cycle of routing cache, the following three stages mainly need to be processed:

1.activated

When the page is opened and displayed, the page's "activated" life cycle hook function is triggered. In this hook function, we can usually perform some initialization operations on the page.

2.deactivated

When the page is left and hidden, the "deactivated" life cycle hook function of the page will be triggered. In this hook function, we can store and clean some page data. This stored data can be used again when the page is returned.

3.destroyed

When the page is destroyed, the "destroyed" life cycle hook function of the page will be triggered. In this hook function, we can usually perform some cleanup operations, such as canceling page data subscriptions, clearing timers, etc.

4. Conclusion

Route caching can effectively improve the user experience of uniapp applications. By using the "keepAlive" attribute, we can configure the pages that need to be cached. At the same time, during the life cycle of the cached page, we also need to perform related operations to ensure that the cached page can be better used.

The above is the detailed content of How uniapp caches routes. For more information, please follow other related articles on the PHP Chinese website!