WeChat program Registration page Page() function

Page

---

Page() function is used to register a page. Accept an object parameter that specifies the initial data, lifecycle functions, event handler, and so on for the page.

Object parameter description:

Property	Type	Describe
data	Object	The initial data for the page
onLoad	Function	Lifecycle function - listens for page load
onReady	Function	Life cycle function - Listen for the first rendering of the page
onShow	Function	Lifecycle function - Listen for page display
onHide	Function	Lifecycle function - Listen for page hiding
onUnload	Function	Life cycle function - listen to page uninstall
onPullDownRefresh	Function	Page-related event handler -- listens to the user's pull-down action
onReachBottom	Function	The handler for the bottom-of-the-page event
onShareAppMessage	Function	The user clicks on the top right corner to forward
onPageScroll	Function	The handler of the page scroll trigger event
Other	Any	Developers can add any function or data to the object parameter, which can be accessed in the function this the page

Example 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.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

Initialize the data

---

Initializing the data is rendered as the first time the page is rendered. Data is passed from the logical layer to the rendering layer in the form of JSON, so its data must be in a format that can be converted to JSON: strings, numbers, Boolean values, objects, arrays.

The rendering layer can bind data through WXML.

Example code:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

Lifecycle functions

---

• onLoad The page is loaded

  • A page is called only once, and you can get the query parameter called to open the current page in onLoad.

• onShow The page is displayed

  • Each time you open a page, it is called once.

• onReady The page is rendered for the first time

  • A page is called only once, which represents that the page is ready to interact with the view layer.
  • Settings for interfaces wx.setNavigationBarTitle are set onReady See Life Cycle for details

• onHide The page is hidden

  • Called navigateTo tab switches.

• onUnload : Page uninstall

  • Called redirectTo navigateBack

The call to the lifecycle and how the page is routed can be found in detail

OnLoad parameters

Type	Description
Object	The query parameter called by the current page is opened by the other page

Page-related event handler

---

• onPullDownRefresh : pull-down refresh

  • Listen for user pull-down refresh events.
  • enablePullDownRefresh needs to be turned on in config window options.
  • When the data refresh is processed, wx.stopPullDownRefresh stop the pull-down refresh of the current page.

• onReachBottom : Pull-up bottom

  • Listen for user pull-down bottom events.

• onPageScroll Page scroll

  • Listen for user swipe page events.
  • The parameter is Object and contains the following fields:

Field	Type	Description
scrollTop	Number	Distance at which the page has been scrolled vertically (px)

• onShareAppMessage User forwarding
  • The Forward button appears in the upper right-hand menu only if this event handler is defined
  • The user calls when they click the forward button
  • This event requires return an Object to customize the forwarding content

Custom forwarding fields

Field	Description	The default
title	Forward the title	The current program name
path	The forwarding path	The current page path must be the full path that begins with /

The sample code

Page({
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

The event handler

---

In addition to initializing data and lifecycle functions, there are special functions that can be defined in Page: event handler. The rendering layer can add event bindings to the component, and when the trigger event is reached, the event handler defined in page is executed.

Example code:

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.route

---

route field gets the path to the current page.

Page.prototype.setData()

---

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

SetData() parameter format

---

Accept an object that changes the value of key in this.data to value in the form of key, value.

Key can be very flexible, given in the form of a data path, such as array[2].message a.b.c.d and does not need to be pre-defined in this.data.

Attention:

1. Modifying this.data directly without calling this.setData does not change the state of the page and can also result in data inseidity
2. You can't set more than 1024kB of data on a single set, so try to avoid setting too much data at once.

Example code:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> 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 don't need to figure it out right now, but it will help later.

Life cycle

---

The following illustration illustrates the life cycle of a Page instance.