Small program (3) life cycle

First, life cycle

The App() function registers a small program. Accepts an object parameter that specifies the life cycle function of the applet, etc.

Object Parameter Description:

Foreground and background definition: When the user clicks the upper left corner to close, or press the Home button of the device to leave wechat, the small program is not destroyed directly, but enters the background; When you enter wechat or open the small program again, you will enter the foreground from the background.

Application life cycle

· When the user opens the small program for the first time, onLaunch is triggered (globally only once).

· After the initialization of the applets, the onShow method is triggered to listen for the display of the applets.

· The applets enter the background from the foreground and trigger the onHide method.

· Small program from the background into the foreground display, triggering the onShow method.

· Small programs will be destroyed if they run in the background for a certain time or occupy too much system resources.

Sample code:

App({  onLaunch: function() {// open for the first time}, onShow:function() {// after the applet is initialized}, onHide:function() {// small program from the foreground into the background}, onError:function(msg) {    console.log(msg)  },  globalData: 'global data'})Copy the code

Applets provide a global getApp() function to get an instance of the applets.

// other.jsvar appInstance = getApp()console.log(appInstance.globalData) // I am global data

Note: App() must be registered in app.js and cannot have multiple registrations.

Do not call getApp() in a function defined inside App(); use this to get the App instance.

Do not call getCurrentPage() at onLaunch when the page has not been generated.

After getting the instance from getApp(), do not secretly call the lifecycle function.

Page life cycle

The Page() function is used to register a Page. Accepts an object parameter that specifies the page’s initial data, lifecycle functions, event handlers, and so on. Object Parameter Description:

Page life cycle

· After the registration of the applets is completed, the page is loaded and the onLoad method is triggered.

· The onShow method is triggered after the page is loaded to display the page.

· When the page is displayed for the first time, the onReady method is triggered to render the page elements and styles, which is called only once per page.

· The onHide method is triggered when the applet runs in the background or jumps to another page.

· The onShow method is triggered when the small program has a background to run in the foreground or re-enter the page.

· onUnload is triggered when using the redirection method wx.redirectto (OBJECT) or closing the current page to return to the previous page wx.NavigateBack ().

Conclusion:

· onLoad: page loading. 1) A page is called only once. Wx. navigateTo and wx.redirectTo and query in < Navigator />.

· onShow: page display 1) It will be called once every time the page is opened.

· onReady: the page is rendered for the first time. 1) A page is called only once, indicating that the page is ready to interact with the view layer. 2) Please set the interface Settings such as wx.setNavigationBarTitle after onReady.

· onHide: Page hide 1) Called when navigateTo or bottom TAB is switched.

· onUnload: Page unloads 1) Called when redirectTo or navigateBack.

Sample code:

//index.js

Page({  data: {    text: "This is page data."  },  onLoad: function(options) {    // some initialize when page load.  },  onReady: function() {    // something when page ready.  },  onShow: function() {    // something when page show.  },  onHide: function() {    // something when page hide.  },  onUnload: function() {    // something when page close.  },  onPullDownRefresh: function() {    // something when pull down.  },  onReachBottom: function() {    // something when page reach bottom.  },  onShareAppMessage: function () {   // share data when user share.  },  // Event handler.  viewTap: function() {    this.setData({      text: 'updating view.'    })  },  customData: {    Name: 'name'  }})Copy the code

Page life cycle

Page life cycle

Applets are composed of two main threads: the view thread, which is responsible for the interface, and the AppService thread, which is responsible for data and service processing. The two threads work together to complete the invocation of the page life cycle of the applets.

The view thread has four states:

1. Initialization state: initialize the work required by the view thread. After the initialization is complete, send the initialization completion signal to the “service thread”, and then enter the waiting state, waiting for the service thread to provide initialization data.

2. First rendering state: After receiving the initialization data (JSON and DATA data in JS) provided by the service thread, render the small program interface. After rendering, send “first rendering completion signal” to the service thread and show the page to the user.

3. Continuous rendering state: At this point, the interface thread continues to wait for the interface data sent by the “service thread” through this.setData () function, and re-renders the interface as soon as it receives it. Therefore, as long as the data is updated and the signal is sent, the interface will be automatically updated.

4. End state: Triggered when the page is reclaimed or destroyed, or the application is reclaimed or destroyed by the system.

Five states of service threads:

1. Initialization state: This phase starts only the basic functions required by the service thread, such as the signal sending module. When the system is initialized, call custom onload and onshow, and wait for the view thread’s “View thread initialization complete” number. Onload is executed only once on the first rendering, onshow is executed every interface switch, simple to understand, that’s the only difference.

2. Waiting for activation state: After receiving the signal “View thread initialization completed”, the initialization data is sent to the “View thread”, waiting for the view thread to complete the initial rendering.

3. Active state: After receiving the “first render complete” signal from the view thread, it enters the active state, i.e. the normal running state of the program, and calls the custom onReady() function. In this state, the user can use the this.setData function to send interface data to the interface thread for local rendering, updating the page.

4. Background running state: If the interface enters the background, the service thread enters the background running state. From the current official interpretation, this state is very strange, and the activation state is the same, and the interface can also be updated through the setData function. After all, the framework of the small program has just been launched, should be very different afterwards.

5. End state: Triggered when the page is reclaimed or destroyed, or the application is reclaimed or destroyed by the system.

Application life cycle impact on page life cycle

The relationship between application life cycle and page life cycle

· After the initialization of the applet, onLoad will be triggered only once when the page is loaded for the first time.


· When the applet enters the background, execute the page onHide method first and then apply the onHide method.


· When the small program enters the foreground from the background, apply onShow method first and then execute the page onShow method.