3.3 页面page

Page(Objectobject)
注册小程序中的一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。参数
Objectobject
属性类型默认值必填
说明
onLoad
function


生命周期回调—监听页面加载
onShow
function


生命周期回调—监听页面显示
onReady
function


生命周期回调—监听页面初次渲染完成
onHide
function


生命周期回调—监听页面隐藏
onUnload
function


生命周期回调—监听页面卸载
onPullDownRefresh
function


监听用户下拉动作
onReachBottom
function


页面上拉触底事件的处理函数
onShareAppMessage
function


用户点击右上角转发
onShareTimeline
function


用户点击右上角转发到朋友圈
onAddToFavorites
function


用户点击右上角收藏
onPageScroll
function


页面滚动触发事件的处理函数
onResize
function


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


当前是tab页时，点击tab时触发
其他
any


开发者可以添加任意的函数或数据到Object参数中，在页面的函数中用this可以访问
示例代码，//index.js，下面的viewTap方法就是自定义的方法，可能是某个事件的响应方法，也可能提供某个功能，例如截取字符串。
Page({
    data:{
        text:"This is page data."
    },
    onLoad:function(options){
        //Dosomeinitializewhenpageload.
    },
    onShow:function(){
        //Dosomethingwhenpageshow.
    },
    onReady:function(){
        //Dosomethingwhenpageready.
    },
    onHide:function(){
        //Dosomethingwhenpagehide.
    },
    onUnload:function(){
        //Dosomethingwhenpageclose.
    },
    onPullDownRefresh:function(){
        //Dosomethingwhenpulldown.
    },
    onReachBottom:function(){
        //Dosomethingwhenpagereachbottom.
    },
    onShareAppMessage:function(){
        //returncustomsharedatawhenusershare.
    },
    onPageScroll:function(){
        //Dosomethingwhenpagescroll
    },
    onResize:function(){
        //Dosomethingwhenpageresize
    },
    onTabItemTap(item){
        console.log(item.index);
        console.log(item.pagePath);
        console.log(item.text);
    },
    //Eventhandler.
    viewTap:function(){
        this.setData({
            text:'Set some data for updating view.'
        },
        function(){
            //thisissetDatacallback
        })
    },
    customData:{
        hi:'MINA'
    }
})
上面的代码里有一个data，data是页面第一次渲染使用的初始数据。它是一个json格式的数据集合。
页面加载时，data将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
渲染层可以通过WXML对数据进行绑定。例如在对于的xwml页面，这样来使用data数据渲染页面：
<view>
    {{text}}
</view>
<view>
    {{array[0].msg}}
</view>
下面是上面用到的data数据，有两个数据，一个是文本text，它的值是initdata；一个是数组array，它有两个元素，第一个元素的msg值是1，第二元素的msg值是2，arra[0].msg表示第一个元素的msg：
Page({
    data:{
        text:'init data',
        array:[
            {
                msg:'1'
            },
            {
                msg:'2'
            }
        ]
    }
})
生命周期回调函数
生命周期的触发以及页面的路由方式详见
onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。

参数：
名称   类型   说明
query   Object   打开当前页面路径中的参数

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。
在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Objectobject)
监听用户滑动页面事件。

参数Objectobject:
属性   类型   说明
scrollTop   Number   页面在垂直方向已滚动的距离（单位px）

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

onAddToFavorites(Objectobject)
本接口为Beta版本，安卓7.0.15版本起支持，暂只在安卓平台支持
监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。

参数Objectobject:
参数   类型   说明
webviewUrl   String   页面中包含web-view组件时，返回当前web-view的url

此事件处理函数需要return一个Object，用于自定义收藏内容：
字段   说明   默认值

title   自定义标题   页面标题或账号名称
imageUrl   自定义图片，显示图片长宽比为1：1   页面截图
query   自定义query字段   当前页面的query

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

onShareAppMessage(Objectobject)
监听用户点击页面内转发按钮（button组件open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
参数Objectobject:参数   类型   说明   最低版本
from   String   转发事件来源。
button：页面内转发按钮；
menu：右上角转发菜单   1.2.4
target   Object   如果from值是button，则target是触发这次转发事件的button，否则为undefined   1.2.4
webViewUrl   String   页面中包含web-view组件时，返回当前web-view的url   1.6.4

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

自定义转发内容基础库2.8.1起，分享图支持云图片。
字段   说明   默认值   最低版本
title   转发标题   当前小程序名称   
path   转发路径   当前页面path，必须是以/开头的完整路径   
imageUrl   自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5:4。   使用默认截图   1.5.0

示例代码
Page({
    onShareAppMessage:function(res){
        if(res.from==='button'){
            //来自页面内转发按钮
            console.log(res.target)
        }
        return{
            title:'自定义转发标题',
            path:'/page/user?id=123'
        }
    }
})

onShareTimeline()
基础库2.11.3开始支持，低版本需做兼容处理。本接口为Beta版本，暂只在Android平台支持，详见分享到朋友圈(Beta)，监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮

自定义转发内容

事件处理函数返回一个Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：
字段   说明   默认值   最低版本
title   自定义标题，即朋友圈列表页上显示的标题   当前小程序名称   
query   自定义页面路径中携带的参数，如path?a=1&b=2的“?”后面部分   当前页面路径携带的参数   
imageUrl   自定义图片路径，可以是本地文件或者网络图片。支持PNG及JPG，显示图片长宽比是1:1。   默认使用小程序Logo   

onResize(Objectobject)
基础库2.4.0开始支持，低版本需做兼容处理。
小程序屏幕旋转时触发。详见响应显示区域变化

onTabItemTap(Objectobject)
基础库1.9.0开始支持，低版本需做兼容处理。
点击tab时触发

Object参数说明：

参数 类型 说明 最低版本
index String 被点击tabItem的序号，从0开始 1.9.0
pagePath String 被点击tabItem的页面路径 1.9.0
text String 被点击tabItem的按钮文字 1.9.0

示例代码：

Page({
    onTabItemTap(item){
        console.log(item.index);
        console.log(item.pagePath);
        console.log(item.text);
    }
})
组件事件处理函数
Page中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行Page中定义的事件处理函数。
示例代码：
<view bindtap="viewtap">
    clickme
</view>
Page({
    viewTap:function(){
        console.log('view tap')
    }
})
Page.route
基础库1.2.0开始支持，低版本需做兼容处理。
到当前页面的路径，类型为String。
Page({
    onShow:function(){
        console.log(this.route)
    }
})