# Page(Object object)

Register a page in the Mini Program. Take one. Object Type parameters that specify initial data for the page, lifecycle callbacks, event handlers, and so on.

# parameter

# Object object
attribute type Default value Required Introductions
data Object Initial data for the page
options Object Component options for the page, as in Component Constructor to hit the target options Requires the base library version 2.10.1
onLoad function Lifecycle callbackMonitor page loading
onShow function Lifecycle callbackMonitor page display
onReady function Lifecycle callbackMonitor Page Initial Rendering Completed
onHide function Lifecycle callbackMonitor Page Hiding
onUnload function Lifecycle callbackListen Page Uninstall
onPullDownRefresh function Listen for user drop-down actions
onReachBottom function Handle function for bottoming event on page
onShareAppMessage function User click on the upper right to forward
onShareTimeline function User click on the upper right corner forwarded to the circle of friends
onAddToFavorites function User click the upper right corner collection
onPageScroll function Handler for page scrolling trigger event
onResize function Triggered when page size changes, see [Response to display area changes]((view/resizable#Enable screen rotation support on your phone))
onTabItemTap function At present tab Page, click tab Time trigger
Other any Developers can add any function or data to Object Parameter, in the function on the page this Can access

# sample code

//index.js
Page({
  data:  {
    text: "This is page data."
  },
  onLoad: function(options) {
    // From the some initialize when page load.
  },
  onShow: function() {
    // From the something when page show.
  },
  onReady: function() {
    // From the something when page ready.
  },
  onHide: function() {
    // From the something when page hide.
  },
  onUnload: function() {
    // From the something when page close.
  },
  onPullDownRefresh: function() {
    // From the something when pull down.
  },
  onReachBottom: function() {
    // From the something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // From the something when page scroll
  },
  onResize: function() {
    // From the 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 used in the first rendering of the pageInitial data

When the page loads,data Will beJSONThe string form is passed from the logical layer to the render layer, sodataData in must be converted toJSONType: string, number, boolean, object, array.

The render layer can be created by WXML Bind data.

Sample code:

Preview with Developer Tool

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

# Lifecycle callback function

Triggering of the lifecycle and routing of the pageSee for details

# onLoad(Object query)

Triggered when the page loads. A page will be called only once, and can be called in the onLoad Gets the parameters in the path to open the current page.

Parameters:

Name type Introductions
query Object Open parameters in the current page path

# onShow()

Page display/Triggered when entering the front desk.

# onReady()

Triggered when the initial rendering of the page is complete. A page is called only once, meaning the page is ready to interact with the view layer.

Note: to set the interface content API Such as[wx.setNavigationBarTitle]((wx.setNavigationBarTitle), in theonReadyAfter that. See for detailsLife cycle

# onHide()

Page concealment/Triggered when you cut into the background. Such as wx.navigateTo Or bottom tab Switch to other pages, Mini Programs into the background, etc.

# onUnload()

Triggered when the page is unloaded. Such as[wx.redirectTo]((wx.redirectTo) or[wx.navigateBack]((wx.navigateBack) to another page.

# Page event handler

# onPullDownRefresh()

Listen for user drop-down refresh events.

  • Need toapp.jsonof[window]((configuration/app#Window) option, or[Page configuration]((configuration/Open in page))enablePullDownRefresh
  • Can be passed[wx.startPullDownRefresh]((wx.startPull Down Refresh ()) triggers a drop-down refresh, and then triggers a pull-down refresh animation. The effect is consistent with the user's manual pulldown refresh.
  • After processing the data refresh,[wx.stopPullDownRefresh]((wx.stopPull Down Refresh) can stop the drop-down refresh of the current page.

# onReachBottom()

Listen for user bottom-up events.

  • Can beapp.jsonof[window]((configuration/app#Window) option, or[Page configuration]((configuration/Set trigger distance in (page)onReachBottomDistance
  • This event will be triggered only once during slippage within the trigger distance.

# onPageScroll(Object object)

Listens for user sliding page events.

parameter Object object:

attribute type Introductions
scrollTop Number Distance a page has been scrolled vertically (in px)

Note: Please only be present when needed. page Do not define an empty method. To reduce the impact of unnecessary event dispatch on rendering layer - logic layer communication. Note: Please avoid onPageScroll Too frequent execution in setData Equal causeLogic Layer and Render Layer Communication operations. In particular, each transmission of large amounts of data will affect the communication time.

# onAddToFavorites(Object object)

This interface is Beta Version, Android 7.0.15 Version of the support, temporarily only on the Android platform support

Listen to the user click on the upper right corner of the menu "collection" on behavior, and custom collection content.

parameter Object object:

parameter type Introductions
WebViewUrl String The page contains[web-view]((Component, returns the current[web-view]((Web-view).

This event handler requires return One Object for customizing collections:

field Introductions Default value
title Custom Title Page title or account name
imageUrl Custom picture, display picture aspect ratio is 1:1 Page Screenshot
query Custom query fields Query on the current page

sample code

Page({
  onAddToFavorites(res) {
    // webview Page returns WebViewUrl
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: "Custom Title,"
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  }
})

# onShareAppMessage(Object object)

Listen to the user click on the in-page forward onbutton assembly open-type="share"Or the upper-right menu "Forward" on behavior, and customize the forward content.

Note: The Forward on is displayed on the upper-right menu only if this event handler is defined

parameter Object object:

parameter type Introductions Minimum version
from String Forward the source of the event.
button:: In-page forward on
menu:: Retweet menu on top right
1.2.4
target Object if from The value is buttonThen target That triggered this retweet. button, otherwise undefined 1.2.4
WebViewUrl String The page contains[web-view]((Component, returns the current[web-view]((Web-view). 1.6.4

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

Custom forward content Base library 2.8.1 From now on, share chart support cloud picture.

field Introductions Default value Minimum version
title Forwarding Title Current applet name
path Forwarding path Current page path Must be based on / Full path to start
imageUrl Custom picture path, can be local file path, code package file path or network picture path. Support for PNG and JPG. Display picture aspect ratio is 5:4。 Use default screenshots 1.5.0
promise If this parameter exists, then the resolve Yes. If you don't get it in three seconds, Resolve, sharing will use the default parameters passed in above 2.12.0

sample code

Preview with Developer Tool

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: "Custom Forward Header"
        })
      }, 2000)
    })
    return {
      title: Custom Forward Header,
      path: '/page/userid=123',
      promise 
    }
  }
})

# onShareTimeline()

Start from base library version 2.11.3. Please remaining backward compatible.

This interface is Beta Version, for the time being Android Platform support, seeShare to your friends (Beta)

Listen to the upper right menu "share to friends" on behavior, and customize the sharing content.

Note: The "Share to Moments" on appears in the upper-right menu only if this event handler is defined

Custom forward content

The event handler returns a Object, for custom share content, does not support custom page path, return content as follows:

field Introductions Default value Minimum version
title Custom title, that is, the title displayed on the Moments list page Current applet name
query Customize the parameters carried in the page path, such as patha=1&b=2 of “” Back part Parameters carried by the current page path
imageUrl Custom picture path, can be local file or network picture. Support PNG and JPG, display picture aspect ratio is 1:1。 Default Mini Program Logo

# onResize(Object object)

Start from base library version 2.4.0. Please remaining backward compatible.

Triggered when the Mini Program screen rotates. See for details [Response to display area changes]((view/resizable#Enable screen rotation support on your phone))

# onTabItemTap(Object object)

Start from base library version 1.9.0. Please remaining backward compatible.

to hit tab Time trigger

Object Parameter explaination:

parameter type Introductions Minimum version
index String Number of tabItem clicked, starting with 0 1.9.0
pagePath String Page path of tabItem clicked 1.9.0
text String Click tabItem on text 1.9.0

Sample code:

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

# Component event handler

Page Component event handlers can also be defined in. In the components of the render layer[Event binding]((wxml/Event) is executed when an event is triggered Page The event handler defined in the.

Sample code:

Preview with Developer Tool

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

# Page.route

Start from base library version 1.2.0. Please remaining backward compatible.

Path to the current page of typeString

Page({
  onShow: function() {
    console.log(this.route)
  }
})

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

setData Function is used to send data from the logical layer to the view layer (asynchronously), changing the corresponding this.data Is synchronized.

# Parameter specification

field type Required describe Minimum version
data Object yes The data to be changed this time
callback Function no Interface update caused by setData after rendering 1.5.0

Object with key: value In the form of this.data to hit the target key The corresponding value is changed to value

among key Can be given in the form of a data path, supporting changing an item in an array or a property of an object, such as array[2].messagea.b.c.dAnd does not require this.data Predefined in.

Note:

  1. Direct modification this.data Without calling this.setData Can not change the state of the page, but also cause data inconsistencies
  2. Supports settings only JSON Data.
  3. A single set of data can not exceed 1024kB, try to avoid a set of too much data.
  4. Please don't data Any of the value Set to undefined Otherwise this item will not be set and may leave some potential problems.

Sample code:

Preview with Developer Tool

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal A </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',
    A: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' // Don't modify it directly this.data
    // Should use setData
    this.setData({
      text: 'changed data'
    })
  },
  ChangeNum: function() {
    // Alternatively, you can modify this.data Right after. setData Set the modified field.
    this.data.A = 1
    this.setData({
      A: this.data.A
    })
  },
  changeItemInArray: function() {
    // For an object or array field, you can modify a child field directly below it, which is usually better than modifying the entire object or an array
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    })
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

# Inter-page communication

Start from base library version 2.7.3. Please remaining backward compatible.

If one page is passed by another, wx.navigateTo Open, a data channel will be established between the two pages:

  • The open page can be accessed through the this.getOpenerEventChannel() Method to get a EventChannel object
  • wx.navigateTo of success The callback also contains a EventChannel Object.

These two. EventChannel Can be used between objects emit and on Methods send and listen for events to each other.

Preview with Developer Tool