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

在這個前端高速發(fā)展的時代，擼輪子并不是目的，而是解決問題的手段。我們希望通過這個輪子，幫助像我們這樣的小程序開發(fā)者，優(yōu)雅高效的搞定小程序中自定義組件的 開發(fā) 和 使用 這 2 個環(huán)節(jié)，為開發(fā)者 賦能 。

緣起

一切的初衷，都始于我們希望像下面這樣，優(yōu)雅的定義和使用組件：

但這并不容易。

首先，需要微信官方支持以自定義標簽的方式來封裝組件。我們知道，在以往的小程序開發(fā)中，這樣的方式是不支持的。所喜，微信團隊和我們的想法一致。依托于同微信團隊良好的溝通渠道，我們團隊在先進時間獲得了自定義標簽組件的內(nèi)測邀請，并開始著手將我們的想法落地。（PS：微信自定義組件功能，已于 2017.11.02 日 開始公測 ，請升級微信版本到 6.5.16 或更高）。

其次，需要降低組件的開發(fā)成本。

再次，需要便捷的在既有項目中安裝、應用和更新組件。

組件開發(fā)

對于組件的開發(fā)，Min 提供了一整套的開發(fā)方案，包括范式、工具化環(huán)境、Demo 預覽小程序、內(nèi)置化文檔、自動編譯打包、一鍵式發(fā)布等能力。

○ 單文件策略

我們知道，小程序目前的工程化文件結構，是多文件形式（.wxml、.wxss、.js）。為了提供額外的能力封裝，Min 采用了單文件的方式（.wxc 文件）來開發(fā)一個組件，一個基于 Min 開發(fā)的組件就是一個 npm 包。

采用單文件的策略，既有對開發(fā)者諸如 Vue 單文件開發(fā)習慣的考慮，同時也基于在單文件的編譯環(huán)節(jié)，我們可以做一些額外的賦能 —— 如對 less、postcss 的支持；再如對全局變量、模板、引用路徑 Resolve 等支持；抑或通過插件的引入，提供其他的額外能力。

○ Min Cli

Min 提供了一套 Cli 工具 （ https://github.com/meili/min-cli） 來幫助開發(fā)者快速創(chuàng)建、編譯、發(fā)布您的組件。通過 $ npm -i -g @mindev/min-cli ，您就能獲得 Min 提供的一鍵式能力。

通過 $ min init ，您可以快速的創(chuàng)建本地的組件開發(fā)環(huán)境。這個組件開發(fā)環(huán)境，就是一個組件的預覽小程序，可以通過微信開發(fā)者工具便捷的查看組件的運行情況。

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

通過 $ min dev *name 來開啟開發(fā)模式 —— 組件的較新改動，都會在微信開發(fā)者工具中實時的刷新顯示。

通過 $ min publish *name 來最終發(fā)布你的組件，發(fā)布后的組件即為一個隨時可用的 npm 包。

○ MinUI

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

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

組件應用

對于組件的應用，Min 提供了在原有的應用項目中，一鍵式安裝、一鍵式更新組件的能力。并提供了漸進增強的諸如應用全局變量、全局模板等能力支持。后續(xù)我們還將以插件化的方式，提供諸如代碼檢測、單測環(huán)境等能力支持。

○ 組件安裝

在既有應用下，開發(fā)者可以通過 $min install *name 來安裝一個組件，組件默認會安裝到項目工程的 packages/ 文件夾下。

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

○ 組件更新

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

○ 漸進增強

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

前面提到，我們采用單文件 .wxc 的方式來開發(fā)一個組件，因為在編譯環(huán)節(jié)可以做一些額外的事情，這里的 “c” 即為 component 的首字母。

同理，Min 還提供了 .wxp 和 .wxa，來為 page 和 app 提供一些額外的賦能。如果您已經(jīng)在本地嘗試基于 Min 的開發(fā)，就會發(fā)現(xiàn)本地的組件開發(fā)環(huán)境這個小程序，就是基于 .wxp 和 .wxa 來實現(xiàn)的。 ：）

短暫的結尾

我們希望 Min 能幫助你快速的解決組件開發(fā)中的痛點，我們也希望這個小 Baby 能夠在社區(qū)的幫助中快速成長，所以我們將 Min 進行了開源。

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

最后，再次附帶 Github 上項目的開源地址，輸出，才是較好的輸入 : )

MinUI： https://github.com/meili/minui

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

蘑菇街前端團隊，2017.11.02 于杭州。