[開源] Min – 小程式自定義元件解決方案

專案開源地址（MIT 協議）：

– MinUI：github.com/meili/minui

是的，我們（蘑菇街前端開發團隊）擼了一個新輪子。

在這個前端高速發展的時代，擼輪子並不是目的，而是解決問題的手段。我們希望通過這個輪子，幫助像我們這樣的小程式開發者，優雅高效的搞定小程式中自定義元件的 開發 和 使用 這 2 個環節，為開發者 賦能。

授人以漁，基於 Min 提供的開發賦能，和 MinUI 元件庫實踐的參考，不同小程式的開發者，可以快速建立起符合其自身需求的元件化體系。

緣起

一切的初衷，都始於我們希望像下面這樣，優雅的定義和使用組

但這並不容易。

首先，需要微信官方支援以自定義標籤的方式來封裝元件。我們知道，在以往的小程式開發中，這樣的方式是不支援的。所喜，微信團隊和我們的想法一致。依託於同微信團隊良好的溝通渠道，我們團隊在第一時間獲得了自定義標籤元件的內測邀請，並開始著手將我們的想法落地。（PS：微信自定義元件功能，已於 2017.11.02 日開始公測，請升級微信版本到 6.5.16 或更高）。

其次，需要降低元件的開發成本。

再次，需要便捷的在既有專案中安裝、應用和更新元件。

元件開發

對於元件的開發，Min 提供了一整套的開發方案，包括正規化、工具化環境、Demo 預覽小程式、內建化文件、自動編譯打包、一鍵式釋出等能力。

○ 單檔案策略

我們知道，小程式目前的工程化檔案結構，是多檔案形式（.wxml、.wxss、.js）。為了提供額外的能力封裝，Min 採用了單檔案的方式（.wxc 檔案）來開發一個元件，一個基於 Min 開發的元件就是一個 npm 包。

採用單檔案的策略，既有對開發者諸如 Vue 單檔案開發習慣的考慮，同時也基於在單檔案的編譯環節，我們可以做一些額外的賦能 —— 如對 less、postcss 的支援；再如對全域性變數、模板、引用路徑 Resolve 等支援；抑或通過外掛的引入，提供其他的額外能力。

○ Min Cli

Min 提供了一套 Cli 工具（https://github.com/meili/min-cli）來幫助開發者快速建立、編譯、釋出您的元件。通過 $ npm -i -g @mindev/min-cli ，您就能獲得 Min 提供的一鍵式能力。

通過 $ min init ，您可以快速的建立本地的元件開發環境。這個元件開發環境，就是一個元件的預覽小程式，可以通過微信開發者工具便捷的檢視元件的執行情況。

通過 $ min new *name （*name 是你的元件名）來新建一個元件。

通過 $ min dev *name 來開啟開發模式 —— 元件的最新改動，都會在微信開發者工具中實時的重新整理顯示。

通過 $ min publish *name 來最終釋出你的元件，釋出後的元件即為一個隨時可用的 npm 包。

○ MinUI

同時，我們還提供了一套小程式 UI 元件庫，這也是我們團隊在業務中使用的元件庫。您可以通過搜尋小程式 “MinUI” 、或通過掃描下方的“小程式二維碼”來訪問它。

當然，它也是開源的 ? （github.com/meili/minui）。

元件應用

對於元件的應用，Min 提供了在原有的應用專案中，一鍵式安裝、一鍵式更新元件的能力。並提供了漸進增強的諸如應用全域性變數、全域性模板等能力支援。後續我們還將以外掛化的方式，提供諸如程式碼檢測、單測環境等能力支援。

○ 元件安裝

在既有應用下，開發者可以通過 $min install *name 來安裝一個元件，元件預設會安裝到專案工程的 packages/ 資料夾下。

安裝後的元件，即可以用小程式通用的方式在頁面中引入和使用了。

○ 元件更新

對於元件的更新，你可以使用 $ min update *name 來一鍵搞定。

○ 漸進增強

Min 同時提供了一些應用全域性性的漸進增強能力，以供開發者選擇性使用。但這需要付出一點額外的成本。

前面提到，我們採用單檔案 .wxc 的方式來開發一個元件，因為在編譯環節可以做一些額外的事情，這裡的 “c” 即為 component 的首字母。

同理，Min 還提供了 .wxp 和 .wxa，來為 page 和 app 提供一些額外的賦能。如果您已經在本地嘗試基於 Min 的開發，就會發現本地的元件開發環境這個小程式，就是基於 .wxp 和 .wxa 來實現的。 ：）

短暫的結尾

我們希望 Min 能幫助你快速的解決元件開發中的痛點，我們也希望這個小 Baby 能夠在社群的幫助中快速成長，所以我們將 Min 進行了開源。

希望有更多的同學通過實際的使用獲得收益，更希望有改進的建議（吐槽 :p ）、或是共建，來幫助稚嫩的 Min 逐漸打磨的趨於成熟。

最後，再次附帶 Github 上專案的開源地址。

 – MinUI：github.com/meili/minui

輸出，才是最好的輸入 : )