微信小程序UI框架有哪些?

微信小法式UI框架有哪些?

WeUI 组件库

WeUI 组件库，是一套基于款式库 weui-wxss 开辟的小法式扩大组件库，同微信原生视觉体验分歧的 UI 组件库，由微信官方设想团队和小法式团队为微信小法式量身设想，令用户的利用感知加倍同一。
WeUI 组件库供给了在多个小法式中城市频频用到的 UI 组件，包括根本、表单、操纵反应、导航、搜索等组件，在停止小法式开辟时可以间接引入和挪用，削减不需要的反复劳动。


在具体的设想履行层面，微信团队也供给了一套可供 Web 设想和小法式利用的根本控件库，不外这个组件库文件为 sketch 格式，假如你利用的是 Windows 或 Linux 装备，在不安装黑苹果的情况下，是没法翻开这个文件的。
对于这个题目，最间接的方式是换到 Mac 电脑，不外这会掏空我们的钱包（；д｀）ゞ 退而求其次，我们可以从在线UI设想工具Pixso 旗下的「资本社区」获得到这份文件，Pixso 支持在线检察或编辑 WeUI 组件库，是以即使我们用的是 Windows 或 Linux 系统的装备，只要电脑可以连网，就能随时随地检察这份文件。


翻开 Pixso资本社区的页面 pixso.cn/community ，点击顶部导航栏的搜索图标，输入 weui，在返回的成果中，就能看到深、浅两色的 WeUI 组件库。
>> 点击这里，免费获得 微信小法式WeUI 组件库（浅色）| 免费UI设想素材 - Pixso设想素材


WeUI组件库，来自Pixso资本社区

点击肆意一份文件，进入 WeUI 组件库的详情页，点击右上角的「复制」按钮，将当前的 WeUI 组件库复制到账号下的草稿中，在草稿中翻开组件库，就能检察或编辑组件库。


翻开保存在 Pixso 草稿的 WeUI 组件库，左侧的「页面」列出了组件库中包括的 3 个页面——WeUI根本款式库、组件分类和控件，点击进入分歧的页面，可以检察页面临应的内容。


将左侧的「图层」切换到「组件」选项卡，就能检察组成 WeUI 组件库的一切组件，此时假如将鼠标移动到组件右上角的图标，会弹出对应组件的预览窗口。


若组件库中包括了你在设想小法式页面时需要用到的组件，可以从左侧的组件面板中拖拽增加到中心的编辑窗口，在 WeUI 组件库供给的组件根本上停止编辑，进步设想项目标产出效力。


Vant Weapp

Vant，是有赞团队推出的一个轻量、牢靠的开源移动端组件库，支持在前端框架 Vue2、Vue3，以及微信小法式中利用。
对应到微信小法式的场景，Vant UI 组件库的别名为 Vant Weapp。
和前面的 WeUI 组件库一样，Vant UI 组件库也供给了组件设想稿、图标设想稿源文件供用户下载，不外这两份文件一样为 sketch 格式，利用非 Mac 电脑的用户就没法间接检察组件库中的内容。


不外比力光荣的是，Pixso资本社区一样供给了 Vant UI 组件库的设想源文件，翻开资本社区，以 Vant UI 作为关键词停止搜索，就能找到这一份文件。
>> 点击这里，免费获得 有赞Vant UI组件库


Vant UI组件库，来自Pixso资本社区

Pixso资本社区 简介

Pixso资本社区，是在线设想软件Pixso 旗下开源免费的设想社区，这里供给了在 UI 设想中常用的各类设想资本，包括但不限于：国内外大厂的设想系统、UI 组件库、UI 设想作品、界面合集、图标素材、插画素材、移动设想、网页设想案例等。
当你想在网上寻觅和 UI 设想相关的资本时，优先来 Pixso资本社区搜索就对了，这里的设想资本不但数目多、质量高，更重要的是完全免费，可间接用于小我或贸易项目。
免费设想素材和设想模板，尽在Pixso资本社区

Pixso 小我用户完全免费

Pixso 今朝对一切小我用户免费开放，内置的一切功用都可免得费利用！
现在前往 Pixso 官网注册账号，可以享遭到 Pixso 会员的一切权益：无穷文件数目、无合作者人数限制、无穷云存储空间、3000+ 免费设想资本任你用等，满足小我和小型团队在线合作需求，免费享丰富设想资本和高效合作体验！
Pixso - 新一代UI设想工具，在线版Sketch，国产Figma，支持在线实时合作

码字不易，假如对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！
我是皮仔 @Pixso协同设想，那我们下次再会咯。

保举9款优异的小法式UI框架，倡议收藏！
1.TouchUI WX

https://github.com/uileader/touchuiwx
TouchUI-WX是一套完全免费的微信小法式开辟框架，包括丰富的UI控件用于官方组件的补充，并扩大了小法式很多其他才能。


特点：
1.组建扩大
增加了30多种常用的组件用于官方组件的补充。
2、功用扩大
兼容阿里的iconfont图标库，海量矢量图标随意利用；补充了常用款式库、支持less语法、支持全局设置主题色等
3、开辟体验改良
四文件方式改成单文件方式，经过VSCode编辑器+插件的方式开辟，具有web开辟体验；
4、小法式转为H5利用
可以与H5开辟框架TouchUI工程相互转换，公布成webApp。开辟一套代码，具有两套利用。
2.lin-ui

https://github.com/TaleLin/lin-ui
简洁，易用，灵活的微信小法式组件库。

• 采用原生小法式说话编写, 利用npm安装
  
• 满足场景各利用处景, 更有电商专题组件供给支持
  
• 可在mpvue, Taro, WePY品级三方框架中利用LinUI
  
• LinUI不是常规意义上的组件库, 我们还具有过滤器, 行为等高级功用, 满足开辟者本性化需求
  
• 无需变动款式即可搭建精彩小法式
  
• 林间有风官方供给专业详实的文档帮助你快速上手LinUI
  

3.WeUI

https://github.com/Tencent/weui-wxss
WeUI WXSS是腾讯官方UI组件库WeUI的小法式版，供给了跟微信界面气概分歧的用户体验。
可在https://weui.io/ 间接看到UI结果


  WeUI 利用简单，气概微信原生气概，以绿色为主色 ，主如果两个大版本 ，1.x版本和2.x版本 ，相比1.x版原本说，2.x版本视觉上更好。
气概与微信视觉体验分歧，在开辟中我们需要更丰富标致的UI结果 ，需要点窜WeUI的款式或自界说css 。
4.iview weapp

https://github.com/TalkingData/iview-weapp
iView是TalkingData公布的一款高质量的基于Vue.js组件库，而iView weapp则是它们的小法式版本。
官网地址：iView Weapp - 一套高质量的微信小法式 UI 组件库


优点：供给了丰富的UI组件，特别是 tabBar、Tabs、抽屉、index索引 ，利用比力方便。
弱点：页面气概比力牢固、点窜起来比力困难。输入框在模拟器下经常没法输入，给利用调试带来了麻烦。
5.ColorUI

https://github.com/weilanwl/ColorUI
鲜明的高饱和色彩，专注视觉的小法式组件库。
ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小法式组件库，ColorUI更重视于视觉交互！
其组件在美妙性方面比力突出。
开辟文档参考（编辑中）：https://www.color-ui.com


优点：视觉结果标致，留意看一下，他可以将款式沉醉得手机最顶部，这一点很好，同时其他组件也挺好，可针对自己的需求，间接点窜或覆盖他的css款式。
弱点：缺少文档、很多新人无从动手。扫码预览时，近期广告有些频仍，影响利用，开辟者也想有点用度，大师了解，喜好的可以对开辟者点广告支持，开源不易。
6.Vant Weapp

https://github.com/youzan/vant-weapp
Vant Weapp 是有赞移动端组件库 Vant 的小法式版本，两者基于不异的视觉标准，供给分歧的 API 接口，助力开辟者快速搭建小法式利用。
开辟文档参考：https://youzan.github.io/vant-weapp/#/intro


优点：视觉结果简单清朗、供给了平常开辟利用的组件、文档很具体。
弱点：门坎相比其他几个UI框架高，需要会 vue 的开辟者，同时不支持原生开辟。像我这样对 vue 不是很熟悉的，不倡议利用，比力熟悉 vue 的保举利用。
7.TaroUI

NervJS/taro-ui
TaroUI 是由京东·凹凸尝试室公布的多端 UI 组件库。这套组件库，可以在 H5、微信小法式、付出宝小法式、百度小法式多端适配运转。TaroUI 的整体气概繁复、清新、同一，合适工具、念书、资讯、教育、商务等范例的小法式。
开辟文档：https://taro-ui.aotu.io/#/docs/introduction


除了具有上文所说起的组件之外，TaroUI 还有几个特此外组件。在「表单」中有一项「范围挑选器」，可以经过滑动条指定数值范围。在「高阶组件」中，可以显现「日历」，而且支持多种日期挑选款式。


8优点：Taro UI 可谓雕虫小技，功用丰富，开辟一套代码可以可以在微信小法式 / H5 / 百度小法式 等多端适配运转。
弱点：入门门坎高，不合适新人开辟者。相对而言，利用的人数不够多，开辟中出现题目排查困难。只用在微信小法式开辟上，牛鼎烹鸡了，杀鸡焉用宰牛刀！
8.WuxUI

这套组件库所包括的组件最为丰富。不但我们前文提到的各类组件都可以在 Wux 中找到，而且还有进度环、骨架屏、挑选栏、数字键盘、成果页等适用工具类组件。假如你想开辟一款工具类小法式，Wux 是个不错的挑选。
开辟文档：https://wux-weapp.github.io/wux-weapp-docs/#/introduce


9.MinUI

meili/min-cli
MinUI 是由蘑菇街公布的组件库。与其他组件库分歧的是，MinUI 更重视一些细节的处置。
开辟文档：https://meili.github.io/min/docs/minui/index.html#README


挪用「根本元件」中的「文本截断」，可以控制长文本的显现行数，文本超长的用省略号结尾。「页底提醒」可以用在上拉加载中的进程中。而「价格」则供给了各类款式的价格及货币标记。


相比其他组件库，MinUI 将各类组件拆分得更细，真正利用时，需要开辟者更多的对各个组件停止再次连系，但也是以 MinUI 显得加倍通用。
其他保举：
.net core高频口试题有哪些？
玩转Github：激烈保举这份.NET法式员口试手册，4万字干货！
有哪些不错的windows form开源项目保举？
Visual Studio 有哪些好用的插件？
Visual Studio有哪些不为人知却出格好用的适用工具/技能/功用/特征？

我一般用的都是colorUI，你可以看看。demo：

想要开辟出一套高质量的小法式，应用框架，组件库是省时省力费心必不成少一部分，随着小法式日渐火爆，各类分歧范例的小法式也渐渐更新，其中不乏一些优异好用的框架/组件库。
1：WeUI  小法式–利用教程

https://weui.io/

官方先容：WeUI 是一套同微信原生视觉体验分歧的根本款式库，由微信官方设想团队为微信内网页和微信小法式量身设想，令用户的利用感知加倍同一。小法式开辟中最常用到的一款框架，受广大开辟职员的接待。






图片.png

2：美团小法式框架mpvue

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

官方先容：mpvue是一个利用 Vue.js开辟小法式的前端框架。框架基于 Vue.js焦点，mpvue点窜了 Vue.js的 runtime和 compiler实现，使其可以运转在小法式情况中，从而为小法式开辟引入了整套Vue.js开辟体验。






图片.png

3：组件化开辟框架wepy

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

官方先容：组件化开辟，完善处理组件隔离，组件嵌套，组件通讯等题目,支持利用第三方 npm 资本，自动处置 npm 资笔飘间的依靠关系，完善兼容一切无平台依靠的 npm 资本包.






图片.png

4：官方框架MINA

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

官方先容：框架供给了自己的视图层描写说话 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间供给了数据传输和事务系统，可以让开辟者可以方便的聚焦于数据与逻辑上。






图片.png

5：Tina.js 一款轻盈的渐进式微信小法式框架

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

官方先容：是一款轻盈的渐进式微信小法式框架，保存 MINA (微信小法式官方框架) 的大部分 API 设想；不管你有无小法式开辟经历，都可以轻松过渡上手。







图片.png

6：前端框架weweb

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

官方先容：weweb是一个兼容小法式语法的前端框架，你可以用小法式的写法，来写web利用。假如你已经有小法式了，经过它你可以将你的小法式运转在阅读器中。
7：微信UI组件库 iView Weapp

https://weapp.iviewui.com/

先容：iView Weapp 供给了与 iView 分歧的 UI 和尽能够不异的接口称号，大幅度下降了进修本钱，是一套一套高质量的微信小法式 UI 组件库。







图片.png

8：ZanUI-WeApp -- 一个颜值高、好用、易扩大的微信小法式 UI 库

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

官方先容：ZanUI-WeApp连系了微信的视觉标准，为用户供给加倍同一的利用感受。 包括 badge、btn、等总计 17 类组件或元素。
保举阅读
【干货】2020年最新编程视频教程，速度收藏！！

阿拉丁整理一下比力常见的一些 微信小法式 UI 框架：
1、WeUI WXSS
这个是微信官方的，界面和交互设想和微信差不多。


项目地址：
https://github.com/Tencent/weui-wxss2、ColorUI
这个是 CSS 框架，非 JS 框架，主如果页面设想、交互体验。ColorUI是一个css库，在你引入款式后可以按照class来挪用组件，一些含有交互的操纵也有简单写，可以为你开辟供给一些思绪。
项目地址：
https://github.com/weilanwl/ColorUI3、MinUI
MinUI 是基于微信小法式自界说组件特征开辟而成的一套简洁、易用、高效的组件库，适用处景广，覆盖小法式原生框架，各类小法式组件支流框架等，而且供给了专门的号令行工具.


项目地址：
https://github.com/meili/minui4、Wux Weapp
Wux Weapp是一套组件化、可复用、易扩大的微信小法式 UI 组件库。UI 款式可设置，拓展灵活，轻松顺应分歧的设想气概；80+ 丰富的组件，可以满足移动端开辟的根基需求。


项目地址：
https://github.com/wux-weapp/wux-weapp/
以上是阿拉丁小法式收集到的一些微信小法式 UI 框架，接待关注 @阿拉丁小法式 ，获得更多微信小法式的开辟常识。