字節(jié)跳動小程序開發(fā)框架 Component 構(gòu)造器

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

定義參數(shù)

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

通用屬性列表

方法列表

提示

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

提示

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

代碼示例

Component({
  behaviors: [],

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

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

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

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

  // 生命周期函數(shù)，可以為函數(shù)，或一個在 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 中，指定屬性值時則對應(yīng)使用連字符寫法（my-component property-name="value"），應(yīng)用于數(shù)據(jù)綁定時采用駝峰寫法（attr=""）。

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

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

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

代碼示例

{
  "usingComponents": {}
}

在組件代碼中

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

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

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