新手引导｜小程序开发指南基础篇（二）

新手引导｜小程序开发指南基础篇（一） 

六. Page

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。更多信息，请查看 Page。

1. data

data 是页面第一次渲染使用的 初始数据。

示例代码

<view>{{text}}</view>
          <view>{{array[0].msg}}</view>
        

Page({
          data: {
          text: "init data",
          array: [{ msg: "1" }, { msg: "2" }],
          },
          });
        

2. 事件绑定

• Page 中可以定义组件事件处理函数。
• 通过 setData，您可以异步地将数据变更后显示给视图。setData 为异步。
• 更多信息，请查看 页面事件处理函数。

示例代码

<view bind:tap="viewTap">{{num}}</view>

        

Page({
          data: {
          num: 0,
          },
          viewTap: function () {
          this.setData({
          num: this.data.num + 1,
          });
          },
          });
        

3. 生命周期

• onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
• onShow：页面显示/切入前台时触发。
• onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide：页面隐藏或切入后台时触发。
• onUnload：页面卸载时触发。
• 更多信息，请查看 生命周期。

4. 页面事件处理函数

• onPullDownRefresh：监听用户下拉刷新事件。
• onReachBottom：监听用户上拉触底事件。

更多信息，请查看 页面事件处理函数。

示例代码

//index.js
          Page({
          data: {
          text: "This is page data.",
          },
          onl oad: 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.
          },
          });
        

七. Component 自定义组件

创建自定义组件，接受一个 Object 类型的参数，用于描述组件的逻辑交互行为。更多信息，请查看 Component。

// 文件 /components/foo/index.js
          Component({
          options: Object,
          properties: Object,
          observers: Object,
          data: Object,
          methods: Object,
          behaviors: Array,
          lifetimes: Object,
          pageLifetimes: Object,
          relations: Array,
          });
        

1. properties

• 声明自定义组件的属性配置及数据处理，每一个键值代表一个属性名，使用驼峰写法，通过 type 定义属性值的类型。更多信息，请查看 properties。
• properties 可通过 observer() 监听属性值的变化。

示例代码

Component({
          properties: {
          myName: {
          type: String,
          value: "smart",
          observer: function (newValue, oldValue) {
          // do something
          },
          },
          },
          });
        

2. observers

• 数据监听器可以用于监听和响应任何属性（properties）和数据（data）字段的变化。更多信息，请查看 observers。 注意：如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环。

Component({
          observers: {
          "value1, value2": function (value1, value2) {
          // this.setData 对应数据时触发
          },
          "some.subfield": function (subfield) {
          // 使用 setData 设置 this.data.some.subfield 时触发
          // （除此以外，使用 setData 设置 this.data.some 也会触发）
          subfield === this.data.some.subfield;
          },
          "arr[12]": function (arr12) {
          // 使用 setData 设置 this.data.arr[12] 时触发
          // （除此以外，使用 setData 设置 this.data.arr 也会触发）
          arr12 === this.data.arr[12];
          },
          "some.field.**": function (field) {
          // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
          // （除此以外，使用 setData 设置 this.data.some 也会触发）
          field === this.data.some.field;
          },
          "**": function () {
          // 每次 setData 都触发
          },
          },
          });
        

3. data

• 自定义组件的数据对象的使用类似于 page 的数据对象。
• 自定义组件的数据对象和 properties 共同用于组件模板的渲染。

<view>{{name}}: {{age}}</view>
        

Component({
          properties: {
          'name': {
          type: String,
          value: 'smart'
          }
          }
          data: { age: 18 },
          });