1.0 來(lái)了
2018 年 8 月 11 日，我們發(fā)布了 Vant Weapp 的首個(gè)版本。16 個(gè)月以來(lái)，我們收到了 27 位開發(fā)者貢獻(xiàn)的 1000 多次提交，也處理了 1200 多個(gè) issue，發(fā)布了 50 多個(gè)版本。Github 的 star 數(shù)從 5k 上升到了 11k，長(zhǎng)期是 Github 上 star 數(shù)最多的第三方小程序 UI 組件庫(kù)。
<img src="https://img.yzcdn.cn/public_files/2019/12/05/7b13ce2b7ae72258f05ee4cc1772016c.jpg" style="zoom:25%;" />
現(xiàn)在，我們很高興向大家介紹 Vant Weapp 1.0 版本。
經(jīng)過 2 個(gè)月的開發(fā)與 beta 測(cè)試，我們?yōu)榇蠹規(guī)?lái)了 11 個(gè)全新的組件，重構(gòu)了多個(gè)現(xiàn)有組件，增加了覆蓋所有組件的主題定制特性。并且，為了配合 Vant 家族的發(fā)展，正式將包名變更為 @vant/weapp。
大家可以掃描下方小程序碼體驗(yàn) Vant Weapp 1.0 示例
新版本介紹
新的組件
在 Vant Weapp 1.0 版本中，我們新增了 11 個(gè)實(shí)用的基礎(chǔ)組件：
- Grid 宮格，用于展示內(nèi)容或進(jìn)行頁(yè)面導(dǎo)航
- Image 圖片，增強(qiáng)版的 Image 標(biāo)簽，支持圖片懶加載與加載失敗提示
- Circle 環(huán)形進(jìn)度條，告知用戶當(dāng)前的狀態(tài)和進(jìn)度
- Overaly 遮罩層，用于強(qiáng)調(diào)特定的頁(yè)面元素，并阻止用戶進(jìn)行其他操作
- Divider 分割線，區(qū)隔內(nèi)容的分割線
- Sticky 粘性布局，與 CSS 中
position: sticky屬性實(shí)現(xiàn)的效果類似 - Skeleton 骨架屏，在待加載區(qū)域展示的占位區(qū)塊，提供界面加載過程中的過渡效果
- IndexBar 索引欄，通訊錄中的字母索引欄，用于長(zhǎng)列表快速索引
- Uploader 文件上傳，上傳一個(gè)或多個(gè)文件
- CountDown 倒計(jì)時(shí)，用于顯示活動(dòng)倒計(jì)時(shí)、短信驗(yàn)證碼等
- DropdownMenu 下拉菜單，用于列表的分類選擇、篩選及排序
樣式定制
在 1.0 迭代計(jì)劃確定之初，我們就不斷思考這樣一個(gè)問題 -- 該如何給用戶提供動(dòng)態(tài)切換主題樣式的功能呢？
微信小程序的環(huán)境是非常特殊的。不具有動(dòng)態(tài)加載代碼的機(jī)制，同時(shí)微信又限制了代碼的主包大小和總大小。傳統(tǒng)的基于預(yù)設(shè)的樣式定制過于臃腫，不再適合微信小程序的環(huán)境。
微信小程序自定義組件的組件模型相當(dāng)于一個(gè)簡(jiǎn)化版的 Shadow DOM，幸運(yùn)的是，小程序也支持了 CSS自定義屬性 的特性。最終，我們基于CSS自定義屬性設(shè)計(jì)了樣式定制的方案，開發(fā)者使用靈活、方便，組件維護(hù)也更簡(jiǎn)單。
從 1.0 版本開始，Vant Weapp 中的所有組件都支持通過 CSS組定義屬性 進(jìn)行樣式定制，具體使用姿勢(shì)可查看相關(guān)文檔
不兼容更新
1.0 版本中包含少量不兼容更新，主要是命名調(diào)整和移除個(gè)別屬性。對(duì)于正在使用 0.x 版本的項(xiàng)目，請(qǐng)按照更新日志依次檢查，大部分項(xiàng)目可以無(wú)痛升級(jí)。
未來(lái)
Vant Weapp 會(huì)積極探索與騰訊云開發(fā)結(jié)合的可能性，為大家?guī)?lái)更好的使用體驗(yàn)。不久，我們將再次與大家見面。
最后
感謝社區(qū)長(zhǎng)期以來(lái)為 Vant Weapp 提供的貢獻(xiàn)與反饋，讓我們始終與開發(fā)者站在一起。如果您在使用 Vant Weapp 的過程中遇到任何問題，歡迎在 Github 向我們反饋。
Vant Weapp 1.0 的主要貢獻(xiàn)者為(按首字母排序)：@Andyliwr @aphasic @chenjiahan @creeperdance @Eamonnzhang @Fyerl @JakeLaoyu @jerryni @kongyeah @Lindysen @linrz @rex-zsd @thoamsy @ylethe 。
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！
