May 17, 2021 WeChat Mini Program Development Document
Base library 2.11.1 starts to support, and low versions need to be compatible.
The initialization of a small program page is divided into two parts.
When you start a page, especially when a small program starts cold and enters the first page, the logical layer initializes for a longer time. During page initialization, the user will see the standard load screen for the small program (at cold start) or may see a slight white screen phenomenon (during page jumps).
Enabling the initial rendering cache allows the view layer to present the rendering results of the initial data of the page to the user directly in advance, without waiting for the logical layer to initialize, which can make the page visible to the user much earlier. Here's how it works:
Using the initial rendering cache, you can:
In the initial rendering cache phase, complex components cannot be displayed or cannot respond to interaction.
Currently supported built-in components:
Custom components themselves can be displayed (but the built-in components used in them follow the above restrictions).
To enable initial rendering caches, the easiest way is to add configuration items "InitialRenderingCache": "static": "static":
{
"initialRenderingCache": "static"
}
If you want to enable all pages, you can add this configuration in the WINDOW configuration segment of App.json:
{
"window": {
"initialRenderingCache": "static"
}
}
After adding this configuration, preview the small program home page in your phone, then kill the applet to enter again, you will render the home page by the initial rendering cache.
Note: In this case, the initial rendering cache is recorded by the result of the page DATA application on the page WXML, does not contain any setData results.
For example, if you want to display the "load" in the page, these words are controlled by the Loading data field:
<view wx:if="{{loading}}">正在加载</view>
In this case, loading should be specified as true in data, such as:
// 正确的做法
Page({
data: {
loading: true
}
})
The loading cannot be set to true by setData:
// 错误的做法!不要这么做!
Page({
data: {},
onLoad: function() {
this.setData({
loading: true
})
}
})
In other words, this approach only contains the rendering results of the page data, that is, the pure static component of the page.
In some scenes, the rendering results of just page data are more limited. Sometimes you want to show extra variable content, such as the URL of the ad image you're showing.
In this case, you can use dynamically to render the cache initially. First, configure "initialRenderingCache": "dynamic":
{
"initialRenderingCache": "dynamic"
}
At this point, the initial render cache is not automatically enabled and this.setInitial RenderingCache (dynamicData) needs to be called on the page to enable it. Where dynamicData is a set of data that participates in page WXML rendering with data.
Page({
data: {
loading: true
},
onReady: function() {
this.setInitialRenderingCache({
loadingHint: '正在加载' // 这一部分数据将被应用于界面上,相当于在初始 data 基础上额外进行一次 setData
})
}
})
<view wx:if="{{loading}}">{{loadingHint}}</view>
In principle, in the way the initial render cache is generated dynamically, the page is re-rendered in the background with dynamic data, which is relatively expensive. Therefore, try to avoid frequent calls to this.setInitialRenderingCache, if called multiple times within a page, only the last call takes effect.
Attention: