Applet dual-thread models and life cycle functions

Dual-threaded model summary

Interface rendering the whole process

1, in the rendering layer wxml file with wxss js file is converted into an object that is virtual DOM

2, the virtual logical generated DOM objects to fit real DOM tree, to render in the rendering layer

3, when the data changes, the update data logical layers, js objects change, compared with diff Algorithm

4, the updated content, fed back to the real DOM tree, update page

Applet app.js in the life cycle

// app.js, only a small program global App object 
// below said background means: users will switch to the phone applet running in the background. This operation is called we switched from the foreground to the background. And we usually develop in the background does not matter 
// hereinafter called the front desk refers to: heavy mobile phone users will applet running in the background, calls to the user's mobile phone display interface, we called the switch from background to foreground. 
App ({ 

  / * 
   * When the applet initialization is complete, it will trigger onlaunch (Global triggers only once), onlaunch background to foreground the phone switches will not be implemented. If 
   * To execute him again, unless you turn off the phone (is closed rather than switch to the background, but directly delete the applet running in the background) applet, and then turn it on again to perform, 
   * / 
  OnLaunch: function () { 
    console.log ( "initial words applet: OnLaunch" ) 
  }, 

  / * * 
   * when the applet is started, or heavy background into the foreground of the time, will perform OnShow, 
   * then we can be judged by the scene value option in this different enter the scene 
   * / 
  onShow: function (option) { 
    Console. log ( "applet onshow,: onShow", the Option) 
  }, 

  / * applet accessible from front to back when triggers: onHide * / 
  onHide: function () { 
    console.log ( "applet accessible from front to back when triggers: onHide" ) 
  } , 

  / * may be used in the global * / 
  GlobalData: { 
    the userInfo: null 
  } 
})

When executed App.js life cycle and what we can do in the entire App object?

Execution App () function is a registered app

1, in the registration app, we can determine the user enters the scene applet by onshow

2, we can function in the life cycle, do some of the data requested.

3, we can set a global target in the app, so that all the pages can be used, such as the above globalData

Page applet lifecycle

// Pages / Test / the test.js 
Page ({ 

  / * * 
   * page initial data 
   * / 
  Data: { 
    MSG: 'own IS SB' , 
  }, 

  / * * 
   * lifecycle function - monitor page loads, if the page does not close, the onload only once 
   * / 
  onLoad: function (Options) { 
      console.log ( "onLoad" ) 
  }, 

   / * lifecycle function - page display monitor, a page from the background to the foreground when cut will be executed * / 
  onShow: function () { 
    console.log ( "onShow" ) 
  }, 
    
  / * lifecycle function - listening hidden page * / 
  onHide: function () { 
    console.log ("onHide" ) 
  }, 

  / * Lifecycle function - listen to uninstall the page * / 
  onUnload: function () { 
    console.log ( "onHide" ) 
  }, 

   / * Lifecycle function - monitor the page is first rendered, the real dom to render and they will execute * / 
  the onReady: function () { 

  }, 

  / * page related event handlers - monitor user actions drop-down, if you want to listen to this action, and then under the trigger function, you must "enablePullDownRefresh ": true can be configured to pull down to refresh. * / 
  OnPullDownRefresh: function () { 
      console.log ( "onPullDownRefresh" ) 
  }, 

  / * Pull event handler bottom of the page, if you want to trigger this event successful, must display a page display is not enough * / 
  onReachBottom: function () {
    console.log("onReachBottom")
  },

})

Object page in the page in which things can be done

1, a network request function in the life cycle, the request data to the server

2, the initialization data in the data, to use wxml

3, listening wxml event, the corresponding event binding function

4, the pull-monitor page, drop-down, etc.