Life cycle and performance indicators of wechat applets

This paper will introduce the life cycle of the whole App, the life cycle of a single page and the life cycle of components of wechat applet, and study the relationship between the life cycle of these three elements, which is of great significance to understand the operation mechanism of the applet in the process of learning and development. Finally, the life cycle sorted out the key indicators of small programs for reference only.

App life cycle

There are three life-cycle related methods in app.js: onLaunch, onShow and onHide.

The first is onLaunch, which is the first lifecycle callback of the entire applet, called after the applet has been initialized.

The applets will then fire the onShow event, which will also fire if the applets are cut back from the background to the foreground.

Finally, the applet cuts to the background event onHide.

Page life cycle

In the parameters of each Page registration function Page(), there are lifecycle methods: onLoad, onShow, onReady, onHide, onUnload.

The first lifecycle callback that a page fires is onLoad, which fires when the page loads and takes the page’s Query argument only once per page;

Next comes onShow, which listens for the display of the page and, unlike onLoad, also triggers this life cycle if the page is hidden and then displayed again (for example, after going to the next page).

After onShow is triggered, the logical layer sends initialization data to the rendering layer. After the rendering layer completes the first rendering, the logical layer is notified to trigger the onReady life cycle, which is only once per page.

NavigateTo, wx. NavigateTo, wx. NavigateTo, wx. NavigateTo, wx.

OnUnload is triggered when a page is unloaded, such as wx.redirectTo or wx.navigateBack to another page.

Component lifecycle

The most important life cycles for components are created, attached, and detached, which include the most important point in time in the lifecycle of a component instance.

First, the Created lifecycle is triggered when the component instance is first created. At this point, setData cannot be called. Normally, this lifecycle should only be used to add custom property fields to the component this.

Then, after the component is fully initialized and the page node tree is entered, the Attached life cycle is triggered. At this point, this.data has been initialized to the current value of the component, and most of the initialization can take place at this point.

The detached life cycle is triggered after the component leaves the page node tree. Detached is triggered when you exit a page if the component is still in the page node tree.

In addition, the component lifecycle also has the Ready and Move life cycles, which occur when the view layer layout is complete and the component instance is moved to another location in the node tree, respectively.

The whole cycle

Now that we know the life cycle order of App, Page, and Component, what is the life cycle order between them? By developing a simple demo and observing the results, you can draw the following conclusions:

Open the page

First, the previous page is hidden, and the components of the new page need to be initialized before the next page can be loaded. After rendering the page for the first time, the component’s ready is triggered, and finally the page’s onReady is triggered, as shown below:

Life cycle order when pageB is opened from PageA

Off-page situations

When you leave the current page, you first trigger onUnload for the current page, followed by detached components from the node tree. Finally, the previous page is displayed, triggering onShow. The diagram below:

Return the lifecycle order from PageB to PageA

Open the App

App, Page, and Component life cycles run in sequence. Load the Page from App first and then load the Page. Before loading the Page, initialize all the components used by the Page, and then trigger the onLoad life cycle of the Page, as shown below:

Life cycle order when opening the App

Go to background

When you switch to the background, the applets and pages are not unloaded, only hidden. The onHide of the page is triggered first, followed by the onHide of the App. The diagram below:

Life cycle order when switching to background

Switch to foreground

When switching to the background, the applet triggers onShow first, followed by the page’s onShow. The diagram below:

Life cycle order when switching to foreground

Key Performance Indicators

After understanding the life cycle of each stage of the small program, we can work out the performance indicators of key nodes, as shown in the following table: