Min - 小程序自定義組件解決方案

項目開源地址：

MinUI：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli

---

是的，咱們擼了一個新輪子。

在這個前端高速發展的時代，擼輪子並非目的，而是解決問題的手段。咱們但願經過這個輪子，幫助像咱們這樣的小程序開發者，優雅高效的搞定小程序中自定義組件的 開發 和 使用 這 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」 、或經過掃描下方的「小程序二維碼」來訪問它。

固然，它也是開源的 :) （https://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：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli

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