微信小程序UI框架有哪些?
時(shí)間：2023-11-20 06:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-11-20 06:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
微信小程序UI框架有哪些?：推薦9款優(yōu)秀的小程序UI框架，建議收藏！
1.TouchUI WX
https://github.com/uileader/touchuiwxTouchUI-WX是一套完全免費(fèi)的微信小程序開(kāi)發(fā)框架，包含豐富的UI控件用于官方組件的補(bǔ)充，并擴(kuò)展了小程序很多其他能力。
特點(diǎn)：1.組建擴(kuò)充
增加了30多種常用的組件用于官方組件的補(bǔ)充。
2、功能擴(kuò)充
兼容阿里的iconfont圖標(biāo)庫(kù)，海量矢量圖標(biāo)隨意使用；補(bǔ)充了常用樣式庫(kù)、支持less語(yǔ)法、支持全局配置主題色等
3、開(kāi)發(fā)體驗(yàn)改善
四文件方式改為單文件方式，通過(guò)VSCode編輯器+插件的方式開(kāi)發(fā)，擁有web開(kāi)發(fā)體驗(yàn)；
4、小程序轉(zhuǎn)為H5應(yīng)用
可以與H5開(kāi)發(fā)框架TouchUI工程相互轉(zhuǎn)換，發(fā)布成webApp。開(kāi)發(fā)一套代碼，擁有兩套應(yīng)用。
2.lin-ui
https://github.com/TaleLin/lin-ui簡(jiǎn)潔，易用，靈活的微信小程序組件庫(kù)。
- 采用原生小程序語(yǔ)言編寫(xiě), 使用npm安裝
- 滿(mǎn)足場(chǎng)景各應(yīng)用場(chǎng)景, 更有電商專(zhuān)題組件提供支持
- 可在mpvue, Taro, WePY等第三方框架中使用LinUI
- LinUI不是常規(guī)意義上的組件庫(kù), 我們還擁有過(guò)濾器, 行為等高級(jí)功能, 滿(mǎn)足開(kāi)發(fā)者個(gè)性化需求
- 無(wú)需更改樣式即可搭建精美小程序
- 林間有風(fēng)官方提供專(zhuān)業(yè)詳盡的文檔幫助你快速上手LinUI
3.WeUI
https://github.com/Tencent/weui-wxss
WeUI WXSS是騰訊官方UI組件庫(kù)WeUI的小程序版，提供了跟微信界面風(fēng)格一致的用戶(hù)體驗(yàn)。
可在
https://weui.io/ 直接看到UI效果
WeUI 使用簡(jiǎn)單，風(fēng)格微信原生風(fēng)格，以綠色為主色 ，主要是兩個(gè)大版本 ，1.x版本和2.x版本 ，相比1.x版本來(lái)說(shuō)，2.x版本視覺(jué)上更好。
風(fēng)格與微信視覺(jué)體驗(yàn)一致，在開(kāi)發(fā)中我們需要更豐富漂亮的UI效果 ，需要修改WeUI的樣式或自定義css 。
4.iview weapp
https://github.com/TalkingData/iview-weapp
iView是TalkingData發(fā)布的一款高質(zhì)量的基于Vue.js組件庫(kù)，而iView weapp則是它們的小程序版本。
官網(wǎng)地址：iView Weapp - 一套高質(zhì)量的微信小程序 UI 組件庫(kù)
優(yōu)點(diǎn)：提供了豐富的UI組件，尤其是 tabBar、Tabs、抽屜、index索引 ，使用比較方便。
缺點(diǎn)：頁(yè)面風(fēng)格比較固定、修改起來(lái)比較困難。輸入框在模擬器下經(jīng)常無(wú)法輸入，給應(yīng)用調(diào)試帶來(lái)了麻煩。
5.ColorUI
https://github.com/weilanwl/ColorUI鮮亮的高飽和色彩，專(zhuān)注視覺(jué)的小程序組件庫(kù)。
ColorUI是一個(gè)Css類(lèi)的UI組件庫(kù)！不是一個(gè)Js框架。相比于同類(lèi)小程序組件庫(kù)，ColorUI更注重于視覺(jué)交互！
其組件在美觀性方面比較突出。
開(kāi)發(fā)文檔參考（編輯中）：https://www.color-ui.com
優(yōu)點(diǎn)：視覺(jué)效果漂亮，注意看一下，他可以將樣式沉浸到手機(jī)最頂部，這一點(diǎn)很好，同時(shí)其他組件也挺好，可針對(duì)自己的需求，直接修改或覆蓋他的css樣式。
缺點(diǎn)：缺少文檔、很多新人無(wú)從下手。掃碼預(yù)覽時(shí)，近期廣告有些頻繁，影響使用，開(kāi)發(fā)者也想有點(diǎn)費(fèi)用，大家理解，喜歡的可以對(duì)開(kāi)發(fā)者點(diǎn)廣告支持，開(kāi)源不易。
6.Vant Weapp
https://github.com/youzan/vant-weappVant Weapp 是有贊移動(dòng)端組件庫(kù) Vant 的小程序版本，兩者基于相同的視覺(jué)規(guī)范，提供一致的 API 接口，助力開(kāi)發(fā)者快速搭建小程序應(yīng)用。
開(kāi)發(fā)文檔參考：
https://youzan.github.io/vant-weapp/#/intro優(yōu)點(diǎn)：視覺(jué)效果簡(jiǎn)單明朗、提供了日常開(kāi)發(fā)使用的組件、文檔很詳細(xì)。
缺點(diǎn)：門(mén)檻相比其他幾個(gè)UI框架高，需要會(huì) vue 的開(kāi)發(fā)者，同時(shí)不支持原生開(kāi)發(fā)。像我這樣對(duì) vue 不是很熟悉的，不建議使用，比較熟悉 vue 的推薦使用。
7.TaroUI
NervJS/taro-ui
TaroUI 是由京東·凹凸實(shí)驗(yàn)室發(fā)布的多端 UI 組件庫(kù)。這套組件庫(kù)，可以在 H5、微信小程序、支付寶小程序、百度小程序多端適配運(yùn)行。TaroUI 的整體風(fēng)格簡(jiǎn)約、清新、統(tǒng)一，適合工具、讀書(shū)、資訊、教育、商務(wù)等類(lèi)型的小程序。
開(kāi)發(fā)文檔：
https://taro-ui.aotu.io/#/docs/introduction除了擁有上文所提及的組件之外，TaroUI 還有幾個(gè)特別的組件。在「表單」中有一項(xiàng)「范圍選擇器」，可以通過(guò)滑動(dòng)條指定數(shù)值范圍。在「高階組件」中，可以顯示「日歷」，并且支持多種日期選擇樣式。
8優(yōu)點(diǎn)：Taro UI 可謂神通廣大，功能豐富，開(kāi)發(fā)一套代碼可以可以在微信小程序 / H5 / 百度小程序 等多端適配運(yùn)行。
缺點(diǎn)：入門(mén)門(mén)檻高，不適合新人開(kāi)發(fā)者。相對(duì)而言，使用的人數(shù)不夠多，開(kāi)發(fā)中出現(xiàn)問(wèn)題排查困難。只用在微信小程序開(kāi)發(fā)上，大材小用了，殺雞焉用宰牛刀！
8.WuxUI
這套組件庫(kù)所包含的組件最為豐富。不僅我們前文提到的各類(lèi)組件都可以在 Wux 中找到，而且還有進(jìn)度環(huán)、骨架屏、篩選欄、數(shù)字鍵盤(pán)、結(jié)果頁(yè)等實(shí)用工具類(lèi)組件。如果你想開(kāi)發(fā)一款工具類(lèi)小程序，Wux 是個(gè)不錯(cuò)的選擇。
開(kāi)發(fā)文檔：
https://wux-weapp.github.io/wux-weapp-docs/#/introduce9.MinUI
meili/min-cli
MinUI 是由蘑菇街發(fā)布的組件庫(kù)。與其他組件庫(kù)不同的是，MinUI 更注重一些細(xì)節(jié)的處理。
開(kāi)發(fā)文檔：
https://meili.github.io/min/docs/minui/index.html#README調(diào)用「基礎(chǔ)元件」中的「文本截?cái)唷梗梢钥刂崎L(zhǎng)文本的顯示行數(shù)，文本超長(zhǎng)的用省略號(hào)結(jié)尾?！疙?yè)底提示」可以用在上拉加載中的過(guò)程中。而「價(jià)格」則提供了各種樣式的價(jià)格及貨幣符號(hào)。
相比其他組件庫(kù)，MinUI 將各種組件拆分得更細(xì)，真正使用時(shí)，需要開(kāi)發(fā)者更多的對(duì)各個(gè)組件進(jìn)行再次結(jié)合，但也因此 MinUI 顯得更加通用。
其他推薦：.net core高頻面試題有哪些？
玩轉(zhuǎn)Github：強(qiáng)烈推薦這份.NET程序員面試手冊(cè)，4萬(wàn)字干貨！
有哪些不錯(cuò)的windows form開(kāi)源項(xiàng)目推薦？
Visual Studio 有哪些好用的插件？
Visual Studio有哪些不為人知卻特別好用的實(shí)用工具/技巧/功能/特性？
在線咨詢(xún)