微信小程序 笔记7 Page对象

Page对象

存在于每个页面的js里面，Page(Object)函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等(和app.js里面东西功能很像)。

数据渲染

data属性渲染

• 需要放在模板中进行渲染的数据，需要放在Page对象的data属性中。
• 放到data中的值，只能使用可以JSON序列化的：字符串，数字，布尔值，对象，数组。否则将不会渲染。例如：function。

什么叫不能序列化的无法渲染呢？比如这个例子：

// pages/QQ/QQ.js
function box()
{
  return "我是box返回的"
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:box
  },
//...

这种是无法正常执行的。

通过function改变data属性渲染

• 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
• 其中key可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data中预先定义。

生命周期函数

页面内部的js配置。

onLoad(Object query)

等同于app.js的onLaunch(options),只是一个全局一个局部。

onShow(options)

补充一点：5分钟放在后台不访问就自动卸载掉了

调用时机：页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互了。

注意和onShow()加载内容的区别：onReady()主要是针对导航栏和tabBar(最上面最下面两块)

onUnload()

调用时机：页面卸载时触发。如redirectTo或navigateBack到其他页面时。

具体来说：当进入一个新的页面时，会将页面卸载掉，调用onUnload()

// pages/me/me.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("Onload：开始加载初始信息")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady:修改导航栏文字")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow:页面内容开始显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide:进入后台")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload:页面卸载")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
//...

路由

在小程序中所有页面的路由全部由框架进行管理。getCurrentPages()可以获取当前状态下的页面栈。

即：页面结构不发生变化，只是内容发生改变。

getCurrentPages()可以理解为一个数组，里面是之前走过的页面，放在数组里面。

也就是说，getCurrentPages()可以获取当前状态下的页面栈。