微信小程序开发(3)---Page()函数
来源:互联网 发布:贵州广电网络网上缴费 编辑:程序博客网 时间:2024/06/05 16:21
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明:
示例代码:
//index.jsPage({
data: {
text: "This is page data."
},
onLoad: function(options) { // Do some initialize when page load. },
onReady: function() { // Do something when page ready. },
onShow: function() { // Do something when page show. },
onHide: function() { // Do something when page hide. },
onUnload: function() { // Do something when page close. },
onPullDownRefresh: function() { // Do something when pull down. },
onReachBottom: function() { // Do something when page reach bottom. },
onShareAppMessage: function () { // return custom share data when user share. },
onPageScroll: function() { // Do something when page scroll },
// Event handler.
viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) },
customData: { hi: 'MINA' }})
初始化数据
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。
示例代码:
//index.wxml
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
//index.js
Page({
data: {
text: 'init data', array: [{msg: '1'}, {msg: '2'}]
}
})
生命周期函数
- onLoad: 页面加载
- 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
- onShow: 页面显示
- 每次打开页面都会调用一次。
- onReady: 页面初次渲染完成
- 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
- 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
- onHide: 页面隐藏
- 当navigateTo或底部tab切换时调用。
- onUnload: 页面卸载
- 当redirectTo或navigateBack的时候调用。
生命周期的调用以及页面的路由方式详见
onLoad参数
页面相关事件处理函数
- onPullDownRefresh: 下拉刷新
- 监听用户下拉刷新事件。
- 需要在config的window选项中开启enablePullDownRefresh。
- 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
- onReachBottom: 上拉触底
- 监听用户下拉触底事件。
- onPageScroll: 页面滚动
- 监听用户滑动页面事件。
- 参数为 Object,包含以下字段:
- onShareAppMessage: 用户转发
- 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
- 用户点击转发按钮的时候会调用
- 此事件需要 return 一个 Object,用于自定义转发内容
自定义转发字段
示例代码
Page({ onShareAppMessage: function () { return { title: '自定义转发标题', path: '/page/user?id=123' } }})
事件处理函数
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
示例代码:
//index.wxml
<view bindtap="viewTap"> click me </view>
//index.js
Page({ viewTap: function() { console.log('view tap') }})
Page.prototype.route
route 字段可以获取到当前页面的路径。
Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data 的值。
setData() 参数格式
接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活,以数据路径的形式给出,如array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
注意:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
示例代码:
<!--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.js
Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: { text: 'init data' }
},
changeText: function() {
// this.data.text = 'changed data'
// bad, it can not work
this.setData({ text: 'changed data' })
},
changeNum: function() {
this.data.num = 1
this.setData({ num: this.data.num })
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({ 'array[0].text':'changed data' })
},
changeItemInObject: function(){
this.setData({ 'object.text': 'changed data' });
},
addNewField: function() {
this.setData({ 'newField.text': 'new data' }) }
})
生命周期
下图说明了 Page 实例的生命周期。
阅读全文
0 0
- 微信小程序开发(3)---Page()函数
- 微信小程序系列3(新建page小技巧)
- 微信小程序Page中data数据操作和函数调用
- 微信小程序Page中data数据操作和函数调用
- 微信小程序中调用page中自定义的函数
- 微信小程序 page.js 中的 函数调用(this, that)
- 微信小程序开发常用技巧(1)——修改page背景色
- 微信小程序开发常用技巧(5)——view左右滑动,切换page页面
- 微信小程序开发不能直接操作 Page.data
- 微信小程序-Page
- 微信小程序开发(2)---APP()函数
- 更新同步程序的page.php文件 Monxin专用(PHP代码函数)
- 【微信小程序】Page not found 错误
- 微信小程序学习第一天——page.json(配置)
- 微信小程序开发 ---3
- 微信小程序-出现脚本错误或者未正确调用 Page()
- 微信小程序 --- 出现脚本错误或者未正确调用 Page()
- 微信小程序模板消息41003 page路径错误解决办法
- Python赋值、浅拷贝、深拷贝
- Windows下使用VisualSVN Server搭建SVN服务器
- java集合类总结
- java 继承的执行顺序
- 在Centos6.9上快速搭建基于Beego和Swagger的RESTful API
- 微信小程序开发(3)---Page()函数
- 图片帮助类—ImageHelper
- ios-发动态的图片的动画实现技巧
- Spring和MyBatis环境整合
- 用supervisor+nginx部署服务的流程
- Java8 Lambda表达式 函数式编程 方法引用
- linux目录结构
- \u格式 &# unicode与汉字的相互转换
- idea破解