008 ∞ Page()和第一次渲染
本帖最后由 不二如是 于 2018-5-10 15:20 编辑http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png
上一讲搞定了场景值，这次来看Page。
Page() 函数用来注册一个页面。
通过传入一个 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 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销
我稍微演示一段流程代码，鱼油不理解没关系，先看：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 当加载完成执行一些初始化操作...
},
onReady: function() {
// 当页面准备完成...
},
onShow: function() {
// 页面呈现...
},
onHide: function() {
// 页面隐藏...
},
onUnload: function() {
//页面关闭...
},
onPullDownRefresh: function() {
// 页面下拉..
},
onReachBottom: function() {
// 页面滚到底部...
},
onShareAppMessage: function () {
// 当分享时...
},
onPageScroll: function() {
// 页面滚动时...
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件句柄
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// 数据回调
})
},
customData: {
hi: 'MINA'
}
})
生命周期，下图说明了 Page 实例的生命周期：
初始化数据
初始化数据将作为页面的第一次渲染。
data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：
字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。
WXML代码：
<view>{{text}}</view>
<view>{{array.msg}}</view>
JS代码：
const app = getApp()
Page({
data: {
text: '第一次对鱼C说：',
array: [{ msg: '撒拉嘿呦' }, { msg: '啥也不想说' }]
},
onLoad: function () {
console.log('鱼C工作室')
},
})
编译：
课后作业
1、page()函数中要为页面传递初始化数据需要使用什么参数？
2、补充问号处代码，在页面上打印出“我爱鱼C”：
Page({
data: {
text: '我爱鱼',
array: [{msg: 'C'}, {msg: 'A'}]
}
})
<view>{{？}}{{？.？}}</view>
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 函数中要为页面传递初始化数据需要使用什么参数 答案 text array msg 1 textarraymsg text,array,msg
页:
[1]