自定義組件類似頁面，也是由 json wxml wxss js 4個文件組成。

1. json文件

在json文件中進行組件聲明，代碼如下：

{
    "component" : true  
}

2. js文件

組件的js文件用於註冊組件、屬性定義、內部數據及自定義方法等。

Component({

  behaviors: [],

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

      value: ‘‘, // 屬性初始值（可選），如果未指定則會根據類型選擇一個
      observer: function(newVal, oldVal, changedPath) {
         // 屬性被改變時執行的函數（可選），也可以寫成在methods段中定義的方法名字符串, 如：‘_propertyChange‘
         // 通常 newVal 就是新設置的數據， oldVal 是舊數據
      }
    },
    myProperty2: String // 簡化的定義方式
  },
  data: {}, // 私有數據，可用於模板渲染

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

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

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

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

    }
  }

})

3. wxml文件

wxml文件編寫組件模板，寫法與頁面寫法類似。

4. wxss文件

wxss 文件中加入組件樣式，寫法與頁面wxss寫法類似。

組件的wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。

【自定義組件】結構