亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告:魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請(qǐng)做好本站友鏈:【 網(wǎng)站目錄:http://www.430618.com 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會(huì)員:747

大家好,我是Echa。

由于昨天小編發(fā)布一篇關(guān)于適合接私活的小程序開源項(xiàng)目相關(guān)優(yōu)質(zhì)的干貨文章:推薦16個(gè)適合接私活的小程序開源項(xiàng)目,有興趣的粉絲們看看這篇。結(jié)果陸陸續(xù)續(xù)小編收到粉絲們的私信反饋有沒有針對(duì)小程序開發(fā)相關(guān)開源漂亮火熱的UI庫呢?這樣的話,接私活搞副業(yè)更加得心應(yīng)手了。為了粉絲們多接私活,多掙錢,提高生活品質(zhì)。小編不能耽誤大家發(fā)財(cái),趕緊大腦高速運(yùn)轉(zhuǎn)安排上。另外,有接私活搞副業(yè)能力的粉絲們,可以私信小編回復(fù):接私活。獲取適合接私活合集系列的優(yōu)秀開源項(xiàng)目,助你接私活得心應(yīng)手。

今天小編給大家分享10個(gè)Github上非常火的小程序開源UI庫,個(gè)個(gè)都靚,希望大家喜歡。

創(chuàng)作不易,喜歡的老鐵們加個(gè)關(guān)注,點(diǎn)個(gè)贊,打個(gè)賞,后面會(huì)持續(xù)更新干貨,速速收藏,謝謝!你們的一個(gè)小小舉動(dòng)就是對(duì)小編的認(rèn)可,更是創(chuàng)作的動(dòng)力。

全文大綱

  1. WeUI - 由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)
  2. Vant WeApp - 是有贊移動(dòng)端組件庫 Vant 的小程序版本
  3. iView Weapp - 是由 TalkingData 發(fā)布的組件庫
  4. ColorUI - 鮮亮的高飽和色彩,專注視覺的小程序組件庫
  5. Wux Weapp - 是一套組件化、可復(fù)用、易擴(kuò)展的微信小程序 UI 組件庫
  6. TaroUI - 是由 京東·凹凸實(shí)驗(yàn)室 傾力打造的多端開發(fā)解決方案
  7. Lin UI - 是由林間有風(fēng)團(tuán)隊(duì)精心打造的一套微信小程序組件庫
  8. MinUI - 是基于微信小程序自定義組件特性開發(fā)而成的一套簡(jiǎn)潔、易用、高效的組件庫
  9. uViewUI - 是uni-app生態(tài)優(yōu)秀的UI框架,全面的組件和便捷的工具會(huì)讓你信手拈來,如魚得水
  10. Touch WX - 是一套完全免費(fèi)的微信小程序開發(fā)框架
WeUI

 

在線體驗(yàn):https://weui.io/

Github:https://github.com/Tencent/weui-wxss

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫,由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì),令用戶的使用感知更加統(tǒng)一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。

隨著小程序的普及,微信也有很多內(nèi)部小程序在開發(fā),每個(gè)小程序都需要從零到1進(jìn)行開發(fā)設(shè)計(jì),而這個(gè)過程中,有大量的 UI 交互是重復(fù)的,另外,微信內(nèi)部已經(jīng)有一套H5版本的 WeUI 樣式庫。綜合考慮,我們基于 WeUI 樣式庫開發(fā)了小程序版本的 UI 組件庫,在內(nèi)部多個(gè)小程序項(xiàng)目已經(jīng)使用 OK 的情況下,我們把這套組件庫開源讓外部開發(fā)者也可以使用

如下圖:


 


Vant Weapp

官網(wǎng)地址:https://youzan.github.io/vant-weapp/#/theme

Github: https://github.com/youzan/vant-weapp

Vant 是一個(gè)輕量、可靠的移動(dòng)端組件庫,于 2017 年開源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本和支付寶小程序版本。

小程序基于 Shadow DOM 來實(shí)現(xiàn)自定義組件,所以 Vant Weapp 使用與之配套的 css 變量 來實(shí)現(xiàn)定制主題。鏈接中的內(nèi)容可以幫助你對(duì)這兩個(gè)概念有基本的認(rèn)識(shí),避免許多不必要的困擾。

CSS 變量 的兼容性要求。對(duì)于不支持 CSS 變量 的設(shè)備,定制主題將不會(huì)生效,不過不必?fù)?dān)心,默認(rèn)樣式仍會(huì)生效。

如下圖:


 


 

iView Weapp

官網(wǎng)地址:https://weapp.iviewui.com/

Github: https://github.com/TalkingData/iview-weapp

iView Weapp 是一套高質(zhì)量的微信小程序 UI 組件庫。

在開始使用 iView Weapp 之前,你需要先閱讀 微信小程序自定義組件 的相關(guān)文檔。

如下圖:


 


 

ColorUI

官網(wǎng)地址:http://docs.xzeu.com/

Github: https://github.com/weilanwl/ColorUI

ColorUI是一個(gè)css庫!!!在你引入樣式后可以根據(jù)class來調(diào)用組件,一些含有交互的操作我也有簡(jiǎn)單寫,可以為你開發(fā)提供一些思路。

鮮亮的高飽和色彩,專注視覺的小程序組件庫

如下圖:


 


 


 

wux-weapp

官網(wǎng)地址:https://wuxui.com/

Github: https://github.com/wux-weapp/wux-weapp

wux-weapp 是一套組件化、可復(fù)用、易擴(kuò)展的微信小程序 UI 組件庫

 

  1. UI 樣式可配置,拓展靈活,輕松適應(yīng)不同的設(shè)計(jì)風(fēng)格
  2. 60+ 豐富的組件,能夠滿足移動(dòng)端開發(fā)的基本需求

 

如下圖:


 


 

TaroUI

官網(wǎng)地址:https://taro-ui.jd.com/

Github: https://github.com/NervJS/taro-ui

Taro 是由 京東·凹凸實(shí)驗(yàn)室 傾力打造的多端開發(fā)解決方案。現(xiàn)如今市面上端的形態(tài)多種多樣,Web、ReactNative、微信小程序等各種端大行其道,當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候,針對(duì)不同的端去編寫多套代碼的成本顯然非常高,這時(shí)候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信小程序、H5、RN等)運(yùn)行的代碼。

特性

多端適配:一套組件可以在微信小程序 / H5 / 百度小程序 等多端適配運(yùn)行

組件豐富:提供豐富的基礎(chǔ)組件,覆蓋大部分使用場(chǎng)景,滿足各種功能需求

按需引用:可按需使用獨(dú)立的組件,不必引入所有文件,可最小化的注入到項(xiàng)目中

多套主題:提供默認(rèn)的藍(lán)色主題、紅色主題以及自定義主題,后期會(huì)新增漸變色主題

如下圖:


 


 


 


 


 

Lin UI

官網(wǎng)地址:https://doc.mini.talelin.com/

Github: https://github.com/TaleLin/lin-ui

Lin UI是由林間有風(fēng)團(tuán)隊(duì)精心打造的一套微信小程序組件庫,組件豐富、設(shè)計(jì)優(yōu)美,并且擁有完整的商業(yè)案例,是您開發(fā)微信小程序的不二選擇。

在如今這個(gè)移動(dòng)互聯(lián)網(wǎng)時(shí)代,技術(shù)創(chuàng)新將帶來商業(yè)模式的完全顛覆,伴隨著小程序的誕生,移動(dòng)互聯(lián)網(wǎng)行業(yè)也迎來了新一波的浪潮。
無數(shù)大小公司紛紛開始開發(fā)自己的小程序產(chǎn)品,前端的技術(shù)棧要求里也新增了 微信小程序 這項(xiàng)技能。

另一方面,軟件開發(fā)的過程中,部分功能或視圖的實(shí)現(xiàn)是一個(gè)重復(fù)性的工作,微信小程序從誕生到現(xiàn)在,不過兩年時(shí)間(2017/1/09 ~ 2019/2/12),生態(tài)圈對(duì)比 Vue, React 來說實(shí)在過于單調(diào), 而且很少有在設(shè)計(jì)和實(shí)用性上都很突出的產(chǎn)品,能夠在實(shí)際開發(fā)中幫助到開發(fā)者的產(chǎn)品更是屈指可數(shù)。

所以,我們?cè)谏钏际鞈]后,決定要?jiǎng)邮衷O(shè)計(jì)并開發(fā)一個(gè)與小程序相匹配的組件庫。與其他組件庫不同的是,我們除了提供基本的組件外,還會(huì)提供 wxs模塊 、高級(jí)組件 、 電商組件模塊 等等。 例如,在電商項(xiàng)目里常用的 SKU聯(lián)動(dòng)選擇 ,城市選擇器 等。不過,為了盡快發(fā)布與開發(fā)者們見面,我們先完成了基本的組件部分,剩余的高級(jí)內(nèi)容將在當(dāng)前版本穩(wěn)定后,提上日程。

特性

簡(jiǎn)單易用

組件采用微信小程序的原生語法編寫,只需要熟悉初級(jí)的 html 、 CSS 、 JAVAScript 和 微信小程序 相關(guān)知識(shí)就能上手開發(fā),同時(shí)既可以一次性加載所有的代碼,也可以選擇只加載使用到的某些組件的代碼。

規(guī)范統(tǒng)一

遵循統(tǒng)一的 設(shè)計(jì)規(guī)范 ,接口標(biāo)準(zhǔn) 和 事件冒泡機(jī)制 ,減少開發(fā)者查閱文檔的時(shí)間成本,提升開發(fā)效率。

文檔豐富

為了能讓更多開發(fā)者接觸之初,就能夠熟練的用Lin-UI開發(fā)自己的小程序應(yīng)用,我們對(duì)每個(gè)組件的 屬性 、 事件 、用法 、和 案例 上都做了詳盡的描述。

擴(kuò)展性強(qiáng)

支持 按需引入 和 自定義的主題色 ,生成多種風(fēng)格,滿足個(gè)性化產(chǎn)品需求;同時(shí)還具有很強(qiáng)的 擴(kuò)展性 ,輕松實(shí)現(xiàn)組件的二次開發(fā)。

支持第三方庫框架

支持第三方框架,taro,mpvue。

如下圖:


 


 


 


 

MinUI

官網(wǎng)地址:https://meili.github.io/

Github:https://github.com/meili/min-cli

MinUI 基于規(guī)范的小程序 UI 組件庫,輕量、易用、工具化。

Min 是一套面向小程序的開發(fā)環(huán)境,由蘑菇街前端開發(fā)團(tuán)隊(duì)提供和維護(hù)。目前,我們開源了它面向小程序自定義組件的部分(后續(xù)還會(huì)陸續(xù)開源其他能力),結(jié)合微信開發(fā)者工具,對(duì)組件的 開發(fā) 和 使用,Min 會(huì)讓你感到優(yōu)雅和高效。而 MinUI,就是基于 Min 平臺(tái)產(chǎn)出的一套 UI 組件庫,同時(shí)也是 “蘑菇街女裝精選” 小程序 (小程序總榜前 3 位) 在應(yīng)用的 UI 組件庫。

授人以漁,基于 Min 提供的開發(fā)賦能,和 MinUI 組件庫實(shí)踐的參考,不同小程序的開發(fā)者,可以快速建立起符合其自身需求的組件化體系。

如下圖:


 


 

uView UI

官網(wǎng)地址:https://v1.uviewui.com/

Github:https://github.com/umicro/uView

uView UI,是uni-app生態(tài)優(yōu)秀的UI框架,全面的組件和便捷的工具會(huì)讓你信手拈來,如魚得水。

uni-app在2018年初發(fā)布以來,一直蓬勃發(fā)展,一派欣欣向榮,社區(qū)也是人聲鼎沸,眾望所歸。

因此,uView應(yīng)運(yùn)而生,uView的目標(biāo)是成為uni-app生態(tài)最優(yōu)秀的UI框架。

關(guān)于uView的取名來由,首字母u來自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸為UI、視圖之意)同音,同時(shí)view組件uni-app中 最基礎(chǔ),最重要的組件,故取名uView,表達(dá)源于uni-app和Vue之意,同時(shí)在此也對(duì)它們表示感謝。

適用領(lǐng)域

uView是uni-app生態(tài)專用的UI框架,uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼, 可發(fā)布到IOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個(gè)平臺(tái)(引言自u(píng)ni-app網(wǎng))。

四大利器,為您保駕護(hù)航

 

  • 指南:涵蓋uniapp各個(gè)方面,給開發(fā)者方向指導(dǎo)和設(shè)計(jì)理念,讓您茅塞頓開,一馬平川
  • 組件:眾多組件覆蓋開發(fā)過程的各個(gè)需求,組件功能豐富,多端兼容。讓您快速集成,開箱即用
  • 工具庫:眾多的貼心小工具,是您開發(fā)過程中召之即來的利器,讓您飛鏢在手,百步穿楊
  • 布局:收集眾多的常用頁面和布局,減少開發(fā)者的重復(fù)工作,讓您專注邏輯,事半功倍

 

如下圖:


 


 


 


 

Touch WX

Github:https://github.com/umicro/uView

Touch WX 是一套完全免費(fèi)的微信小程序開發(fā)框架,包含豐富的UI控件用于官方組件的補(bǔ)充。

1、組件擴(kuò)充:

增加了30多種常用的組件用于官方組件的補(bǔ)充。

2、功能擴(kuò)充:

兼容阿里的iconfont圖標(biāo)庫,海量矢量圖標(biāo)隨意使用;補(bǔ)充了常用樣式庫、支持less語法、支持全局配置主題色等

3、開發(fā)體驗(yàn)改善:

四文件方式改為單文件方式,通過VSCode編輯器+插件的方式開發(fā),擁有web開發(fā)體驗(yàn);

4、小程序轉(zhuǎn)為H5應(yīng)用:

可以與H5開發(fā)框架Touch UI工程相互轉(zhuǎn)換,發(fā)布成webApp。開發(fā)一套代碼,擁有兩套應(yīng)用。

這套框架的原理是:

將Touch WX工程中所寫的代碼進(jìn)行編譯,直接輸出為微信小程序工程原始代碼。擴(kuò)充的30多種組件,完全是基于小程序官方的自定義組件機(jī)制實(shí)現(xiàn)(row&col除外)。

所以它支持小程序的全部語法,怎么開發(fā)小程序,就怎么開發(fā)Touch WX。

不過因?yàn)槭菃挝募拈_發(fā)方式,在文件的代碼結(jié)構(gòu)上稍有不同。請(qǐng)注意這一點(diǎn)。

這樣好處在于:

1、開發(fā)者遷移成本很小。

可以輕松的將已有的小程序移植為Touch WX工程,來使用它的擴(kuò)展能力;

2、便于排查錯(cuò)誤。

當(dāng)遇到問題時(shí),開發(fā)者也可以隨時(shí)查看輸出的小程序原始代碼來定位問題所在。不會(huì)搞不清楚到底是框架問題還是自己代碼的問題;

3、按需編譯

由于小程序?qū)w積有限制,在使用框架開發(fā)時(shí),只有使用到的組件才會(huì)編譯輸出為小程序源碼。沒用到的不會(huì)輸出。

4、不會(huì)對(duì)框架產(chǎn)生依賴。

以后不想用了這套框架,可以直接對(duì)已經(jīng)輸出的小程序工程進(jìn)行維護(hù)。

如下圖:

分享到:
標(biāo)簽:UI
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào),推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績(jī)?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績(jī)?cè)u(píng)定