# Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

# 参数

# Object object

# 示例代码

//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 是页面第一次渲染使用的 初始数据 。

页面加载时， data 将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

示例代码：

在开发者工具中预览效果

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

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

# 生命周期回调函数

生命周期的触发以及页面的路由方式 详见

# onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数：

# onShow()

页面显示/切入前台时触发。

# onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如 wx.setNavigationBarTitle ，请在 onReady 之后进行。详见 生命周期

# onHide()

页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

# onUnload()

页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。

# onRouteDone()

路由动画完成时触发。如 wx.navigateTo 页面完全推入后 或 wx.navigateBack 页面完全恢复时。

# 页面事件处理函数

# onPullDownRefresh()

监听用户下拉刷新事件。

• 需要在 app.json 的 window 选项中或 页面配置 中开启 enablePullDownRefresh 。
• 可以通过 wx.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后， wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。

# onReachBottom()

监听用户上拉触底事件。

• 可以在 app.json 的 window 选项中或 页面配置 中设置触发距离 onReachBottomDistance 。
• 在触发距离内滑动期间，本事件只会被触发一次。

# onPageScroll(Object object)

监听用户滑动页面事件。

参数 Object object :

注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起 逻辑层-渲染层通信 的操作。尤其是每次传输大量数据，会影响通信耗时。

# onAddToFavorites(Object object)

本接口为 Beta 版本，安卓 7.0.15 版本起支持，暂只在安卓平台支持

监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。

参数 Object object :

此事件处理函数需要 return 一个 Object，用于自定义收藏内容：

示例代码

Page({
  onAddToFavorites(res) {
    // webview 页面返回 webViewUrl
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',

# onShareAppMessage(Object object)

监听用户点击页面内转发按钮（ button 组件 open-type="share" ）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

参数 Object object :

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

自定义转发内容 基础库 2.8.1 起，分享图支持云图片。

示例代码

在开发者工具中预览效果

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
      }, 2000)
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 

# onShareTimeline()

基础库 2.11.3 开始支持，低版本需做 兼容处理 。

本接口为 Beta 版本，暂只在 Android 平台支持，详见 分享到朋友圈 (Beta)

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

自定义转发内容

事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：

# onResize(Object object)

基础库 2.4.0 开始支持，低版本需做 兼容处理 。

页面尺寸改变时触发。详见 响应显示区域变化

# onTabItemTap(Object object)

基础库 1.9.0 开始支持，低版本需做 兼容处理 。

点击 tab 时触发

Object 参数说明：

示例代码：

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

# onSaveExitState()

基础库 2.7.4 开始支持，低版本需做 兼容处理 。

每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行 退出状态 的保存。

# 组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入 事件绑定 ，当事件被触发时，就会执行 Page 中定义的事件处理函数。

示例代码：

在开发者工具中预览效果

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

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

# Page.route

基础库 1.2.0 开始支持，低版本需做 兼容处理 。

到当前页面的路径，类型为 String 。

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

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

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

# 参数说明

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value 。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message ， a.b.c.d ，并且不需要在 this.data 中预先定义。

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致 。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

示例代码：

在开发者工具中预览效果

<!--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' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data'
  changeNum: function() {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
  changeItemInArray: function() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text':'changed data'
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'