鱼C论坛

 找回密码
 立即注册
查看: 2445|回复: 6

[庖丁解牛] 008 ∞ Page()和第一次渲染

[复制链接]
发表于 2018-5-10 14:45:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2018-5-10 15:20 编辑


                               
登录/注册后可看大图


上一讲搞定了场景值,这次来看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 实例的生命周期:
1.png





初始化数据

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

data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:
字符串,数字,布尔值,对象,数组。


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

Snip20180510_119.png

WXML代码:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>


Snip20180510_121.png


JS代码:
const app = getApp()

Page({
  data: {
    text: '第一次对鱼C说:',
    array: [{ msg: '撒拉嘿呦' }, { msg: '啥也不想说' }]
  },
  onLoad: function () {
    console.log('鱼C工作室')
  },
})

编译:
Snip20180510_123.png





课后作业


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

2、补充问号处代码,在页面上打印出“我爱鱼C”:
Page({
  data: {
    text: '我爱鱼',
    array: [{msg: 'C'}, {msg: 'A'}]
  }
})
<view>{{?}}{{?[0].?}}</view>



答案:
游客,如果您要查看本帖隐藏内容请回复





如果有收获,别忘了评分


                               
登录/注册后可看大图


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



                               
登录/注册后可看大图

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-5-10 15:04:01 | 显示全部楼层
函数中要为页面传递初始化数据需要使用什么参数
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-16 15:40:53 | 显示全部楼层
答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-7-2 11:49:33 | 显示全部楼层
text array msg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-22 20:10:21 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-3-30 15:25:34 | 显示全部楼层
text  array  msg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-3-11 21:37:40 | 显示全部楼层
text,array,msg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 02:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表