Lifecycle

Mini program supports development using React, but it is slightly different from using React in the browser.

The entry component#

For each Mini Program, a Mini Program instance needs to be registered by calling the App method via app.js, to link the lifecycle callback function, error listening function, page not found listening function, etc.

//app.jsApp({  onLaunch (options) {    // Do something initial when launch.  },  onShow (options) {    // Do something when show.  },  onHide () {    // Do something when hide.  },  onError (msg) {    console.log(msg)  },  globalData: 'I am global data'})

A Mini Program has only one app instance, which is shared to all pages. Developers can obtain the globally unique app instance by using the getApp method, and then obtain data in the app or call a function registered with App by the developers.

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data

Entry configuration#

We can add a new app.json file for global configuration.

The configuration specification is based on the global configuration of the mini program.

// app.json{  pages: ['pages/index/index'],  window: {    backgroundTextStyle: 'light',    navigationBarBackgroundColor: '#fff',    navigationBarTitleText: 'Title',    navigationBarTextStyle: 'black',  },}

onLaunch ()#

Trigger when the app is launched.

onshow ()#

Triggered when the program is launched, or when the foreground is cut.

onHide ()#

Triggered when the application cuts the background.

onError(err)#

Listens for Mini Program error events. Such as a script error or API Call error, etc. The parameter err points to the thrown error.

Page#

For each page of a Mini Program, a page instance needs to be registered by calling the Page method via the js file corresponding to the page, to specify the initial data of the page, the lifecycle callback function, the event processing function.

// index.jsPage({  data: {    text: "This is page data."  },  onLoad: function(options) {    // Do some initialize when page load.  },  onReady: function() {    // Do something when page ready.  },  onShow: function() {    // Do something when page show.  },  onHide: function() {    // Do something when page hide.  },  onUnload: function() {    // Do something when page close.  },  onPullDownRefresh: function() {    // Do something when pull down.  },  onReachBottom: function() {    // Do something when page reach bottom.  },  onShareAppMessage: function () {    // return custom share data when user share.  },  onPageScroll: function() {    // Do something when page scroll  },  onTabItemTap(item) {    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)  },  // Event handler.  viewTap: function() {    this.setData({      text: 'Set some data for updating view.'    }, function() {      // this is setData callback    })  }})

onTabItemTap#

Fired whenever tab item tapped

Parameters#

Object#

Property	Type	Description
index	String	the index of the tab item starting from 0
pagePath	String	the path of the tab item
text	String	the text value of the tab item

Page Configuration#

For each page file (e.g. . /pages/index/index.js), we can add a new . /pages/index/index.json file for page configuration.

// file: pages/index/index.json{  "navigationBarTitleText": "Home"}

Routing parameters#

In the page component, you can get the current page's routing parameters via getCurrentInstance().router.

Page({  onLoad() {    const $instance = getCurrentInstance()    // Get the routing parameters    console.log($instance.router)  }})

onLoad (options)#

Page routing parameters can be accessed during this lifecycle by calling getCurrentInstance().router.

onReady ()#

From this lifecycle mini program has already rendered DOM nodes to the rendering layer using APIs.

onShow ()#

Triggered when the page is displayed/cut to the foreground.

onHide ()#

Triggered when the page is hidden/cut to the background.

onErr(err)#

Listens for Mini Program error events. Such as a script error or API Call error, etc.

onPageScroll()#

Listens user swiping the page.

Parameter Object object:

Property	Type	Description
scrollTop	Number	Scroll distance in the vertical direction (unit: px)

Note: To reduce the impact of triggering of nonessential events on communication between the rendering layer and the logic layer, this method should be defined in page only when necessary. Do not define an empty method. Note: Avoid repeated execution of in onPageScroll that may trigger communication between the rendering layer and the logic layer. Transferring large volume of data each time will result in longer communication time.

A child component in a page

Page({  onPageScroll({ scrollTop }) {    console.log('onPageScroll', scrollTop)  }})

onReachBottom()#

Listens user swiping up to the bottom of the page.

You can set the trigger distance onReachBottomDistance in the app.json window option or in the Page Configuration.
This event is only triggered once when the page scrolls within the trigger distance.

A child component in a page

Page({  onReachBottom() {    console.log('onPageReachBottom')  }})

onShareAppMessage(Object)#

Listen to the user click on the in-page share onbutton assembly open-type="share" Or the upper-right menu "Share" on behavior, or execute bn.showSharePanel, and customize the share content.

Parameters#

Object#

Property	Type	Description
from	String	Share the source of the event. `button`: In-page share button, `menu`: Retweet menu on top right, `code`: Execute `bn.showSharePanel`
target	String	if `from` The value is `button`, Then target That triggered this retweet. `button`, otherwise `undefined`

This event handler requires return One Object or Promise, used to customize the sharing content, returns the following:

field	Type	Introductions	Default value
title	String	Sharing Title	Current applet name
desc	String	Description
imageUrl	String	Custom picture path, should be network picture path. Support for PNG and JPG.	Use default screenshots
path	Function	Sharing path	Current page path Must be based on / Full path to start
success	Function	Callback function when the user forwards on

Page({  onShareAppMessage(...args) {    console.log('onShareAppMessage', args)    return Promise.resolve({      title: 'my title',      desc: 'mydesc',      imageUrl: 'https://public.bnbstatic.com/static/images/common/ogImage.jpg',      path: 'pages/extended/pages/share/share?p=1',      success: res => console.log('shareResult', res.shareResult)),    }  })})