開發者可以將頁面內的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助於代碼維護。自定義組件在使用時與基礎組件非常相似。

創建自定義組件

類似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可這一組文件設為自定義組件）：同時，還要在 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式，它們的寫法與頁面的寫法類似。在自定義組件的 js 文件中，需要使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法。組件的屬性值和內部數據將被用於組件 wxml

使用自定義組件

使用已註冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。這樣，在頁面的 wxml 中就可以像使用基礎組件一樣使用自定義組件。節點名即自定義組件的標簽名，節點屬性即傳遞給組件的屬性值。

註意：

• 因為 WXML 節點標簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標簽名也只能包含這些字符。
• 自定義組件也是可以引用自定義組件的，引用方法類似於頁面引用自定義組件的方式（使用 usingComponents 字段）。
• 自定義組件和頁面所在項目根目錄名不能以“wx-”為前綴，否則會報錯。

接下來我們自己創建一個<chw-toast>組件，效果圖如下

第一步：創建自定義組件

• 創建組件chw-toast目錄，存放各個文件

• 配置chw-toast.josn文件

• 創建自定義組件樣式（container控制toast位置，toast-text控制文字格式）

• 修改chw-toast.js文件，其中值得註意的是設置timeout的時候需要獲取當前this（hidden為false時候的）來重新setdata,而不能直接用this（hidden為true時候的）

// page/chw-toast.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    toastText:{
      type:String,
      value:
 
‘chw‘
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    toastShow:false
  },

  /**
   * 組件的方法列表
   */

  methods: {
    showToast(text,time){
      this.setData({
        toastShow:!this.data.toastShow,
        toastText:text
      })

      if(time===undefined)
      {
        time=3000
      }
      var that=this
      setTimeout(function(){
        that.setData({
          toastShow:!that.data.toastShow
        })
      },time)
    }
  }
})

第二步：使用組件

• 在index.js中聲明

• 在index.wxml引用

• 配置index.js,在渲染完成後，首先要獲得chw-toast組件，得到該對象後通過綁定修改值，可以設置顯示時間，可以采用默認時間

// page/index/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
  
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.chwtoast=this.selectComponent("#chw-toast")
  },
  showToast:function(){
    this.chwtoast.showToast("xixiixixi")
  },
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

微信小程序開發---自定義組件