这里把“页面的js逻辑层(注册页面)”单独罗列出来,因为深度地理解是非常有必要的。
这个页面与我们开发小程序息息相关。
小程序中的页面:模块化的页面
一:在第二节小程序目录结构中讲到
js文件为小程序的逻辑文件
第三节:一个描述整体程序的 app 之app.js文件(注册小程序项目),这是整个小程序的逻辑层
这里我们说到页面的逻辑层:
其主要功能就是“注册页面”
每个页面目录/页面名称.js
页面注册的使用:与app.js的注册小程序项目函数App(Object)类似使用
Page(Object)
Object参数对象{}表示,其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销
二:Object参数属性
属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数--监听页面加载
onReady Function 生命周期函数--监听页面初次渲染完成
onShow Function 生命周期函数--监听页面显示
onHide Function 生命周期函数--监听页面隐藏
onUnload Function 生命周期函数--监听页面卸载
onPullDownRefresh Function 页面相关事件处理函数--监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
onTabItemTap Function 当前是 tab 页时,点击 tab 时触发
其他 Any 可添加任意的自定义事件函数或数据到 object 参数中,
在页面的函数中用 this 可以访问
三:Object参数属性之data
类型:Object
功能:页面的初始数据
1.初始化数据将作为页面的第一次渲染,data 将会以 JSON 的形式由逻辑层传至渲染层。
所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
2. 渲染层可以通过wxml对数据进行绑定,绑定语法{{data的属性名}}。
3.在js逻辑文件中的Page(object)内部怎么使用data呢?this.data.data的属性名称
4.data的修改使用Page.prototype.setData()函数
setData (object)函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)
setData() 参数格式:
字段 类型 必填 描述 最低版本
data Object 是 这次要改变的数据
callback Function 否 设置数据的回调函数 1.5.0
注意:
1)直接修改 this.data 不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
2)单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
3)请不要把 data 中任何一项的 value 设为 undefined ,
否则这一项将不被设置并可能遗留一些潜在问题。
示例代码:
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
webAuthorizeCode: ""
},
onLoad: function () {
//获取res方面的数据,可能是下面的3种情况才能拿到
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true,
webAuthorizeCode: app.globalData.webAuthorizeCode
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
webAuthorizeCode: app.globalData.webAuthorizeCode
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true,
webAuthorizeCode: app.globalData.webAuthorizeCode
})
}
})
}
}
})
带设置数据回调的写法:
this.setData({
text: '设置更新view的数据.'
}, function() {
// 这里设置数据后的回调函数处理
})
四:系统级页面事件函数(处理页面事件的函数)
onPullDownRefresh: 下拉刷新,监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启"enablePullDownRefresh":true。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新
onReachBottom: 上拉触底,监听用户上拉触底事件。
需要在app.json的window选项中或页面配置中设置触发距离"onReachBottomDistance":true。
在触发距离内滑动期间,本事件只会被触发一次。
onPageScroll: 页面滚动,监听用户滑动页面事件。
参数为 Object,包含以下字段:
字段 类型 说明
scrollTop Number 页面在垂直方向已滚动的距离(单位px)
onShareAppMessage: 用户转发
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object,用于自定义转发内容
自定义转发字段(return object)的字段说明:
字段 说明 默认值
title 转发标题 当前小程序名称
path 转发路径 当前页面 path ,必须是以 / 开头的完整路径
示例:
Page({
onShareAppMessage: function () {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
五:用户定义级事件处理函数
Object参数属性的 "其它 any" 的部分自定义
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
示例
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
六:Page.prototype.route
基础库 1.2.0 开始支持,低版本需做兼容处理
route 字段可以获取到当前页面的路径。
七:Page生命周期(注意系统每个生命周期函数的顺序及理解小程序页面运行原理)
: