微信小程序也支持自定義組件，這樣當我們的項目中有些功能就能提取出來，減少代碼量，也減小了代碼大小，自定義組件就是將項目中某一個模塊使用比較多的提取出來單獨做出一個並能在其他頁面或者組件中很好的重複使用。來看看官方的解釋：
下面就來看看自定義組件的創建和使用。
一、自定義組件的組成
自定義組件和小程序的頁面是基本一致的都有js、wxml、wxss、json這幾個文件，不同在於js文件和json文件中有些不同，具體哪些不同呢？下面會說到的。
二、自定義組件的創建
我以安卓的toast為例來介紹自定義組件如何創建，首先在pages下面定義和頁面一樣的文件夾和文件，如下圖：
在toast.json文件中聲明組件如下圖：
四、定義結構和樣式
將自定義組件的結構和樣式分別寫著wxml和wxss文件中，如下圖：
第一張圖中我已經把是否顯示和提示內容用變量代替了。
注意：
在組件wxss中不應使用ID選擇器、屬性選擇器和標籤名選擇器。
五、在js文件註冊組件
寫好上面的代碼後需要我們在js文件使用component來註冊組件並且定義一些數據和邏輯處理，如下圖：
六、使用自定義組件
自定義組件的使用需要在json文件中引用組件，然後以標籤的形式來使用即可，如下圖：
注意上面的路徑需要根據自己定義的組件的位置來確定。在頁面中添加標籤並使用，如下圖：
注意這裡的標籤名稱就是我們在json文件中寫的名稱一定要一致。在wxml中添加按鈕來點擊顯示自定義的toast組件，如下圖：
點擊效果如下：
當然啦，這裡只是一個簡單的功能，其他強大的功能大家可以自己去試一試。
七、自定義組件的構造器說明
自定義組件的構造器有很多的屬性方法等。那麼這裡簡單介紹幾個：
properties：組件的對外屬性，是屬性名到屬性設置的映射表，屬性設置中可包含三個字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數
data：組件的內部數據，和 properties 一同用於組件的模版渲染
methods：組件的方法，包括事件響應函數和任意的自定義方法，關於事件響應函數的使用
其他的大家可以去官方文檔查看或者查看如下圖：
今天就介紹到這裡，目前這個只是個簡單的使用，更過高級的用法還沒涉及到，所以大家可以發揮自己的想象看看能不能玩一玩高級的用法，當然啦，最重要的是能夠解決開發中實際的項目才是最重要的。
閱讀更多 程序猿肸哥 的文章
