- micro-channel applet lifecycle methods Detailed

Lifecycle refers to a small program is a series of processes from creation to destruction

In the applet, () to register a page via App () to register a small program, by Page

First look at a small program project structure

As can be seen from the figure, the root directory contains below app.js, app.wxss, app.json three files

This is a global file applet, app.js is a small program logic, app.json is a small program in public settings, app.wxss applet is common stylesheet

In app.js file, define a number of life-cycle approach, onLaunch, onShow, onHide, onError, as well as data from any function or developer to add (can be accessed through this)

The following are the life-cycle approach and describe the role

onLaunch lifecycle methods - small monitor applet program initialization When initialization is complete, it will trigger onLaunch (Global triggers only once)

onShow lifecycle methods - small monitor applet displays when the program is started, or from the background into the foreground display will trigger onShow

onHide lifecycle methods - small programs hidden listening from the front desk when the applet into the background, it will trigger onHide

onError error monitor function when the small script error occurs or api call fails, it will trigger an error message and bring onError

Any other developers to add any function or data to the Object parameters may be accessed by this

We define the following method in app.js file and print it out

App({
  onLaunch: function (options) {
    console.log("app.js ---onLaunch---" + JSON.stringify(options));
  },
  onShow:function(){
    console.log("app.js ---onShow---");
  },
  onHide:function(){
    console.log("app.js ---onHide---");
  },
  onError: function (msg){
    console.log("app.js ---onError---" + msg);
  },
  globalData: {
    userInfo: null
  }
})

This is some of the ways we open a small program to print out

As can be seen, the program sequentially executes the open app.js following onLaunch onShow and methods, and the onLoad page page, and onShow method onReady

Wherein, onLaunch, onShow method returns a parameter object, which contains three parameters, path, query and scene, path applet path is open

query parameter is to open the applet page url, scene scene is open value applet

More scene values can be viewed
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/scene.html

Small switches to the background performs the following two methods

Returns the applet foreground

Life-cycle method defined in the page page

Lifecycle onLoad function - listen for page loads

onReady lifecycle methods - listening initial page rendering is complete

onShow lifecycle functions - page display monitor

onHide life cycle function - monitor page Hide

onUnload lifecycle methods - listening to uninstall page

Page({
  onLoad: function (options) {
    console.log("page ---onLoad---");
  },
  onReady: function () {
    console.log("page ---onReady---");
  },
  onShow: function () {
    console.log("page ---onShow---");
  },
  onHide: function () {
    console.log("page ---onHide---");
  },
  onUnload: function () {
    console.log("page ---onUnload---");
  }
})

Which performs onLoad, onReady and onShow method in turn open the applet

Before and after the switching station performs onHide onShow and Methods,

When the applet page will execute the destruction method onUnload

For example, we define a method in details.js in onUnload

onUnload: function () {
    console.log("details.js  --onUnload")
  },

When we open a new page details.wxml from home, then closed the page

From the chart you can see the page to perform the method onUnload

In addition, the applet provides us with global data management, page by page getApp () method to get app.js examples

E.g:

We define data objects in a globalData app.js

App({
  globalData: {
    userInfo: null
  }
})

// other.js
var appInstance = getApp()
console.log(appInstance.globalData)

Note:
App () must be registered in app.js in, and can not register more than one.
Do not defined in the App (function) in the call getApp (), you can use this app to get the instance.
Do not call getCurrentPages when onLaunch of (), then page has not been generated.
By getApp (after acquiring instance, Do not attempt to call the life-cycle function).

 

 

 

 

 

.