微信小程序 自定義組件

Component(Object object)

創(chuàng)建自定義組件，接受一個 Object 類型的參數(shù)。

參數(shù)

Object object

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

代碼示例：

在開發(fā)者工具中預(yù)覽效果

Component({

  behaviors: [],

  // 屬性定義（詳情參見下文）
  properties: {
    myProperty: { // 屬性名
      type: String,
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },

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

  lifetimes: {
    // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready: function() { },

  pageLifetimes: {
    // 組件所在頁面的生命周期函數(shù)
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
      })
    },
    // 內(nèi)部方法建議以下劃線開頭
    _myPrivateMethod: function(){
      // 這里將 data.A[0].B 設(shè)為 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

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

properties 定義

屬性值的改變情況可以使用 observer 來監(jiān)聽。目前，在新版本基礎(chǔ)庫中不推薦使用這個字段，而是使用 Component 構(gòu)造器的 observers 字段代替，它更加強(qiáng)大且性能更好。

代碼示例：

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 屬性值變化時執(zhí)行
      }
    },
    lastLeaf: {
      // 這個屬性可以是 Number 、 String 、 Boolean 三種類型中的一種
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

屬性的類型可以為 String Number Boolean Object Array 其一，也可以為 null 表示不限制類型。

多數(shù)情況下，屬性最好指定一個確切的類型。這樣，在 WXML 中以字面量指定屬性值時，值可以獲得一個確切的類型，如：

<custom-comp min="1" max="5" />

此時，由于自定義組件的對應(yīng)屬性被規(guī)定為 Number 類型， min 和 max 會被賦值為 1 和 5 ，而非 "1" 和 "5" ，即：

this.data.min === 1 // true
this.data.max === 5 // true

提示：

• 使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值；但直接修改它不會將變更應(yīng)用到界面上，應(yīng)使用 setData 修改。
• 生命周期函數(shù)無法在組件方法中通過 this 訪問到。
• 屬性名應(yīng)避免以 data 開頭，即不要命名成 dataXyz 這樣的形式，因?yàn)樵?WXML 中， data-xyz="" 會被作為節(jié)點(diǎn) dataset 來處理，而不是組件屬性。
• 在一個組件的定義和使用時，組件的屬性名和 data 字段相互間都不能沖突（盡管它們位于不同的定義段中）。
• 從基礎(chǔ)庫 2.0.9 開始，對象類型的屬性和 data 字段中可以包含函數(shù)類型的子字段，即可以通過對象類型的屬性字段來傳遞函數(shù)。低于這一版本的基礎(chǔ)庫不支持這一特性。
• bug : 位于 slot 中的自定義組件沒有觸發(fā) pageLifetimes 中聲明的頁面生命周期，此問題在 2.5.2 中修復(fù)。
• bug : 對于 type 為 Object 或 Array 的屬性，如果通過該組件自身的 this.setData 來改變屬性值的一個子字段，則依舊會觸發(fā)屬性 observer ，且 observer 接收到的 newVal 是變化的那個子字段的值， oldVal 為空， changedPath 包含子字段的字段名相關(guān)信息；目前推薦使用 observers 定義段代替。

Behavior(Object object)

注冊一個 behavior，接受一個 Object 類型的參數(shù)。

參數(shù)

Object object

代碼示例：

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})