微信小程序Page的应用

注册页面

构建一个小程序的页面，相对比较简单的，这里整理了下关于page一些重要信息。

一、使用Page构造器注册页面

    Page({
        data: {
            text: "This is page data." //页面的初始数据s
        },
        onLoad: function(options) {
            // 生命周期回调—监听页面加载
        },
        onShow: function() {
            // 生命周期回调—监听页面显示
        },
        onReady: function() {
            // 生命周期回调—监听页面初次渲染完成
        },
        onHide: function() {
            // 生命周期回调—监听页面隐藏
        },
        onUnload: function() {
            // 生命周期回调—监听页面卸载
        },
        onPullDownRefresh: function() {
            // 监听用户下拉动作
        },
        onReachBottom: function() {
            // 页面上拉触底事件的处理函数
        },
        onShareAppMessage: function () {
            // 用户点击右上角转发
            // return custom share data when user share.
        },
        onShareTimeline: function(){
            // 用户点击右上角转发
        },
        onAddToFavorites: function(){
           // 用户点击右上角收藏 
        },
        onPageScroll: function() {
            // 页面滚动触发事件的处理函数
        },
        onResize: function() {
            // 小程序屏幕旋转时触发
        },
        onTabItemTap(item) {
            console.log(item.index)
            console.log(item.pagePath)
            console.log(item.text)
        },
        // 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
        
        viewTap: function() {
            this.setData({
            text: 'Set some data for updating view.'
            }, function() {
            // this is setData callback
            })
        },
        customData: {
            hi: 'MINA'
        }
    })

data

data 是页面第一次渲染使用的初始数据。
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。

生命周期

生命周期的触发，关系到生命周期回调函数。

首先了解一下，路由方式与页面栈和生命周期回调函数的关系。

路由方式	触发时机	页面栈表现	路由前页面	路由后页面
初始化	小程序打开的第一个页面	新页面入栈		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>	新页面入栈	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/>	当前页面出栈，新页面入栈	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件 <navigator open-type="navigateBack"> 用户按左上角返回按钮	页面不断出栈，直到目标返回页	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab	页面全部出栈，只留下新的 Tab 页面		各种情况请参考下表
重加载	调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/>	页面全部出栈，只留下新的页面	onUnload	onLoad, onShow

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

页面间通信

如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：

• 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
• wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。
  这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

在页面中使用 behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。

二、使用 Component 构造器构造页面

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

    Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})