008 ∞ Page()和第一次渲染

不二如是

                               
登录/注册后可看大图

上一讲搞定了场景值，这次来看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 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销

我稍微演示一段流程代码，鱼油不理解没关系，先看：

1. //index.js
   
2. Page({
   
3.   data: {
   
4.     text: "This is page data."
   
5.   },
   
6.   onLoad: function(options) {
   
7.     // 当加载完成执行一些初始化操作...
   
8.   },
   
9.   onReady: function() {
   
10.     // 当页面准备完成...
    
11.   },
    
12.   onShow: function() {
    
13.     // 页面呈现...
    
14.   },
    
15.   onHide: function() {
    
16.     // 页面隐藏...
    
17.   },
    
18.   onUnload: function() {
    
19.     //页面关闭...
    
20.   },
    
21.   onPullDownRefresh: function() {
    
22.     // 页面下拉..
    
23.   },
    
24.   onReachBottom: function() {
    
25.     // 页面滚到底部...
    
26.   },
    
27.   onShareAppMessage: function () {
    
28.    // 当分享时...
    
29.   },
    
30.   onPageScroll: function() {
    
31.     // 页面滚动时...
    
32.   },
    
33.   onTabItemTap(item) {
    
34.     console.log(item.index)
    
35.     console.log(item.pagePath)
    
36.     console.log(item.text)
    
37.   },
    
38.   // 事件句柄
    
39.   viewTap: function() {
    
40.     this.setData({
    
41.       text: 'Set some data for updating view.'
    
42.     }, function() {
    
43.       // 数据回调
    
44.     })
    
45.   },
    
46.   customData: {
    
47.     hi: 'MINA'
    
48.   }
    
49. })

复制代码

生命周期，下图说明了 Page 实例的生命周期：

---

初始化数据

初始化数据将作为页面的第一次渲染。

data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：

字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

WXML代码：

1. <view>{{text}}</view>
   
2. <view>{{array[0].msg}}</view>

复制代码

JS代码：

1. const app = getApp()
   
2. 
   
3. Page({
   
4.   data: {
   
5.     text: '第一次对鱼C说：',
   
6.     array: [{ msg: '撒拉嘿呦' }, { msg: '啥也不想说' }]
   
7.   },
   
8.   onLoad: function () {
   
9.     console.log('鱼C工作室')
   
10.   },
    
11. })
    

复制代码

编译：

---

课后作业


1、page()函数中要为页面传递初始化数据需要使用什么参数？

2、补充问号处代码，在页面上打印出“我爱鱼C”：

1. Page({
   
2.   data: {
   
3.     text: '我爱鱼',
   
4.     array: [{msg: 'C'}, {msg: 'A'}]
   
5.   }
   
6. })
   
7. <view>{{？}}{{？[0].？}}</view>

复制代码

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

yzy1217492030

函数中要为页面传递初始化数据需要使用什么参数

yangxiaoyan

答案

一笙彤

text array msg

优时风

1

ShmilyLee

text  array  msg

又新

text,array,msg