大家好,我是Echa。
由于昨天小編發布一篇關于適合接私活的小程序開源項目相關優質的干貨文章:推薦16個適合接私活的小程序開源項目,有興趣的粉絲們看看這篇。結果陸陸續續小編收到粉絲們的私信反饋有沒有針對小程序開發相關開源漂亮火熱的UI庫呢?這樣的話,接私活搞副業更加得心應手了。為了粉絲們多接私活,多掙錢,提高生活品質。小編不能耽誤大家發財,趕緊大腦高速運轉安排上。另外,有接私活搞副業能力的粉絲們,可以私信小編回復:接私活。獲取適合接私活合集系列的優秀開源項目,助你接私活得心應手。
今天小編給大家分享10個Github上非?;鸬男〕绦蜷_源UI庫,個個都靚,希望大家喜歡。
創作不易,喜歡的老鐵們加個關注,點個贊,打個賞,后面會持續更新干貨,速速收藏,謝謝!你們的一個小小舉動就是對小編的認可,更是創作的動力。
全文大綱
- WeUI - 由微信官方設計團隊為微信 Web 開發量身設計
- Vant WeApp - 是有贊移動端組件庫 Vant 的小程序版本
- iView Weapp - 是由 TalkingData 發布的組件庫
- ColorUI - 鮮亮的高飽和色彩,專注視覺的小程序組件庫
- Wux Weapp - 是一套組件化、可復用、易擴展的微信小程序 UI 組件庫
- TaroUI - 是由 京東·凹凸實驗室 傾力打造的多端開發解決方案
- Lin UI - 是由林間有風團隊精心打造的一套微信小程序組件庫
- MinUI - 是基于微信小程序自定義組件特性開發而成的一套簡潔、易用、高效的組件庫
- uViewUI - 是uni-app生態優秀的UI框架,全面的組件和便捷的工具會讓你信手拈來,如魚得水
- Touch WX - 是一套完全免費的微信小程序開發框架
在線體驗:https://weui.io/
Github:https://github.com/Tencent/weui-wxss
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信內網頁和微信小程序量身設計,令用戶的使用感知更加統一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。
隨著小程序的普及,微信也有很多內部小程序在開發,每個小程序都需要從零到1進行開發設計,而這個過程中,有大量的 UI 交互是重復的,另外,微信內部已經有一套H5版本的 WeUI 樣式庫。綜合考慮,我們基于 WeUI 樣式庫開發了小程序版本的 UI 組件庫,在內部多個小程序項目已經使用 OK 的情況下,我們把這套組件庫開源讓外部開發者也可以使用
如下圖:
Vant Weapp
官網地址:https://youzan.github.io/vant-weapp/#/theme
Github: https://github.com/youzan/vant-weapp
Vant 是一個輕量、可靠的移動端組件庫,于 2017 年開源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社區團隊維護 React 版本和支付寶小程序版本。
小程序基于 Shadow DOM 來實現自定義組件,所以 Vant Weapp 使用與之配套的 css 變量 來實現定制主題。鏈接中的內容可以幫助你對這兩個概念有基本的認識,避免許多不必要的困擾。
CSS 變量 的兼容性要求。對于不支持 CSS 變量 的設備,定制主題將不會生效,不過不必擔心,默認樣式仍會生效。
如下圖:
iView Weapp
官網地址:https://weapp.iviewui.com/
Github: https://github.com/TalkingData/iview-weapp
iView Weapp 是一套高質量的微信小程序 UI 組件庫。
在開始使用 iView Weapp 之前,你需要先閱讀 微信小程序自定義組件 的相關文檔。
如下圖:
ColorUI
官網地址:http://docs.xzeu.com/
Github: https://github.com/weilanwl/ColorUI
ColorUI是一個css庫!!!在你引入樣式后可以根據class來調用組件,一些含有交互的操作我也有簡單寫,可以為你開發提供一些思路。
鮮亮的高飽和色彩,專注視覺的小程序組件庫
如下圖:
wux-weapp
官網地址:https://wuxui.com/
Github: https://github.com/wux-weapp/wux-weapp
wux-weapp 是一套組件化、可復用、易擴展的微信小程序 UI 組件庫
- UI 樣式可配置,拓展靈活,輕松適應不同的設計風格
- 60+ 豐富的組件,能夠滿足移動端開發的基本需求
如下圖:
TaroUI
官網地址:https://taro-ui.jd.com/
Github: https://github.com/NervJS/taro-ui
Taro 是由 京東·凹凸實驗室 傾力打造的多端開發解決方案。現如今市面上端的形態多種多樣,Web、ReactNative、微信小程序等各種端大行其道,當業務要求同時在不同的端都要求有所表現的時候,針對不同的端去編寫多套代碼的成本顯然非常高,這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信小程序、H5、RN等)運行的代碼。
特性
多端適配:一套組件可以在微信小程序 / H5 / 百度小程序 等多端適配運行
組件豐富:提供豐富的基礎組件,覆蓋大部分使用場景,滿足各種功能需求
按需引用:可按需使用獨立的組件,不必引入所有文件,可最小化的注入到項目中
多套主題:提供默認的藍色主題、紅色主題以及自定義主題,后期會新增漸變色主題
如下圖:
Lin UI
官網地址:https://doc.mini.talelin.com/
Github: https://github.com/TaleLin/lin-ui
Lin UI是由林間有風團隊精心打造的一套微信小程序組件庫,組件豐富、設計優美,并且擁有完整的商業案例,是您開發微信小程序的不二選擇。
在如今這個移動互聯網時代,技術創新將帶來商業模式的完全顛覆,伴隨著小程序的誕生,移動互聯網行業也迎來了新一波的浪潮。
無數大小公司紛紛開始開發自己的小程序產品,前端的技術棧要求里也新增了 微信小程序 這項技能。
另一方面,軟件開發的過程中,部分功能或視圖的實現是一個重復性的工作,微信小程序從誕生到現在,不過兩年時間(2017/1/09 ~ 2019/2/12),生態圈對比 Vue, React 來說實在過于單調, 而且很少有在設計和實用性上都很突出的產品,能夠在實際開發中幫助到開發者的產品更是屈指可數。
所以,我們在深思熟慮后,決定要動手設計并開發一個與小程序相匹配的組件庫。與其他組件庫不同的是,我們除了提供基本的組件外,還會提供 wxs模塊 、高級組件 、 電商組件模塊 等等。 例如,在電商項目里常用的 SKU聯動選擇 ,城市選擇器 等。不過,為了盡快發布與開發者們見面,我們先完成了基本的組件部分,剩余的高級內容將在當前版本穩定后,提上日程。
特性
簡單易用
組件采用微信小程序的原生語法編寫,只需要熟悉初級的 html 、 CSS 、 JAVAScript 和 微信小程序 相關知識就能上手開發,同時既可以一次性加載所有的代碼,也可以選擇只加載使用到的某些組件的代碼。
規范統一
遵循統一的 設計規范 ,接口標準 和 事件冒泡機制 ,減少開發者查閱文檔的時間成本,提升開發效率。
文檔豐富
為了能讓更多開發者接觸之初,就能夠熟練的用Lin-UI開發自己的小程序應用,我們對每個組件的 屬性 、 事件 、用法 、和 案例 上都做了詳盡的描述。
擴展性強
支持 按需引入 和 自定義的主題色 ,生成多種風格,滿足個性化產品需求;同時還具有很強的 擴展性 ,輕松實現組件的二次開發。
支持第三方庫框架
支持第三方框架,taro,mpvue。
如下圖:
MinUI
官網地址:https://meili.github.io/
Github:https://github.com/meili/min-cli
MinUI 基于規范的小程序 UI 組件庫,輕量、易用、工具化。
Min 是一套面向小程序的開發環境,由蘑菇街前端開發團隊提供和維護。目前,我們開源了它面向小程序自定義組件的部分(后續還會陸續開源其他能力),結合微信開發者工具,對組件的 開發 和 使用,Min 會讓你感到優雅和高效。而 MinUI,就是基于 Min 平臺產出的一套 UI 組件庫,同時也是 “蘑菇街女裝精選” 小程序 (小程序總榜前 3 位) 在應用的 UI 組件庫。
授人以漁,基于 Min 提供的開發賦能,和 MinUI 組件庫實踐的參考,不同小程序的開發者,可以快速建立起符合其自身需求的組件化體系。
如下圖:
uView UI
官網地址:https://v1.uviewui.com/
Github:https://github.com/umicro/uView
uView UI,是uni-app生態優秀的UI框架,全面的組件和便捷的工具會讓你信手拈來,如魚得水。
uni-app在2018年初發布以來,一直蓬勃發展,一派欣欣向榮,社區也是人聲鼎沸,眾望所歸。
因此,uView應運而生,uView的目標是成為uni-app生態最優秀的UI框架。
關于uView的取名來由,首字母u來自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸為UI、視圖之意)同音,同時view組件uni-app中 最基礎,最重要的組件,故取名uView,表達源于uni-app和Vue之意,同時在此也對它們表示感謝。
適用領域
uView是uni-app生態專用的UI框架,uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼, 可發布到IOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺(引言自uni-app網)。
四大利器,為您保駕護航
- 指南:涵蓋uniapp各個方面,給開發者方向指導和設計理念,讓您茅塞頓開,一馬平川
- 組件:眾多組件覆蓋開發過程的各個需求,組件功能豐富,多端兼容。讓您快速集成,開箱即用
- 工具庫:眾多的貼心小工具,是您開發過程中召之即來的利器,讓您飛鏢在手,百步穿楊
- 布局:收集眾多的常用頁面和布局,減少開發者的重復工作,讓您專注邏輯,事半功倍
如下圖:
Touch WX
Github:https://github.com/umicro/uView
Touch WX 是一套完全免費的微信小程序開發框架,包含豐富的UI控件用于官方組件的補充。
1、組件擴充:
增加了30多種常用的組件用于官方組件的補充。
2、功能擴充:
兼容阿里的iconfont圖標庫,海量矢量圖標隨意使用;補充了常用樣式庫、支持less語法、支持全局配置主題色等
3、開發體驗改善:
四文件方式改為單文件方式,通過VSCode編輯器+插件的方式開發,擁有web開發體驗;
4、小程序轉為H5應用:
可以與H5開發框架Touch UI工程相互轉換,發布成webApp。開發一套代碼,擁有兩套應用。
這套框架的原理是:
將Touch WX工程中所寫的代碼進行編譯,直接輸出為微信小程序工程原始代碼。擴充的30多種組件,完全是基于小程序官方的自定義組件機制實現(row&col除外)。
所以它支持小程序的全部語法,怎么開發小程序,就怎么開發Touch WX。
不過因為是單文件的開發方式,在文件的代碼結構上稍有不同。請注意這一點。
這樣好處在于:
1、開發者遷移成本很小。
可以輕松的將已有的小程序移植為Touch WX工程,來使用它的擴展能力;
2、便于排查錯誤。
當遇到問題時,開發者也可以隨時查看輸出的小程序原始代碼來定位問題所在。不會搞不清楚到底是框架問題還是自己代碼的問題;
3、按需編譯
由于小程序對體積有限制,在使用框架開發時,只有使用到的組件才會編譯輸出為小程序源碼。沒用到的不會輸出。
4、不會對框架產生依賴。
以后不想用了這套框架,可以直接對已經輸出的小程序工程進行維護。
如下圖: