Component 構(gòu)造器

Component 構(gòu)造器可用于定義組件，調(diào)用 Component 構(gòu)造器時(shí)可以指定組件的屬性、數(shù)據(jù)、方法等

定義參數(shù)

生成的組件實(shí)例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過(guò) this 訪問(wèn)。組件包含一些通用屬性和方法。

通用屬性列表

方法列表

提示selectComponent、selectAllComponents、getRelationNodes API 均為異步 API，需要指定回調(diào)函數(shù)。

提示selectComponent、selectAllComponents 在 1.16.2.0 版本后支持同步寫法。開(kāi)發(fā)者需要保證在調(diào)用 API 時(shí)，頁(yè)面已經(jīng)渲染完畢，比如頁(yè)面的 onReady、setData 的回調(diào)之后。

代碼示例

Component({
  behaviors: [],

  properties: {
    myProperty: {
      // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      type: String,

      // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
      value: '',

      // 屬性被改變時(shí)執(zhí)行的函數(shù)（可選），也可以寫成在 methods 段中定義的方法名字符串, 如：'_propertyChange'
      observer: function(newVal, oldVal, changedPath) {
         // 通常 newVal 就是新設(shè)置的數(shù)據(jù)， oldVal 是舊數(shù)據(jù)
      }
    },
    myPropertyB: String // 簡(jiǎn)化的定義方式
  },

  // 私有數(shù)據(jù)，可用于模版渲染
  data: {},

  // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在 methods 段中定義的方法名
  attached: function () {
    this.selectComponent('.class-name', function(res) {
      console.log(res)
    })

    //
  },
  ready: function() { },

  // 組件自定義方法
  methods: {
    onMyButtonTap: function(){
      this.setData({ ... })
    },

    _myPrivateMethod: function(){
      // 這里將 data.A[0].B 設(shè)為 'test'
      this.setData({
        'A[0].B': 'test'
      })
    },

    _propertyChange: function(newVal, oldVal) {

    }
  }
})

注意：在 properties 定義中，屬性名采用駝峰寫法（propertyName）；在 ttml/wxml 中，指定屬性值時(shí)則對(duì)應(yīng)使用連字符寫法（my-component property-name="value"），應(yīng)用于數(shù)據(jù)綁定時(shí)采用駝峰寫法（attr="{{propertyName}}"）。

使用 Component 構(gòu)造器構(gòu)造頁(yè)面

小程序的頁(yè)面也可以視為自定義組件。因而，頁(yè)面也可以使用 Component 構(gòu)造器構(gòu)造，擁有與普通組件一樣的定義與實(shí)例方法。但此時(shí)要求對(duì)應(yīng) json 文件中包含 usingComponents 定義段。

此時(shí)，組件的屬性可以用于接收頁(yè)面的參數(shù)，如訪問(wèn)頁(yè)面 /pages/index/index?paramA=123?mB=xyz ，如果聲明有屬性 paramA 或 paramB，則它們會(huì)被賦值為 123 或 xyz 。

代碼示例

{
  "usingComponents": {}
}

在組件代碼中

Component({
  properties: {
    paramA: Number,
    paramB: String
  },

  methods: {
    onLoad() {
      this.data.paramA; // 頁(yè)面參數(shù) paramA 的值
      this.data.paramB; // 頁(yè)面參數(shù) paramB 的值
    }
  }
});

注意：此功能正在逐步支持中，可能會(huì)存在不符合預(yù)期的問(wèn)題