資訊專(zhuān)欄INFORMATION COLUMN
摘要：首先，需要微信官方支持以自定義標(biāo)簽的方式來(lái)封裝組件。依托于同微信團(tuán)隊(duì)良好的溝通渠道，我們團(tuán)隊(duì)在第一時(shí)間獲得了自定義標(biāo)簽組件的內(nèi)測(cè)邀請(qǐng)，并開(kāi)始著手將我們的想法落地。微信自定義組件功能，已于日開(kāi)始公測(cè)，請(qǐng)升級(jí)微信版本到或更高。
項(xiàng)目開(kāi)源地址：
MinUI：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli
是的，我們擼了一個(gè)新輪子。
在這個(gè)前端高速發(fā)展的時(shí)代，擼輪子并不是目的，而是解決問(wèn)題的手段。我們希望通過(guò)這個(gè)輪子，幫助像我們這樣的小程序開(kāi)發(fā)者，優(yōu)雅高效的搞定小程序中自定義組件的 開(kāi)發(fā) 和 使用 這 2 個(gè)環(huán)節(jié)，為開(kāi)發(fā)者 賦能。
授人以漁，基于 Min 提供的開(kāi)發(fā)賦能，和 MinUI 組件庫(kù)實(shí)踐的參考，不同小程序的開(kāi)發(fā)者，可以快速建立起符合其自身需求的組件化體系。
緣起一切的初衷，都始于我們希望像下面這樣，優(yōu)雅的定義和使用組件：
但這并不容易。
首先，需要微信官方支持以自定義標(biāo)簽的方式來(lái)封裝組件。我們知道，在以往的小程序開(kāi)發(fā)中，這樣的方式是不支持的。所喜，微信團(tuán)隊(duì)和我們的想法一致。依托于同微信團(tuán)隊(duì)良好的溝通渠道，我們團(tuán)隊(duì)在第一時(shí)間獲得了自定義標(biāo)簽組件的內(nèi)測(cè)邀請(qǐng)，并開(kāi)始著手將我們的想法落地。（PS：微信自定義組件功能，已于 2017.11.02 日開(kāi)始公測(cè)，請(qǐng)升級(jí)微信版本到 6.5.16 或更高）。
其次，需要降低組件的開(kāi)發(fā)成本。
再次，需要便捷的在既有項(xiàng)目中安裝、應(yīng)用和更新組件。
組件開(kāi)發(fā)對(duì)于組件的開(kāi)發(fā)，Min 提供了一整套的開(kāi)發(fā)方案，包括范式、工具化環(huán)境、Demo 預(yù)覽小程序、內(nèi)置化文檔、自動(dòng)編譯打包、一鍵式發(fā)布等能力。
○ 單文件策略
我們知道，小程序目前的工程化文件結(jié)構(gòu)，是多文件形式（.wxml、.wxss、.js）。為了提供額外的能力封裝，Min 采用了單文件的方式（.wxc 文件）來(lái)開(kāi)發(fā)一個(gè)組件，一個(gè)基于 Min 開(kāi)發(fā)的組件就是一個(gè) npm 包。
采用單文件的策略，既有對(duì)開(kāi)發(fā)者諸如 Vue 單文件開(kāi)發(fā)習(xí)慣的考慮，同時(shí)也基于在單文件的編譯環(huán)節(jié)，我們可以做一些額外的賦能 —— 如對(duì) less、postcss 的支持；再如對(duì)全局變量、模板、引用路徑 Resolve 等支持；抑或通過(guò)插件的引入，提供其他的額外能力。
○ Min Cli
Min 提供了一套 Cli 工具 （https://github.com/meili/min-cli） 來(lái)幫助開(kāi)發(fā)者快速創(chuàng)建、編譯、發(fā)布您的組件。通過(guò)$ npm -i -g @mindev/min-cli，您就能獲得 Min 提供的一鍵式能力。
通過(guò) $ min init ，您可以快速的創(chuàng)建本地的組件開(kāi)發(fā)環(huán)境。這個(gè)組件開(kāi)發(fā)環(huán)境，就是一個(gè)組件的預(yù)覽小程序，可以通過(guò)微信開(kāi)發(fā)者工具便捷的查看組件的運(yùn)行情況。
通過(guò) $ min new name （name 是你的組件名）來(lái)新建一個(gè)組件。
通過(guò) $ min dev *name 來(lái)開(kāi)啟開(kāi)發(fā)模式 —— 組件的最新改動(dòng)，都會(huì)在微信開(kāi)發(fā)者工具中實(shí)時(shí)的刷新顯示。
通過(guò) $ min publish *name 來(lái)最終發(fā)布你的組件，發(fā)布后的組件即為一個(gè)隨時(shí)可用的 npm 包。
○ MinUI
同時(shí)，我們還提供了一套小程序 UI 組件庫(kù)，這也是我們團(tuán)隊(duì)在業(yè)務(wù)中使用的組件庫(kù)。您可以通過(guò)搜索小程序 “MinUI” 、或通過(guò)掃描下方的“小程序二維碼”來(lái)訪(fǎng)問(wèn)它。
當(dāng)然，它也是開(kāi)源的 :) （https://github.com/meili/minui）。
組件應(yīng)用對(duì)于組件的應(yīng)用，Min 提供了在原有的應(yīng)用項(xiàng)目中，一鍵式安裝、一鍵式更新組件的能力。并提供了漸進(jìn)增強(qiáng)的諸如應(yīng)用全局變量、全局模板等能力支持。后續(xù)我們還將以插件化的方式，提供諸如代碼檢測(cè)、單測(cè)環(huán)境等能力支持。
○ 組件安裝
在既有應(yīng)用下，開(kāi)發(fā)者可以通過(guò) $min install *name 來(lái)安裝一個(gè)組件，組件默認(rèn)會(huì)安裝到項(xiàng)目工程的 packages/ 文件夾下。
安裝后的組件，即可以用小程序通用的方式在頁(yè)面中引入和使用了。
○ 組件更新
對(duì)于組件的更新，你可以使用 $ min update *name 來(lái)一鍵搞定。
○ 漸進(jìn)增強(qiáng)
Min 同時(shí)提供了一些應(yīng)用全局性的漸進(jìn)增強(qiáng)能力，以供開(kāi)發(fā)者選擇性使用。但這需要付出一點(diǎn)額外的成本。
前面提到，我們采用單文件 .wxc 的方式來(lái)開(kāi)發(fā)一個(gè)組件，因?yàn)樵诰幾g環(huán)節(jié)可以做一些額外的事情，這里的 “c” 即為 component 的首字母。
同理，Min 還提供了 .wxp 和 .wxa，來(lái)為 page 和 app 提供一些額外的賦能。如果您已經(jīng)在本地嘗試基于 Min 的開(kāi)發(fā)，就會(huì)發(fā)現(xiàn)本地的組件開(kāi)發(fā)環(huán)境這個(gè)小程序，就是基于 .wxp 和 .wxa 來(lái)實(shí)現(xiàn)的。 ：）
短暫的結(jié)尾
我們希望 Min 能幫助你快速的解決組件開(kāi)發(fā)中的痛點(diǎn)，我們也希望這個(gè)小 Baby 能夠在社區(qū)的幫助中快速成長(zhǎng)，所以我們將 Min 進(jìn)行了開(kāi)源。
希望有更多的同學(xué)通過(guò)實(shí)際的使用獲得收益，更希望有改進(jìn)的建議（吐槽 :p ）、或是共建，來(lái)幫助稚嫩的 Min 逐漸打磨的趨于成熟。
最后，再次附帶 Github 上項(xiàng)目的開(kāi)源地址：
MinUI：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli
輸出，才是最好的輸入 : )
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89514.html
摘要：微信小程序自定義組件由于作業(yè)部落貌似出了點(diǎn)問(wèn)題，耽誤了點(diǎn)時(shí)間，找了一個(gè)準(zhǔn)備寫(xiě)。微信小程序的官方支持官方提供有一個(gè)模板屬于小程序的自定義腳手架的相關(guān)內(nèi)容。至此，暫時(shí)結(jié)束微信小程序的自定義組件化，明天寫(xiě)插件。 微信小程序自定義組件 ps 由于作業(yè)部落貌似出了點(diǎn)問(wèn)題，耽誤了點(diǎn)時(shí)間，找了一個(gè)stackedit.io準(zhǔn)備寫(xiě)。無(wú)奈，這是要自己建編輯器的節(jié)奏啊。沒(méi)有一個(gè)能靠的注 為何存在組件 組件間...
摘要：引入組件假如我要在里引入組件想在頁(yè)面中使用組件必須在文件里注冊(cè)組件。組件的屬性列表組件的方法列表組件內(nèi)數(shù)據(jù)傳到外部在這個(gè)組件內(nèi)我定義了這個(gè)方法，每次點(diǎn)擊一級(jí)菜單或二級(jí)菜單的時(shí)候我就用過(guò)方法把的值傳到組件外部以供使用。 一、前言 如果小程序中有可復(fù)用的UI且具有一定的功能性，就可以使用自定義組件將其封裝起來(lái)。（如果僅僅只需要復(fù)用UI可使用template） 下面介紹父子組件的數(shù)據(jù)傳遞方法...
摘要：組件介紹組件的內(nèi)部運(yùn)動(dòng)是動(dòng)畫(huà)，使用的是開(kāi)源動(dòng)畫(huà)庫(kù)的出現(xiàn)是為了解決小程序開(kāi)發(fā)時(shí)的復(fù)雜運(yùn)動(dòng)會(huì)話(huà)框。但是我們?cè)诮Y(jié)構(gòu)中用語(yǔ)句來(lái)控制組件的顯示與隱藏的。因?yàn)樵摻M件的使命是提供多種運(yùn)動(dòng)方式，所以不會(huì)定義用于裝載內(nèi)容盒子的樣式。 vi-motion 組件介紹 vi-motion組件的內(nèi)部運(yùn)動(dòng)是css3動(dòng)畫(huà)，使用的是animate開(kāi)源動(dòng)畫(huà)庫(kù) vi-motion的出現(xiàn)是為了解決小程序開(kāi)發(fā)時(shí)的復(fù)雜運(yùn)動(dòng)會(huì)...
摘要：小程序的視圖層目前使用作為渲染載體，而邏輯層是由獨(dú)立的作為運(yùn)行環(huán)境。比如小程序的，通信一次就像是寫(xiě)情書(shū)所以，嚴(yán)格來(lái)說(shuō)，小程序是微信定制的混合開(kāi)發(fā)模式。出棧入棧解決小程序接口不支持的問(wèn)題小程序的所有接口，都是通過(guò)傳統(tǒng)的回調(diào)函數(shù)形式來(lái)調(diào)用的。 作者：張利濤，視頻課程《微信小程序教學(xué)》、《基于Koa2搭建Node.js實(shí)戰(zhàn)項(xiàng)目教學(xué)》主編，滬江前端架構(gòu)師本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處 小程...
摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...
閱讀 3288·2021-09-30 09:47
閱讀 2306·2021-09-10 10:51
閱讀 1910·2021-09-08 09:36
閱讀 2939·2019-08-30 12:56
閱讀 3045·2019-08-30 11:16
閱讀 2634·2019-08-29 16:40
閱讀 3005·2019-08-29 15:25
閱讀 1642·2019-08-29 11:02
