# 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

# 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:

# 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:

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:

This event handler requires return One Object for customizing collections:

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:

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.

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:

# 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:

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

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].message，a.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