// pages/index/index.js
Page({
  data: {
    title: 'Alipay',
  onLoad(query) {
    // 页面加载
  onShow() {
    // 页面显示
  onReady() {
    // 页面加载完成
  onHide() {
    // 页面隐藏
  onUnload() {
    // 页面被关闭
  onTitleClick() {
    // 标题被点击
  onPullDownRefresh() {
    // 页面被下拉
  onReachBottom() {
    // 页面被拉到底部
  onShareAppMessage() {
    // 返回自定义分享信息
  // 事件处理函数对象
  events: {
    onBack() {
      console.log('onBack');
  // 自定义事件处理函数
  viewTap() {
    this.setData({
      text: 'Set data for update.',
  // 自定义事件处理函数
  go() {
    // 带参数的跳转，从 page/ui/index 的 onLoad 函数的 query 中读取 type
    my.navigateTo({ url: '/page/ui/index?type=mini' });
  // 自定义数据对象
  customData: {
    name: 'alipay',
  

object 属性说明

页面数据对象 data

通过设置 data 指定页面的初始数据。

• data 可以被设置为对象类型，每个页面初始化时会 浅拷贝 该对象并作为当前页面的数据。
• data 也可以被设置为函数类型，每个页面初始化时会执行该函数，并将返回值作为当前页面的数据。

对象类型

Page({
  data: {
    arr: [],
  doIt() {
    this.setData({
      arr: [...this.data.arr, 1],
  
New：新创建的页面实例，未进行业务启动初始化。
Inited：已完成业务启动过程 onLoad/onShow 初始化，已收集得到首屏需要的 data 数据，准备进行渲染。
Readied：已完成首屏渲染。
Hidden：监听到 离开页面的行为 而触发 onHide 进入离开状态。
Unloaded：监听到 销毁页面的行为 而触发 onUnload 进入已销毁状态（该状态下所有 setData 操作无效）。
说明： onLoad、onReady、onUnload 只会被执行一次，而 onHide、onShow 则会执行多次。
生命周期函数方法
onLoad(query: Object)
页面初始化时触发。一个页面只会调用一次。 query 来源于 my.navigateTo 和 my.redirectTo 等接口 URL 字段的参数部份（例如：path?key1=value1&key2=value2）。基础库会将该部份字符串内容解析为 Object，解析规则可查看 小程序全局 / 页面参数设置以及解析细节。

        
属性
类型
描述
query
Object
打开当前页面路径中的参数。
  
onShow()
页面显示/切入前台时触发。
onReady()
页面初次渲染完成时触发。 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 对界面的设置，如 my.setNavigationBar 请在 onReady 之后设置。
onHide()
页面隐藏/切入后台时触发。 如 my.navigateTo 到其它页面或底部 tab 切换等。
onUnload()
页面卸载时触发。 如 my.redirectTo 或 my.navigateBack 到其它页面等。
页面事件处理函数
onShareAppMessage(options: Object)
在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。
开发者可通过传入参数自定义小程序分享内容（例如：标题、描述、图片），用户通过点击或者复制分享的内容可以快速打开小程序，进入指定页面。目前支持的分享渠道有：支付宝朋友动态、支付宝好友、钉钉、新浪微博、微信、QQ。
每个 Page 页面的右上角菜单中默认有 分享 按钮；onShareAppMessage 函数只自定义分享的内容，不影响分享功能。
用户点击分享按钮的时候会调用。
此事件需要返回一个对象（Object）类型，用于自定义分享内容。
分享图片中的二维码的有效期为 60 天，若需要长期有效的二维码，请登录 开放平台控制台
  <button type="primary" open-type="share" a:if="{{canIUseShareButton}}">
    推荐给朋友
  </button>
</view>

返回值

onShareAppMessage 执行后必须返回一个分享对象，用于自定义分享内容。

onTitleClick()

点击标题时触发。

onOptionMenuClick()

点击导航栏额外图标触发。

onPullDownRefresh({from: manual | code })

监听该页面的用户下拉刷新事件。

需要在 app.json 的 window 选项 中开启 "allowsBounceVertical": "YES" 且在页面的 json 文件中设置 "pullRefresh": true ，页面才允许用户触发下拉刷新。

from 的值为 code 表示 startPullDownRefresh 触发的事件； 为 manual 表示用户下拉触发的下拉事件。

注意 ：在安卓环境下通过代码和手势触发下拉刷新的结果都是 manual。建议在调用 my.startPullDownRefresh() 方法时，设置一个标志来区分这两种触发方式，并在若干毫秒后自动清除该标志。

onTabItemTap(object: Object)

目标页面监听 tabBar 的点击事件，切换 tabItem 时触发。

注意 ：首次打开目标页面时，onTabItemTap 会在目标页面 onShow 后触发。重新回到目标页面时，onTabItemTap 会在目标页面 onShow 前触发。

onPageScroll(object: Object)

页面滚动时触发。

onReachBottom()

上拉触底时触发。 onReachBottom()是在上拉触底时才会触发，如果页面已经在页面底部继续上拉是不会再次触发。可以配合 my.pageScrollTo 向上滚动一点位置或者在底部增加数据等方式让页面不是处在底部位置达到可以连续上拉触发 onReachBottom()的效果。

events

在 Page 配置对象中新增以 on 为前缀的事件会引入潜在的问题（可能造成业务逻辑的错误触发），因此除上述基础事件外，新增的事件统一收敛到 Page.events 对象中定义和管理。出于向前兼容考虑，之前的所有事件一般会在 Page.onXX 和 Page.events.onXX 均支持。

自基础库 2.8.6 开始，支持在 Component 通过 rootEvents 参数在组件中监听组件所在页面的生命周期函数以及页面事件处理函数。Component . rootEvents 支持的事件列表与 Page.events 相同。

注意：

• page.events 从基础库 1.13.7 开始支持。
• Component.rootEvents 从基础库 2.8.6 开始支持。
• 请正确区分页面事件函数与 events 内同名事件函数的基础库版本要求。
• onShareAppMessage 只支持在Page对象内定义，不支持在 Page.events / Component.rootEvents 内定义。

以下是 Page.events / Component . rootEvents 支持的事件函数列表：

beforeReload(event: Object)

页面重载前触发，常见于 WKWebView 崩溃与恢复。当页面发生重载时，现有的页面和自定义组件实例会被销毁，而后新建。通过此事件可以将一些销毁前的状态保存下来，传递给新建的页面和自定义组件。

页面实例方法

setData(data: Object, callback: Function)

setData 会将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。 Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value 。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message 、 a.b.c.d ，可以不需要在 this.data 中预先定义。

使用过程中，需要注意以下几点：

• 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
• 仅支持设置可 JSON 化的数据。
• 请尽量避免一次设置过多的数据和频繁多次调用 setData()，两种情况都会影响性能。
• 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

示例代码

<view>{{text}}</view>
<button onTap="changeTitle">Change normal data</button>
<view>{{array[0].text}}</view>
<button onTap="changeArray">Change Array data</button>
<view>{{object.text}}</view>
<button onTap="changePlanetColor">Change Object data</button>
<view>{{newField.text}}</view>
<button onTap="addNewKey">Add new data</button>
<view>hello: {{name}}</view>
<button onTap="changeName">Change name</button>

$spliceData(data: Object, callback: Function)

说明： $spliceData 自 1.7.2 之后才支持，可以使用 my.canIUse('page.$spliceData') 做兼容性处理，可查看 兼容 。

spliceData 同样用于将数据从逻辑层发送到视图层，但是相比于 setData ，在处理长列表的时候，其具有更高的性能。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value 。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message 、 a.b.c.d ，可以不需要在 this.data 中预先定义。 value 为一个数组（格式：[start, deleteCount, ...items]）, 数组的第一个元素为操作的起始位置，第二个元素为删除的元素的个数，剩余的元素均为插入的数据。对应 es5 中数组的 splice 方法。

示例代码

<!-- pages/index/index.axml -->
<view class="spliceData">
  <view a:for="{{a.b}}" key="{{item}}" style="border:1px solid red">
    {{item}}
  </view>
</view>

$batchedUpdates(callback: Function)

批量更新数据。

说明 ： $batchedUpdates 自 1.14.0 之后才支持，可以使用 my.canIUse('page.$batchedUpdates') 做兼容性处理，可查看 兼容 。

参数说明

• 本示例中每次点击按钮，页面的 counter 会加 2。
• 将 setData 放在 this.$batchedUpdates 中，这样尽管有多次 setData ，但是却只有一次数据的传输。

createSelectorQuery

创建 SelectorQuery 对象实例 ，查找定义在页面 .axml 中的节点。支持基础库 2.7.4 及以上版本。可用性判断：

my.canIUse('page.createSelectorQuery');

createIntersectionObserver

创建 IntersectionObserver 对象实例 ，检测定义在页面 .axml 中的节点。支持基础库 2.7.4 及以上版本。可用性判断：

my.canIUse('page.createIntersectionObserver');

createMediaQueryObserver

创建 MediaQueryObserver 对象实例 ，用于监听页面 media query 状态的变化。支持基础库 2.8.2 及以上版本。可用性判断：

my.canIUse('page.createMediaQueryObserver');

getOpenerEventChannel

基础库 2.7.7 起支持。如果一个页面由另一个页面通过 my.navigateTo 打开，这两个页面间将建立一条通信通道：

• 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象。
• my.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

getTabBar

获取自定义 tabBar 实例，参照 自定义 tabBar 。基础库 2.7.20 起支持。

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
Page({
  onLoad() {
    this.setUpdatePerformanceListener({withDataPaths: true}, (res) => {
      console.log(res)
  

Page({
  onShow() {
    // 对应 app.json 中配置的路径值
    console.log(this.route);