WeChat Open Platform

Mini Programs Documentation

Page

Page()

The Page() function is used to register a page. When it receives an object parameter, it specifies the initialization data, lifecycle functions, and event processing functions for a page.

Object parameter descriptions:

Attribute Type Description
data Object Page initialization data
onLoad Function Lifecycle function - monitors page loading
onReady Function Lifecycle function - monitors completion of initial page rendering
onShow Function Lifecycle function - monitors page display
onHide Function Lifecycle function - monitors page hiding
onUnload Function Lifecycle function - monitors page unloading
onPullDownRefresh Function Page-related event processing function - monitors user pull down actions
onReachBottom Function Processing function for scrolling to bottom and pulling up events
onShareAppMessage Function User taps top right corner to forward
Other Any Developers can add any functions or data to the object parameters and use this to access them in the page functions

Sample code:

//index.js
Page({
  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.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

Initialization data

The initialization data will be used for the first rendering of a page. The data will be transferred from the logical layer to the rendering layer in JSON form, so it must be able to be converted into JSON format: strings, numbers, booleans, objects, and arrays.

The rendering layer can use WXML to bind the data.

Sample code:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

Lifecycle function

  • onLoad: Page loading

    • Will only be called once per page. The query parameters called to open the current page can be obtained in onLoad.
  • onShow: Page display

    • Will be called once every time a page is opened.
  • onReady: Completion of initial page rendering

    • Will only be called once per page. Indicates that the page is ready and can interact with the view layer.
    • Please set interface settings such as wx.setNavigationBarTitle after onReady has been called. Refer to Lifecycle for more details.
  • onHide: Page hiding

    • Called when navigateTo or bottom tab are toggled.
  • onUnload: Page unloading

    • Called when redirectTo or navigateBack are used.

Refer to Routing for more details on lifecycle calls and page route methods.

onLoad parameters

Type Description
Object The query parameters called for other pages to open the current page
  • onPullDownRefresh: Pull down refresh
    • Monitors user pull down refresh events.
    • enablePullDownRefresh needs to be activated from the config window option.
    • After the data refresh has been processed, wx.stopPullDownRefresh can stop the pull down refresh on the current page.
  • onShareAppMessage: User forwarding
    • The menu in the top right corner will only display the Forward button if the processing function for this event has been defined.
    • It will be called when a user clicks on the Forward button.
    • This event needs to return an object, the user can customize the content to be forwarded.

Custom forwarding fields

Field Description Default value
title Forwarding title Current Mini Program name
path Forwarding path Current page path, must be a full path with a / at the beginning

Sample code

Page({
  onShareAppMessage: function () {
    return {
      title: 'Custom forwarding title',
      path: '/page/user?id=123'
    }
  }
})

Event processing functions

In addition to initialization data and lifecycle functions, some special functions can also be defined in Page: event processing functions. Event Binding can be added to components in the rendering layer. It will execute the event processing functions defined in Page when an event is triggered.

Sample code:

<view bindtap="viewTap"> click me </view>
Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.setData()

The setData function is used to send data from the logical layer to the view layer, while changing the corresponding this.data values.

setData() parameter formats

When an object received is expressed in key or value form, it changes the values corresponding to keys in this.data into values.

Keys can be very flexible and provided in data path form, such as array[2].message or a.b.c.d. They also do not need to be predefined in this.data.

Note:

  1. Directly modifying this.data without calling this.setData will not change the page status and will also cause data inconsistency.
  2. The data set on a single occasion cannot exceed 1024kB, please try to avoid setting too much data at once.

Sample code:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeText"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

You do not need to fully understand the following content all at once, but it will be helpful later on.

Lifecycle

The figure below illustrates the lifecycle of a Page instance.