微信小程式自定義元件 - 彈窗元件
小程式開發的小夥伴們應該都知道，雖然小程式已經給我們開發者提供了很多元件便於我們快速開發，但有時候，可能因為業務需求或者個人對技術追求 …… ，種種原因，促使我們不得不自己定義我們需要或者我們想要的元件。
自定義元件除可以滿足我們的業務需求外，還有很多好處，例如可以讓我們將複雜的頁面拆分成多個低耦合的模組，也可重複使用該元件，提高程式碼的可重用性，提高開發效率，也可以有助於程式碼維護，等等。一時半會說不完，咋們直接進入正題吧。
本篇文章記錄了我自己在開發中，一步步自定義元件的過程和一些總結，希望對各位有所幫助！如果覺得有收穫，希望各位轉發關注、動動你手指幫忙點個贊。謝謝！
坐穩啦~
要做自定義元件，我們先定一個小目標，比如說我們在小程式中經常使用的彈窗元件，基本效果圖如下
如何自定義元件？
新建好一個基礎專案，再新建好一個目錄 components 專門放自定義元件，在此目錄結構下新建一個 dialog 資料夾來放這次我們自定義的元件（如果以後重複使用，直接拷貝該資料夾即可）。
自定義元件一般需要由 .json、.wxml、.wxss、.js 4 個檔案組成，跟普通頁面一樣，其中 .js 檔案的編寫是重點難點也是和頁面的區別，其他三個檔案的編寫跟我們平時寫頁面沒多大出入。
我們在dialog 資料夾下新建一個 dialog 頁面來自定義我們的元件，是新建頁面哦！但建好後，記得把 .js 檔案中的程式碼清除，後面會說明為什麼，這也是自定義元件和普通頁面不同之處，稍後我們再把程式碼補上；如果不建頁面，也可以分別建立 4 個不同字尾名但檔名一樣的空檔案。我推薦使用建立頁面的方式，因為方便快捷，當然因人而異。
新建基礎專案時，index 頁面可能會少了一個 index.json 檔案，需要我們自己新建。新建基礎專案也會有 logs 頁面，我們可以選擇刪除或者保留，我們此次不會使用到它。
建立好後的目錄結構，也就是專案結構如下，我們只需往裡面補充程式碼就可以
要想自定義元件，我們需要先在 dialog.json 檔案中宣告，告訴編譯器：吶，我要開始自定義元件了
自定義元件無非就那麼幾種，也就是已有元件、新元件、組合、修改的排列組合的集。
然後就可以寫介面和樣式了，和平常寫的介面樣式寫法沒什麼區別，這次我只是用已有的元件通過組合成新元件，該怎麼排就怎麼排，介面寫在 dialog.wxml 中，樣式寫在 dialog.wxss 中，照常寫就可以了。
介面如下：
這個介面也不難理解，相信大家一看就能明白，其中的標題、資訊、確定按鈕文字和取消按鈕文字都進行了資料繫結，都需要我們傳進去，我們想傳什麼就顯示什麼，這樣就靈活了很多，中間還有一根短分割線。
樣式如下：
注意：在樣式檔案 .wxss 中不應使用ID選擇器、屬性選擇器和標籤名選擇器，常用類選擇器。
接下來是，最難的部分： .js 檔案
在自定義元件的 js 檔案中，需要使用 Component( ) 來註冊元件，這也為什麼前面要刪除 .js 檔案中程式碼的原因，也是跟頁面最大的區別，在裡面我們可以提供給元件一些內部資料、屬性定義和自定義方法等。
元件的內部資料和屬性將被用於元件 wxml 的渲染，方法則用於事件處理或者寫業務邏輯等。
其中，data 部分跟我們在頁面中的含義用法一致；我們可以指定 properties 屬性的型別和預設值，屬性值也可由元件外部傳入
像上面這樣，元件中的標題就是「 測試 」了，而不是預設的「標題」，往下看完怎麼使用後再回來看就知道怎麼回事了。
還有方法 method，方法也跟我們在頁面中方法使用情況一樣。
這裡重點說一下這個觸發事件，使用 this.triggerEvent( ) 可以發生觸發事件，什麼個情況呢？如果我們繫結觸發事件中的事件，那麼觸發事件發生，繫結的事件也會發生（不知描述得正確與否），如
舉個例子來說明
我們要注意的是第一個引數和第二個引數，前者是指定需要觸發的事件的事件名，例如 cancle（可隨性自定義），在使用時就可以進行繫結，如：bind:cancle 或者 bindcancle 這種格式都可以正確呼叫，推薦前者。而後者是一個 detail 物件，這個引數我們常用！ 用來向呼叫者傳遞我們想告訴呼叫者的資料 ，是元件建立者和呼叫者溝通的橋樑 ，這個能解決很多問題，希望大家熟知，以後你常用自定義元件就知道這個有多重要了；而 option 引數則很少用。
詳情可以檢視官方文件，官方文件是最好的資料，但不是最合適的。至於為什麼這麼說，相信很多開發者都深有體會。
如此一來，當代碼執行到 this.triggerEvent( ) 這句時，就會觸發 指定的 cancel 事件。
而在使用元件時，我們又綁定了該事件是 cancel_event（可隨性自定義），例如： xx.wxml 中的程式碼
那麼假如我們在 .js 中定義了 cancel_event 函式
那該函式就會被呼叫。也就是說，當 this.triggerEvent( ) 程式碼被執行，就會輸出 index cancel。這一連串的關係，希望我能說明白。如果有哪裡不清楚或者有錯，歡迎在下方留言。
一定要在定義元件和使用元件及展示效果間來回看看，這樣可以更好更快的理解。
如何使用自定義元件？
我們自定義元件的目的是提高程式碼重用性，或者滿足我們的因為需求，粗暴點的就是為了「 用」，定義好元件之後，我們怎麼引用這個自定義的元件呢？
在 index.json 中宣告，告訴編譯器：吶，我要使用放在 xx 的 xx 名字的自定義元件了
這裡的 access-dialog 是我們給我們要的元件命名，是可以自由定義的，想給它叫什麼名字就叫什麼，但最好是故名思意。而後面是指定這個自定義元件的目錄，我這裡給的是絕對路徑，也可以是相對路徑，個人喜歡就好了。
有了元件名字，我們就可以像其他元件一樣使用它了，認真看後面程式碼怎麼使用它就明白了
這樣簡單地就應用上了，簡單粗暴！還綁定了 cancel 和 confirm 事件。
在 index.js 檔案中寫上對應事件的業務邏輯，這樣我們就基本學會了如何自定義元件和自定義元件的使用
我們分別設定元件的標題、資訊，設定兩個按鈕上的文字，如下程式碼一樣，不過我建議後期要進行資料繫結，這樣我們只要在 js 檔案中修改就好了，也可以用程式碼控制這些值，而我們一般也是這樣做，而不是在頁面中固定
這樣，我們可以自定義控制標題、資訊，兩個按鈕文字及點選後的業務邏輯。
一切都可以自定義，隨心所欲！如果以後自己寫好一個元件後，想讓別人使用，我們只要把放元件的資料夾分享就可以，當然，你元件中如果引用了其他元件也要一併拷貝、使用了全域性樣式也是！
如需更多關於小程式的技術文章及學習資料，諸如電子書、視訊等，歡迎關注公眾號：MoTec，在公眾號內回覆相關文章即可獲取。
MoTec
如果有人需要這個小 demo 來參考的話，可以在公眾號後臺回覆「 小程式自定義元件 - 彈窗 」即可獲取。如果覺得這篇文章不錯，期待你的關注和留言，不妨點個贊。