有关常用的UI组件

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

1：WeUI 小程序–使用教程

官方介绍：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 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

5：Tina.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/

这个还包含了vue和map的很强大

介绍：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库也可以上墙！