微信小程序学习笔记:Page()（小程序 page）

属性

说明

data

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

options

页面的组件选项，同Component 构造器中的options。

behaviors

类似于mixins和traits的组件间代码复用机制，参见behaviors。

onLoad(Object)

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

onShow

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

onReady

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面内容进行设置的API如wx.setNavigationBarTitle，请在onReady之后进行。

onHide

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

onUnload

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

onPullDownRefresh

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

onReachBottom

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

onShareAppMessage(Object)

监听用户点击页面内转发按钮（button组件open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，参数from(String)：转发事件来源（button：页面内转发按钮，menu：右上角转发菜单），target(Object)：如果from值是button，则 target 是触发这次转发事件的button，否则为undefined，webViewUrl(String)：页面中包含web-view组件时，返回当前web-view的url，此事件处理函数需要return一个Object，用于自定义转发内容，title：转发标题，path：转发路径（必须是以 / 开头的完整路径），imageUrl：自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。promise：如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数。

onShareTimeline

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮，事件处理函数返回一个Object，用于自定义分享内容，不支持自定义页面路径，title：自定义标题，即朋友圈列表页上显示的标题，query：自定义页面路径中携带的参数，如path?a=1&b=2的“?”后面部分，imageUrl：自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。

onAddToFavorites(Object)

监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。参数webViewUrl(String)页面中包含web-view组件时，返回当前web-view的url。此事件处理函数需要 return 一个 Object，用于自定义收藏内容，title：自定义标题，imageUrl：自定义图片，显示图片长宽比为1：1，query：自定义query字段。

onPageScroll(Object)

监听用户滑动页面事件。参数scrollTop(Number)：页面在垂直方向已滚动的距离（单位px）。

onResize(Object)

小程序屏幕旋转时触发，显示区域指小程序界面中可以自由布局展示的区域，默认情况下小程序显示区域的尺寸自页面初始化起就不会发生变化。但有两种方式可以改变：在手机上启用屏幕旋转支持（在app.json的window段中设置"pageOrientation":"auto"，或在页面json文件中配置"pageOrientation":"auto"，pageOrientation还可以被设置为 landscape，表示固定为横屏显示）、在iPad上启用屏幕旋转支持（在app.json中添加"resizable":true，在iPad上不能单独配置某个页面是否支持屏幕旋转）。有时对于不同尺寸的显示区域，页面的布局会有所差异。此时可以使用media query来解决大多数问题。在 WXML 中，可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。此外，可以在页面或者自定义组件 JS 中使用 this.createMediaQueryObserver() 方法来创建一个 MediaQueryObserver 对象，用于监听指定的 media query 的匹配状态。有时仅仅使用media query无法控制一些精细的布局变化。此时可以使用js作为辅助。在js中读取页面的显示区域尺寸，可以使用selectorQuery.selectViewport 。页面尺寸发生改变的事件，可以使用页面的onResize来监听。对于自定义组件，可以使用resize生命周期来监听。回调函数中将返回显示区域的尺寸信息。此外还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）。

onTabItemTap(Object)

点击 tab 时触发，参数index(String)：被点击tabItem的序号，从0开始，pagePath(String)：被点击tabItem的页面路径，text(String)：被点击tabItem的按钮文字。

onSaveExitState

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

其他

可以添加任意的函数或数据到Object参数中，在页面的函数中用this可以访问。这部分属性会在页面实例创建时进行一次深拷贝。