Micro letter applet [life cycle]

Applet divided into three parts applications, pages and components, so the life cycle of a small program involves the following

1. Application life cycle
2. Page life cycle
3. Lifecycle components
4. Influence the life cycle of the application life cycle page

Application life cycle

App () function is used to register a small program. Take an Object parameter, which specifies the lifecycle callbacks and other small programs.
App () must be called app.js, you must call and be called only once.

App({
  onLaunch: function(options) {
    // 监听小程序初始化。小程序初始化完成时（全局只触发一次）
  },
  onShow: function(options) {
    // 监听小程序显示。小程序启动，或从后台进入前台显示时
  },
  onHide: function() {
    // 监听小程序隐藏。小程序从前台进入后台时。
  },
  onError: function(msg) {
    console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
  },
  onPageNotFound: function(res) {
    // 页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数
  },
  globalData: 'I am global data'  //全局变量
})

Foreground, background Definition: When the user clicks to close the upper left corner, or press the Home key to leave the micro-channel device, the applet is not directly destroyed, but into the background; micro letter when entering or re-open the applet again, will enter the foreground from background .

1. The user first opens a small program, triggering onLaunch method (Global triggers only once).
2. After the applet initialization is complete, the trigger onShow method, monitor applet displays.
3. Applet from the foreground into the background, triggering onHide method.
4. Applet from the background into the foreground display, triggering onShow method.
5. Applet running in the background a certain time, or system resources too, will be destroyed.

Global getApp () function can be used to obtain the applet instance App.
Writing:var app = getApp()

Note: Do not defined in the function (in the) App call getApp (), you can use this app to get the instance; by getApp after acquiring instance, Do not attempt to call the life-cycle function ()

Page life cycle

Page (Object) function is used to register a page. Take an Object type parameter, which specifies the initial data page, lifecycle callbacks, event handlers and so on.

//index.js
Page({
  data: {
    // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期回调—监听页面加载
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成
  },
  onShow: function() {
    // 生命周期回调—监听页面显示
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载
  },
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角转发
  },
  onPageScroll: function() {
    // 页面滚动触发事件的处理函数
  },
  onResize: function() {
    // 页面尺寸改变时触发
  },
  onTabItemTap(item) {
    // 当前是 tab 页时，点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 任意的函数，在页面的函数中用 this 可以访问
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 任意数据，在页面的函数中用 this 可以访问
  customData: {
    hi: 'MINA'
  }
})

Page life cycle chart

1. After the applet registration is complete, the page is loaded, triggering onLoad method.
2. After the page is loaded trigger onShow method to display the page.
3. First display page will trigger onReady method, rendering page elements and styles, a page will only be called once.
4. When the applet running in the background or jump to other pages, triggering onHide method.
5. When the applet has the background to the foreground enter or re-enter the page, triggering onShow method.
6. When using the redirection method wx.redirectTo (object) or close the current page Back wx.navigateBack (), triggered onUnload.

to sum up:

1. onLoad: page loads. A page only called once. Parameters can get wx.navigateTo and wx.redirectTo and in the query.
2. onShow: page display. Every time you open the page will be called once.
3. onReady: initial page rendering is complete. A page only called once, on behalf of the page has been ready, you can interact and view layer. Settings interface as wx.setNavigationBarTitle set after onReady.
4. onHide: page hidden. When the call is switched navigateTo or bottom tab.
5. onUnload: Uninstall page. When redirectTo or navigateBack when called.

The life cycle of components

The life cycle of components, referring to the self-assembly of some of the functions that are automatically triggered when a particular point in time or meet some special event framework.

One of the most important life cycle is created attached detached, contain a component instance life processes of the most important point in time.

1. created component is instantiated, the node tree has not been introduced, and therefore can not be used at this time setData
2. attached component initialization is completed, the completion of node tree can be used to render setData node, but a node can not operate
3. ready assembly layout is complete, then the node may acquire information, a node may operate
4. moved component instance is moved to another location in the tree
5. Examples of the component removed from detached node tree

Lifecycle page where components are those components are not and there is a strong correlation, but sometimes components need to learn to deal with the internal components of the life cycle, as defined in the definition section pageLifetimes.

1. Page show where the components are executed when the show
2. Page hide components where the execution time is hidden
3. Executed when the page size changes resize components are located

Influence the life cycle of the application life cycle page

1. After the applet initialization is complete, the page is first loaded trigger onLoad, it will only be triggered once.
2. When the applet into the background, perform page onHide method and then executes the application onHide method.
3. When the program goes from small background to foreground, perform application onShow method then performs page onShow method.