微信小程序Page和Component

## 简介

在微信小程序中，`Component` 和 `Page` 是两种不同的页面构建方式，它们分别用于构建组件和页面。通常来说，`Component` 主要用于构建可重复使用的组件，而 `Page` 用于构建页面。

从一个简单的方面，可以认为：
- 监听页面的生命周期，使用`Page`；
- 自定义方法、组件，使用`Component`。

<!-- more -->

## Page

- Page(Object object)

用于注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

### 参数

|属性|类型|默认值|必填|说明|
|--|--|--|--|--|
|data|Object|||页面的初始数据|
|options|Object|||页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1|
|behaviors|String Array|||类似于mixins和traits的组件间代码复用机制，参见 |behaviors，需要基础库版本 2.9.2|
|onLoad|function|||生命周期回调—监听页面加载|
|onShow|function|||生命周期回调—监听页面显示|
|onReady|function|||生命周期回调—监听页面初次渲染完成|
|onHide|function|||生命周期回调—监听页面隐藏|
|onUnload|function|||生命周期回调—监听页面卸载|
|onRouteDone|function|||生命周期回调—监听路由动画完成|
|onPullDownRefresh|function|||监听用户下拉动作|
|onReachBottom|function|||页面上拉触底事件的处理函数|
|onShareAppMessage|function|||用户点击右上角转发|
|onShareTimeline|function|||用户点击右上角转发到朋友圈|
|onAddToFavorites|function|||用户点击右上角收藏|
|onPageScroll|function|||页面滚动触发事件的处理函数|
|onResize|function|||页面尺寸改变时触发，详见 响应显示区域变化|
|onTabItemTap|function|||当前是 tab 页时，点击 tab 时触发|
|onSaveExitState|function|||页面销毁前保留状态回调|
|其他|any|||开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。|

### 示例代码
```javascript
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  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 对数据进行绑定。

### 示例代码：

```xml
<!--index.wxml-->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})
```

## Component

- Component(Object object)
创建自定义组件，接受一个 Object 类型的参数。

### 参数

|定义段|类型|是否必填|描述|最低版本|
|--|--|--|--|--|
|properties|Object Map|否|组件的对外属性，是属性名到属性设置的映射表||
|data|Object|否|组件的内部数据，和properties一同用于组件的模板渲染||
|observers|Object|否|组件数据字段监听器，用于监听properties和data的变化，参见数据监听器|2.6.1|
|methods|Object|否|组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件间通信与事件|
|behaviors|String Array|否|类似于mixins和traits的组件间代码复用机制，参见behaviors||
|created|Function|否|组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用setData||
|attached|Function|否|组件生命周期函数-在组件实例进入页面节点树时执行||
|ready|Function|否|组件生命周期函数-在组件布局完成后执行||
|moved|Function|否|组件生命周期函数-在组件实例被移动到节点树另一个位置时执行||
|detached|Function|否|组件生命周期函数-在组件实例被从页面节点树移除时执行||
|relations|Object|否|组件间关系定义，参见组件间关系||
|externalClasses|String Array|否|组件接受的外部样式类，参见外部样式类||
|options|Object Map|否|一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）||
|lifetimes|Object|否|组件生命周期声明对象，参见组件生命周期|2.2.3|
|pageLifetimes|Object|否|组件所在页面的生命周期声明对象，参见组件生命周期|2.2.3|