有关常用的UI组件

前段时间想看看大家都用什么UI组件,下面是在网上搜集的,记录在这里方便自己使用和其他小伙伴使用

1:WeUI 小程序–使用教程

https://weui.io/

官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。小程序开发中最常用到的一款框架,受广大开发人员的欢迎。

2:美团小程序框架mpvue

Github:https://github.com/Meituan-Dianping/mpvue
官网: http://mpvue.com/

官方介绍:mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心,mpvue修改了 Vue.js的 runtime和 compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。

3:组件化开发框架wepy

Github地址:
https://github.com/Tencent/wepy
官网地址:
https://tencent.github.io/wepy

官方介绍:组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题,支持使用第三方 npm 资源,自动处理 npm 资源之间的依赖关系,完美兼容所有无平台依赖的 npm 资源包.

4:官方框架MINA

地址:https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

官方介绍:框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

5Tina.js 一款轻巧的渐进式微信小程序框架

Tina.js 开源框架地址: https://github.com/tinajs/tina

官方介绍:是一款轻巧的渐进式微信小程序框架,保留 MINA (微信小程序官方框架) 的大部分 API 设计;无论你有无小程序开发经验,都可以轻松过渡上手。

6:前端框架weweb

地址https://github.com/wdfe/weweb

官方介绍:weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。

7:微信UI组件库 iView Weapp

https://weapp.iviewui.com/

这个还包含了vuemap的很强大

介绍:iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库。

8:ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库

https://cnodejs.org/topic/589d625a5c8036f7019e7a4a

官方介绍:ZanUI-WeApp结合了微信的视觉规范,为用户提供更加统一的使用感受。 包含 badge、btn、等共计 17 类组件或元素。

UI组件
weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库
Wa-UI ★122 - 针对微信小程序整合的一套UI库
wx-charts ★105 - 微信小程序图表工具
wxapp-charts ★20 - 微信小程序图表charts组件
WeiXinProject ★18- 列表的上拉刷新和上拉加载
citySelect ★16 - 微信小程序城市选择器

demo
wechat-weapp-mall ★430- 微信小程序移动端商城
weapp-wechat-zhihu ★297- 微信中的知乎
weChatApp-Run ★173 - 跑步微信小程序Demo
fenda-mock ★125 - 使用微信小程序实现分答这款APP的基础功能
wechat-app-music ★91 - 微信小程序: 音乐播放器
wechat-weapp-mapdemo ★76 - 微信小程序开发demo-地图定位
wxSortPickerView ★8 - 微信小程序首字母排序选择表
netmusic-app ★14 - 仿网易云音乐APP的微信小程序
wxapp-2048 ★16- 微信小程序2048
wxreading ★17 - 微信小程序跟读
weapp-girls ★31 - 通过Node.js实现的妹子照片爬虫微信小程序
wxapp-sCalc ★41 - 微信小程序版简易计算器,适合入门练手
wechat-chat ★44 - 微信小程序版聊天室
https://www.jianshu.com/p/25dd34df3228?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

 

.移动端UI

①.Vant UI

官方地址:https://youzan.github.io/vant/#/zh-CN/intro

github地址:https://github.com/youzan/vant

优点:用来做移动端商城很不错,支持定制主题,社区还算活跃

②.Mint UI

官方地址:http://mint-ui.github.io/#!/zh-cn

github地址:https://github.com/ElemeFE/mint-ui/

优点:饿了么团队制作,组件比较丰富

缺点:已经很久没人维护,也没人接盘了

③.Muse UI

官方地址:https://muse-ui.org/#/zh-CN/usage

github地址:https://github.com/museui/muse-ui

优点:PC+MOBILE一套就够了

④.Nut UI

官方地址:https://nutui.jd.com/#/start

github地址:https://github.com/jdf2e/nutui

优点:京东团队制作,质量有保障

缺点:组件不是很丰富,需要踩坑。

2.PC端前、后台UI

①.Element UI

官方地址:http://element-cn.eleme.io/#/zh-CN/component/installation

github地址:https://github.com/ElemeFE/element

优点:团队给力,社区活跃,组件丰富

②.vue-element-admin

演示地址:https://panjiachen.github.io/vue-element-admin/

github地址:https://github.com/PanJiaChen/vue-element-admin

博客系列教程地址:https://segmentfault.com/a/1190000009275424

优点:前人造轮子,拿来直接用就可以

③.iView UI

官方地址:https://www.iviewui.com/docs/guide/install

github地址:https://github.com/iview/iview

优点:样式好看,坑不算多,有自己的生态,比较稳定,同一作者写的后台iView-admin

3.小程序UI

①.iView Weapp

官方地址:https://weapp.iviewui.com/docs/guide/start

github地址:https://github.com/TalkingData/iview-weapp

 

优点:整体包结构比较小,样式比较美观

缺点:暂不支持npm安装

②.Wux Weapp

官方地址:https://wux-weapp.github.io/wux-weapp-docs/#/quickstart

github地址:https://github.com/wux-weapp/wux-weapp/

 

优缺点同iView Weapp

③.Wuss Weapp

官方地址:https://phonycode.github.io/wuss-weapp/quickstart.html

github地址:https://github.com/phonycode/wuss-weapp

优点:支持npm安装,组件较丰富

④.Color UI

官方地址:https://www.color-ui.com/

github地址:https://github.com/weilanwl/ColorUI

优点:样式超级超级超级好看啊,不信他不火

缺点:文档还在编写中,组件目前不是很丰富

⑤.Vant Weapp

官方地址:https://youzan.github.io/vant-weapp/#/intro

github地址:https://github.com/youzan/vant-weapp

 

优点:支持npm安装,组件丰富,合适做商城类小程序

⑥.MinUI

官方地址:https://meili.github.io/min/docs/minui/index.html

github地址:https://github.com/meili/min-cli

优点:蘑菇街团队开发维护,样式中规中矩

缺点:组件现在也不算太多

 

非结语:UI组件库的使用,不仅要看样式展现,更要看库的维护和生态,前人的轮子有时候也不一定适合项目,去尝试造轮子会发现一个不同的世界。

结语:不定时更新,不足之处或者有其他优秀的UI库可以留言私信我,自己喜欢的UI库也可以上墙!

 

 

原文地址:https://www.cnblogs.com/whdaichengxu/p/11314211.html