【page.js】配置及Page函数说明

页面.js中的Page函数用来注册一个页面，指定页面的初始数据、生命周期回调、事件处理函数等。

语法：Page(Object)
参数: Object json对象

  1 Page({
  2     
  3     /**
  4     * data
  5     * 说明: 页面的初始数据
  6     **/
  7     data : {
  8         // 定义本页面所需的变量
  9         text : "This is page data."
 10     },
 11     
 12     
 13     /**
 14     * onLoad(query)
 15     * 说明: 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
 16     * 参数: query    [Object] 打开当前页面路径中的参数
 17     **/
 18     onLoad : function(query){
 19     },
 20     
 21     
 22     /**
 23     * onShow()
 24     * 说明: 页面显示/切入前台时触发。。
 25     **/
 26     onShow : function(){
 27     },
 28     
 29     
 30     /**
 31     * onReady()
 32     * 说明: 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
 33     **/
 34     onReady : function(){
 35     },
 36     
 37     
 38     /**
 39     * onHide()
 40     * 说明: 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
 41     **/
 42     onHide : function(){
 43     },
 44     
 45     
 46     /**
 47     * onUnload()
 48     * 说明: 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
 49     **/
 50     onUnload : function(){
 51     },
 52     
 53     
 54     /**
 55     * onPullDownRefresh()
 56     * 说明: 监听用户下拉刷新事件。
 57     * 注意:
 58     *      1) 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
 59     *      2) 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
 60     *      3) 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
 61     **/
 62     onPullDownRefresh : function(){
 63     },
 64     
 65     
 66     /**
 67     * onReachBottom()
 68     * 说明: 监听用户上拉触底事件。
 69     * 注意:
 70     *      1) 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
 71     *      2) 在触发距离内滑动期间，本事件只会被触发一次。
 72     **/
 73     onReachBottom : function(){
 74     },
 75     
 76     
 77     /**
 78     * onPageScroll(Object)
 79     * 说明: 监听用户滑动页面事件。
 80     * 参数: Object，可以通过Object获取以下数据：
 81     *      Object.scrollTop    [Number] 页面在垂直方向已滚动的距离（单位px）
 82     **/
 83     onPageScroll : function(Object){
 84     },
 85     
 86     
 87     /**
 88     * onShareAppMessage(Object)
 89     * 说明: 监听用户转发行为。是点击转发按钮（<button> 组件 open-type="share"）还是右上角菜单“转发”按钮的行为，并自定义转发内容。
 90     * 参数: Object，可以通过Object获取以下数据：
 91     *      Object.from         [button|menu] 转发事件来源。值为 button 时表示点击页面转发按钮。 值为menu通过点击页面右上角转发菜单。
 92     *      Object.target       [Object] 如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
 93     *      Object.webViewUrl   [String] 页面中包含<web-view>组件时，返回当前<web-view>的url
 94     *
 95     * 注意: 
 96     *     1) 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
 97     *     2) 该函数需要返回一个对象，用于自定义转发内容
 98     **/
 99     onShareAppMessage : function(Object){
100         // 返回对象，定义转发内容
101         return {
102             title : [String],
103             path  : [String],   // 当前页面 path ，必须是以 / 开头的完整路径，比如：/page/user?id=123
104             imageUrl : [String] // [可选] 自定义图片路径，可以是任意图片路径，支持PNG及JPG。显示图片长宽比是 5:4。不设置时使用默认截图
105         }
106     },
107 
108     
109     /**
110     * onTabItemTap(Object)
111     * 说明: 监听点击 tab 时触发
112     * 参数: Object，可以通过Object获取以下数据：
113     *      Object.index       [String] 被点击tabItem的序号，从0开始
114     *      Object.pagePath    [String] 被点击tabItem的页面路径
115     *      Object.text        [String] 被点击tabItem的按钮文字
116     **/
117     onTabItemTap : function(Object){
118     },
119     
120     
121     /**
122     * 自定义组件事件
123     * 组件中加入 bindtap="sample"，在Page内定义该事件
124     * 比如组件： <view bindtap="sample">点我</view>
125     * 定义点击事件示例：
126     **/
127     sample : function(){
128         // 这里定义单击事件
129     },
130     
131     
132     /**
133     * 属性: this.route 
134     * 说明: Page内置属性，返回当前页面的路径，不含扩展名，比如： page/index/index
135     */
136     
137     
138     /**
139     * 函数:  this.setData(Object data, Function callback)
140     * 说明:  更改或增加page.data下的变量值，同时改变对应的视图层调用数据
141     * 示例:
142     *       this.setData({text : '新内容'})  // 更改或增加data下的text键值
143     *       this.setData({'marray[0].text' : 123}); // 修改键名marray第一个元素的键名为text的值
144     *       this.setData({'object.text' : 567}); // 修改键名object下的键名为text的值
145     *       this.setData({'a.b' : 1}); // 如果this.data.a.b 不存在时，则新建这个键。不管是否存在this.data.a路径
146     *
147     * 注意:
148     *       1) 要获取data下定义的数据，采用 this.data.text 方式获取
149     *       2) 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
150     *       3) 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
151     *       4) 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
152     */
153     
154 })

 

更多专业前端知识，请上 【猿2048】www.mk2048.com