页面.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 })