本章节按照微信文档讲述 红色框里的内容
一.初始化数据
1.页面 Page
1.1.说明
Page(Object)
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
Object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销。
1.2.代码
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
2.data
2.1.说明
data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层(.JS)传至渲染层(.WXML)，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
2.2.代码
2.2.1.JS代码
Page({
/**
* 页面的初始数据
*/
data: {
text:"初始化View",
array: [{ msg: '数组1' }, { msg: '数组2' }]
}
})
2.2.2.WXML代码
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
2.2.3.效果
二.生命周期回调函数
1.onLoad函数
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
2.onShow函数
页面显示/切入前台时触发。
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
3.onReady函数
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
4.onHide函数
页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
5.onUnload函数
页面卸载时触发。如redirectTo或navigateBack到其他页面时。
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
三.页面事件处理函数
1.onPullDownRefresh函数
监听用户下拉刷新事件。
1.1.需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
1.2.可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
1.3.当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
2.onReachBottom函数
监听用户上拉触底事件。
2.1.可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
2.2.在触发距离内滑动期间，本事件只会被触发一次。
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
3.onPageScroll函数
监听用户滑动页面事件。
4.onShareAppMessage函数
监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。
此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：
onShareAppMessage函数代码示例
.JS代码
Page({
data: {
},
onShareAppMessage: function() {
return {
title: '自定义转发标题',
path: '/index/index?id=123',
imageUrl: 'http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg'
}
},
})
.WXML代码
<view class="intro">onShareAppMessage函数代码示例</view>
效果
5.onTabItemTap函数
点击 tab 时触发。
四.组件事件处理函数
Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。
代码示例
.WXML代码
<button type="default" bindtap='defaultButton'>默认颜色(可点击)</button>
<button type="primary" bindtap='primaryButton'>微信绿色(可点击)</button>
<button type="warn" bindtap='warnButton'>警告红色(可点击)</button>
.JS代码
/**
* 默认按钮点击
*/
defaultButton: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
效果
五.Page.route
得到当前页面的路径，类型为String。
代码
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
console.log("路径---："+this.route)
},
结果
六.Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层(.JS)发送到视图层(WXML)(异步)，同时改变对应的 this.data 的值(同步)。
Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
注意：
1.直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2.仅支持设置可 JSON 化的数据。
3.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4.请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
代码
WXSS代码
view {
margin: 20px;
}
button {
margin: 20px;
}
.viewposition {
text-align: center;
}
WXML代码
<view class='viewposition'>
{{num}}</view>
<button type="default" bindtap='defaultButton'>点击改变初始值</button>
JS代码
/**
* 页面的初始数据
*/
data: {
num:'点击前',
},
/**
* 增加初始值按钮点击
*/
defaultButton: function() {
this.setData({
num: '点击后',
})
},
效果
点击前
点击后
七.生命周期图
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
