資訊專欄INFORMATION COLUMN
摘要：首先，需要微信官方支持以自定義標簽的方式來封裝組件。依托于同微信團隊良好的溝通渠道，我們團隊在第一時間獲得了自定義標簽組件的內測邀請，并開始著手將我們的想法落地。微信自定義組件功能，已于日開始公測，請升級微信版本到或更高。
項目開源地址：
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
輸出，才是最好的輸入 : )
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89514.html
摘要：微信小程序自定義組件由于作業部落貌似出了點問題，耽誤了點時間，找了一個準備寫。微信小程序的官方支持官方提供有一個模板屬于小程序的自定義腳手架的相關內容。至此，暫時結束微信小程序的自定義組件化，明天寫插件。 微信小程序自定義組件 ps 由于作業部落貌似出了點問題，耽誤了點時間，找了一個stackedit.io準備寫。無奈，這是要自己建編輯器的節奏啊。沒有一個能靠的注 為何存在組件 組件間...
摘要：引入組件假如我要在里引入組件想在頁面中使用組件必須在文件里注冊組件。組件的屬性列表組件的方法列表組件內數據傳到外部在這個組件內我定義了這個方法，每次點擊一級菜單或二級菜單的時候我就用過方法把的值傳到組件外部以供使用。 一、前言 如果小程序中有可復用的UI且具有一定的功能性，就可以使用自定義組件將其封裝起來。（如果僅僅只需要復用UI可使用template） 下面介紹父子組件的數據傳遞方法...
摘要：組件介紹組件的內部運動是動畫，使用的是開源動畫庫的出現是為了解決小程序開發時的復雜運動會話框。但是我們在結構中用語句來控制組件的顯示與隱藏的。因為該組件的使命是提供多種運動方式，所以不會定義用于裝載內容盒子的樣式。 vi-motion 組件介紹 vi-motion組件的內部運動是css3動畫，使用的是animate開源動畫庫 vi-motion的出現是為了解決小程序開發時的復雜運動會...
摘要：小程序的視圖層目前使用作為渲染載體，而邏輯層是由獨立的作為運行環境。比如小程序的，通信一次就像是寫情書所以，嚴格來說，小程序是微信定制的混合開發模式。出棧入棧解決小程序接口不支持的問題小程序的所有接口，都是通過傳統的回調函數形式來調用的。 作者：張利濤，視頻課程《微信小程序教學》、《基于Koa2搭建Node.js實戰項目教學》主編，滬江前端架構師本文原創，轉載請注明作者及出處 小程...
閱讀 3274·2021-09-30 09:47
閱讀 2290·2021-09-10 10:51
閱讀 1889·2021-09-08 09:36
閱讀 2926·2019-08-30 12:56
閱讀 3027·2019-08-30 11:16
閱讀 2622·2019-08-29 16:40
閱讀 2994·2019-08-29 15:25
閱讀 1632·2019-08-29 11:02
