Page(Object)
函数用来注册一个页面。接受一个 Object
类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。属性 | 类型 | 描述 |
object | 页面的初始数据 | |
fuction | 生命周期回调—监听页面加载 | |
fuction | 生命周期回调—监听页面显示 | |
fuction | 生命周期回调—监听页面初次渲染完成 | |
fuction | 生命周期回调—监听页面隐藏 | |
fuction | 生命周期回调—监听页面卸载 | |
fuction | 监听用户下拉动作 | |
fuction | 页面上拉触底事件的处理函数 | |
fuction | 页面滚动触发事件的处理函数 | |
fuction | 用户单击右上角菜单的收藏按钮(基础库支持1.4.0及以上版本) | |
fuction | 用户单击右上角菜单的转发按钮 | |
fuction | ||
onCustomBack | function | 开发者拦截页面的默认返回时回调 |
fuction | 当前是 tab 页时,单击 tab 时触发 | |
其他 | any | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 |
// index.jsPage({data: {text: 'This is page data.'},onLoad(options) {// Do some initialize when page load.},onReady() {// Do something when page ready.},onShow() {// Do something when page show.},onHide() {// Do something when page hide.},onUnload() {// Do something when page close.},onPullDownRefresh() {// Do something when pull down.},onReachBottom() {// Do something when page reach bottom.},onShareAppMessage() {// return custom share data when user share.},onAddToFavorites: function(res) {// return custom favorite data.},onPageScroll() {// Do something when page scroll},onResize() {// Do something when page resize},onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)},// Event handler.viewTap() {this.setData({text: 'Set some data for updating view.'}, function () {// this is setData callback})},customData: {hi: 'MINA'}})
data
是页面第一次渲染使用的初始数据。data
将会以JSON
字符串的形式由逻辑层传至渲染层,因此data
中的数据必须是可以转成JSON
的类型:字符串,数字,布尔值,对象,数组。<view>{{text}}</view><view>{{array[0].msg}}</view>
Page({data: {text: 'init data',array: [{msg: '1'}, {msg: '2'}]}})
名称 | 类型 | 说明 |
query | object | 打开当前页面路径中的参数 |
navigateTo
或底部tab
切换到其他页面,小程序切入后台等。redirectTo
或navigateBack
到其他页面时。属性 | 类型 | 说明 |
scrollTop | number | 页面在垂直方向已滚动的举例(单位:px) |
参数 | 类型 | 说明 |
fromw | string | 转发事件来源。 button:页面内转发按钮 menu:右上角转发菜单 |
webviewUrl | string |
字段 | 类型 | 说明 | 默认值 |
title | string | 参数标题 | 当前小程序名称 |
imageUrl | string | 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG | 当前小程序 logo |
query | string | 页面查询参数,如 a=1&b=2 | 当前页面的查询参数 |
Page({onAddToFavorites: function(res) {console.log('webviewUrl', res.webviewUrl);console.log('from', res.from);return {title: '添加收藏标题',imageUrl: '',query: 'a=1&b=2',}},})
参数 | 类型 | 说明 |
from | string | 转发事件来源。 button:页面内转发按钮; menu:右上角转发菜单 |
target | object | 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined |
webViewUrl | string | |
shareTarget | string | 用户单击分享到哪里,详见下面的 shareTarget 参数说明 |
取值 | 说明 |
0 | 分享到 QQ 好友 |
1 | 分享到 QQ 空间 |
2 | 从当前聊天窗口打开,快速分享到当前聊天窗口 |
3 | 分享到微信好友 |
4 | 分享到微信朋友圈 |
5 | 分享面板分享到最近联系人 |
6 | 分享到快捷分享好友列表 |
字段 | 类型 | 说明 | 默认值 |
title | string | 转发标题 | 当前小程序名称 |
path | string | 转发路径 | 当前页面 path ,必须是以 / 开头的完整路径 |
imageUrl | string | 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及 JPG。默认分享模版显示图片长宽比是 5:4。 | 使用默认截图 |
shareType | string | "miniapp" |
值 | 说明 |
"miniapp" | 以小程序的形式分享,title、path、imageUrl、generalWebpageUrl、entryDataHash、shareTemplateId、shareTemplateData 参数会生效 |
"picture" | 以图片的形式分享,imageUrl、entryDataHash 参数会生效 |
Page({onShareAppMessage(res) {if (res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}return {title: '自定义转发标题',path: '/page/user?id=123'}}})
参数 | 类型 | 说明 |
index | string | 被单击的 tabltem 的序号,从0开始 |
pagePath | string | 被单击 tabItem 的页面路径 |
text | string | 被单击 tabltem 的按钮文字 |
Page({onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)}})
<view bindtap="viewTap">click me</view>
Page({viewTap() {console.log('view tap')}})
String
。Page({onShow() {console.log(this.route)}})
setData
函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步)。字段 | 类型 | 必填 | 描述 |
data | object | 是 | 这次要改变的数据 |
callback | function | 否 | setData 引起的界面更新渲染完毕后的回调函数 |
Object
以 key: value
的形式表示,将 this.data
中的 key
对应的值改变成 value
。array[2].message
,a.b.c.d
,并且不需要在 this.data 中预先定义。<!--index.wxml--><view>{{text}}</view><button bindtap="changeText">Change normal data</button><view>{{num}}</view><button bindtap="changeNum">Change normal num</button><view>{{array[0].text}}</view><button bindtap="changeItemInArray">Change Array data</button><view>{{object.text}}</view><button bindtap="changeItemInObject">Change Object data</button><view>{{newField.text}}</view><button bindtap="addNewField">Add new data</button>
// index.jsPage({data: {text: 'init data',num: 0,array: [{text: 'init data'}],object: {text: 'init data'}},changeText() {// this.data.text = 'changed data' // 不要直接修改 this.data// 应该使用 setDatathis.setData({text: 'changed data'})},changeNum() {// 或者,可以修改 this.data 之后马上用 setData 设置一下修改了的字段this.data.num = 1this.setData({num: this.data.num})},changeItemInArray() {// 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好this.setData({'array[0].text': 'changed data'})},changeItemInObject() {this.setData({'object.text': 'changed data'})},addNewField() {this.setData({'newField.text': 'new data'})}})
本页内容是否解决了您的问题?