手把手带你学习小程序 —— 五 (Page相关设置)

注意：学习本节内容的同学，请先把默认的 index.js文件和 index.wxml文件原有的代码删除进行学习

一、数据渲染

前面就已经接触过数据渲染了，我们把一些数据放在 .js文件中，然后再 wxml 中进行渲染。
先来个简单的示例：

1.1 示例代码

1. js 部分代码

Page({
  data: {
    username:'小程序',
    person:{
      username:'小小程序',
      'age':18
    },
  },

2. wxml 部分代码

<view>{{username}}</view>
<view>{{person.username}}</view>
<view>{{person.age}}</view>

3. 运行结果：
   

4. js分析

• username存储的是一个字符串
• person这个对象拥有姓名和年龄2个属性
• person两个的属性username 没加引号，age加了引号

5. 解惑：
   person对象的属性加不加引号都会默认为字符串形式

1.2 修改参数

给定一个情景，如果我们要实时更新js中每一部分的数值，需要怎么操作呢？

• 方案一：通过 传参 —> 修改值 —> 传参

/**
 * 生命周期函数 —— 监听页面加载
 */
  onLoad: function (options) {
    // 传参 修改 传参
    var person = this.data.person;
    person.username = '小课'
    this.setData({
      person: person
    })
  },

• 方案二：直接修改 （setData）

  onLoad: function (options) {
    // 传参 修改 传参
    // var person = this.data.person;
    // person.username = '小课'
    // this.setData({
    //   person: person
    // })
    this.setData({
      "person.username":"小课"
    })
  },
})

Tips：数组元素修改，可以直接通过下标修改

两者效果是一样的

解惑：

1. onLoad 函数的租用：页面加载触发的时候，一个页面只会调用一次，这里我们会进行一些数据初始化的工作。前面的js代码我们也备注了，这是一个生命周期函数 —— 页面监听加载，也就是说页面变动一次，数据也hi更新一次。因此我们修改数据的时候，这个函数就会执行一次
2. onLoad只是其中一个生命周期函数，后面还有很多个其他的函数，比如 onShow，onHide 等等就不一一介绍了
3. 这些生命周期函数 均在 .js 文件中运行

二、Page生命周期函数

每当Page 界面配置完成，就会接着调用其生命周期函数。生命周期函数在上面接触过，onLoad() 函数，可以实时更新数据,，接下来我把几个剩下 生命周期函数 一一列举出来，每个功能我尽量使用更加通俗的语言加深大家对此的理解

2.1 Page 生命周期函数的功能

函数	功能
onLoad()	页面加载时触发，每次加载都会对数据进行初始化，所以，当我们更新数据的时候，onLoad() 就会起作用
onShow()	当页面加载完成，就把界面显示出来，同时也会调用 onLoad() 方法
onReady()	一个页面只会运行一次，当一个页面渲染完成之后，这个函数的生命周期也就结束了
onHide()	当我们打开一个弹窗时，弹出的界面就把我们当时正在使用的界面给挡住了，也可以理解为隐藏了。这时候调用的就是 onHide()方法
onUnload()	比如我们从 A页面跳转到 B界面 就会执行跳转的方法

接下来我们继续以上面的代码为蓝本，我们来比较下这些生命周期函数的执行顺序

2.2 代码示例

//index.js
Page({
  data: {
    username:'小程序',
    person:{
      username:'小小程序',
      'age':18
    },
  },

/**
 * 生命周期函数 —— 监听页面加载
 */
  onLoad: function (options) {
    // 传参 修改 传参
    // var person = this.data.person;
    // person.username = '小课'
    // this.setData({
    //   person: person
    // })

    this.setData({
      "person.username":"小课"
    })

    console.log("打开了 onLoad()方法");
  },

  onShow: function(event){
    console.log("打开了onShow 方法");
  },

  onReady: function(event){
    console.log("打开了onReady 方法");
  },

  onHide: function(event){
    console.log("打开了 onHide 方法");
  },

//这个放一下，由于篇幅过长，就不演示了，这个只要跳转界面就会触发
  onUnload: function(){

  }

})

三、微博发文功能实现

传送门