Page

Page(Object object)

Register a page in the applet and accept an Object type parameter, which specifies the initial data, life cycle callback, event handling function, etc. of the page.

Parameter

Object object

Properties	Type	Default value	Required	Description
data	Object	-	-	The initial data of the page
onLoad	Object	-	-	Life cycle callback - listen for page loading
onShow	Object	-	-	Life cycle callback - listen for page display
onReady	Object	-	-	Life cycle callback - listen for page initial rendering
onHide	Object	-	-	Life cycle callback - listen for page hiding
onUnload	Object	-	-	Life cycle callback - listen for page unloading
onPullDownRefresh	Object	-	-	Listen for user pull-down actions
onReachBottom	Object	-	-	Handler for bottom-out events on the page
onShareAppMessage	Object	-	-	User clicks the upper right corner to forward
onPageScroll	Object	-	-	Handler for page scrolling events
onCustomBack	Object	-	-	Default callback for developers to intercept page return
onTabItemTap	Object	-	-	When the current page is a tab, it is triggered when the tab is clicked.
Other	any	-	-	Developers can add any function or data to the Object parameter, which can be accessed using this in the page function. This part of the property will be deeply copied when the page instance is created.

Sample code:

//index.js
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do some initialize when page load.
  },
  onShow: function () {
    // Do something when page show.
  },
  onReady: function () {
    // Do something when page ready.
  },
  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
  },
  onResize: function () {
    // Do something when page resize
  },
  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
      }
    );
  },
  customData: {
    hi: "MINA",
  },
});

data

data is the initial data used for the first rendering of the page.

When the page is loaded, data will be passed from the logic layer to the rendering layer in the form of a JSON string, so the data in data must be a type that can be converted to JSON: string, number, Boolean value, object, array WXML The rendering layer can use

Sample code:

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

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

Lifecycle callback function

For details on the triggering of the lifecycle and the routing of the page, see Logic Layer

onLoad(Object query)

Triggered when the page is loaded. A page will only be called once. The parameters in the path of the current page can be obtained in the parameters of onLoad.

Parameter

Name	Type	Description
query	Object	Open the parameters in the path of the current page

onShow()

Triggered when the page is displayed/cut into the foreground

onReady()

Triggered when the initial rendering of the page is completed. A page will only be called once, indicating that the page is ready and can interact with the view layer.

Note: APIs that set interface content, such aswx.setNavigationBarTitle , should be performed after onReady. For details, seeLifecycle

onHide()

Triggered when the page is hidden/cut into the background, such aswx.navigateToor the bottom tab switches to other pages, the mini program cuts into the background, etc.

onUnload()

Triggered when the page is unloaded, such aswx.redirectTo or wx.wx.navigateBackWhen you go to other pages.

Page event processing function

onPullDownRefresh()

Listen for user pull-down refresh events.

• Need to be in app.json windowoption of app.json or Page Configuration Enable enablePullDownRefresh in

• You can trigger the pull-down refresh by wx.startPullDownRefresh , and the pull-down refresh animation is triggered after calling, and the effect is the same as the user's manual pull-down refresh;

• When the data refresh is processed, wx.startPullDownRefresh the pull-down refresh of the current page can be stopped.

onReachBottom()

Listen for the user's pull-up bottoming event

• Can be found in app.json window option of app.json or Page Configuration Set the trigger distance onReachBottomDistance;

• During the sliding within the trigger distance, this event will only be triggered once.

onPageScroll(Object object)

Listen for user sliding page events

Parameter Object object

Name	Type	Description
scrollTop	Number	The distance the page has scrolled vertically (in px)

TIP

• Please define this method in page only when necessary, and do not define an empty method. This will reduce the impact of unnecessary event dispatch on the communication between the rendering layer and the logic layer.
• Please avoid executing operations such as setData that cause communication between the logic layer and the rendering layer too frequently in onPageScroll. In particular, transmitting a large amount of data each time will affect the communication time.

onShareAppMessage(Object object)

Listen for the behavior of the user clicking the forward button in the page ( button component open-type='share') or the 'Forward' button in the upper right menu, and customize the forwarding content.

TIP

• The 'Forward' button will only be displayed in the upper right menu if this event handler is defined.

ParameterObject object:

Name	Type	Description
from	String	Forward event source - button: Forward button in the page; - menu： Forward menu in the upper right corner
target	Object	If the from value is button, the target is the button that triggers this forwarding event, otherwise it is undefined
webViewUrl	String	The page contains web-view Component, returns the currentweb-viewURL
shareTarget	string	Where the user clicks to share

This event handler needs to return an Object to customize the forwarding content. The returned content is as follows:

Name	Type	Description	Default value
title	string	Forwarding title	Current applet name
path	string	Forwarding path	Current page path, must be a full path starting with /
imageUrl	string	Customized image path, which can be a local file path, code package file path or network image path. Supports PNG and JPG. Display image aspect ratio is 5:4	Use default screenshot
entryDataHash	string	Listen to the user clicking the forward button in the page. Only with this parameter, quick sharing is supported	-
shareType	string	Specify the type of sharing	"miniapp"

• shareTarget parameter description:

Current value	Description
0	Open from the current chat window, quickly share to the current chat window
1	Open from the current chat window, quickly share to the current chat window
2	Share to Luffa Moments
3	Share panel to recent contacts
4	Share to quick share friend list

• shareType parameter description:

Used to specify the type of sharing. Currently there are two types of sharing: one is sharing a mini program, and the other is sharing a picture.

Value	Description
"miniapp"	When sharing in the form of a mini program, the title, path, imageUrl, and entryDataHash parameters will take effect
"picture"	When sharing in the form of a picture, the imageUrl and entryDataHash parameters will take effect

Sample code:

Page({
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // From the in-page forwarding button
      console.log(res.target)
    }
    return {
      title: 'Custom Forwarding Title',
      path: '/page/user?id=123'
    }
  }
})

onCustomBack()

Listen for the user's return to the previous page event

• Need to be in app.json windowoption of app.json or Page configuration Enable customNavigateBack in .

• Clicking the tabBar to return, swiping sideways, or pressing the back key to return will trigger this event.

onTabItemTap(Object)

Triggered when a tab is clicked

Object parameter description

Parameter name	Type	Description
index	String	The sequence number of the clicked tabItem, starting from 0
pagePath	String	The page path of the clicked tabItem
text	String	The button text of the clicked tabItem

Sample code:

Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

Component event handler function

Component event handler functions can also be defined in Page. Event binding is added to the component of the rendering layer. When the event is triggered, the event handler function defined in Page will be executed.

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

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

Page.route

Path to the current page, type String

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

Page.prototype.setData(Object data, Function callback)

The setData function is used to send data from the logic layer to the rendering layer (asynchronous) and change the corresponding value of this.data (synchronous).

Parameter

Fields	Type	Required	Description
data	Object	Yes	The data to be changed this time
callback	Function	No	The callback function after the interface update caused by setData is rendered

Object is represented in the form of key: value, and the value corresponding to the key in this.data is changed to value

The key can be given in the form of a data path, which supports changing an item in an array or an attribute of an object, such as array[2].message, a.b.c.d, and does not need to be pre-defined in this.data.

TIP

• Directly modifying this.data without calling this.setData cannot change the state of the page and will cause data inconsistency.
• Only supports setting JSON-able data.
• The data set at a time cannot exceed 1024kB. Please try to avoid setting too much data at a time.
• Please do not set the value of any item in data to undefined, otherwise the item will not be set and may leave some potential problems.

<!--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' // Don't change this.data directly.
    // You should use setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // Alternatively, you can modify this.data and then immediately set the modified field with setData.
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // For object or array fields, you can modify a subfield directly under it, which is usually better than modifying the whole object or array.
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

PageObject[] getCurrentPages()

Get the current page stack. The first element in the array is the homepage, and the last element is the current page.

Notes

• Do not try to modify the page stack, which will cause routing and page status errors

• Do not call getCurrentPages() during App.onLaunch, when page has not been generated.