云裂变营销网

标题: 微信小程序UI框架有哪些? [打印本页]
作者: 匿名    时间: 2023-3-30 11:13
标题: 微信小程序UI框架有哪些?
微信小程序UI框架有哪些?
作者: vayket    时间: 2023-3-30 11:14
WeUI 组件库

WeUI 组件库，是一套基于样式库 weui-wxss 开发的小程序扩展组件库，同微信原生视觉体验一致的 UI 组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
WeUI 组件库提供了在多个小程序中都会反复用到的 UI 组件，包含基础、表单、操作反馈、导航、搜索等组件，在进行小程序开发时可以直接引入和调用，减少不必要的重复劳动。

(, 下载次数: 163)
在具体的设计执行层面，微信团队也提供了一套可供 Web 设计和小程序使用的基础控件库，不过这个组件库文件为 sketch 格式，如果你使用的是 Windows 或 Linux 设备，在不安装黑苹果的情况下，是无法打开这个文件的。
对于这个问题，最直接的方法是换到 Mac 电脑，不过这会掏空我们的钱包（；д｀）ゞ 退而求其次，我们可以从在线UI设计工具Pixso 旗下的「资源社区」获取到这份文件，Pixso 支持在线查看或编辑 WeUI 组件库，因此即便我们用的是 Windows 或 Linux 系统的设备，只要电脑可以连网，就能随时随地查看这份文件。

(, 下载次数: 169)
打开 Pixso资源社区的页面 pixso.cn/community ，点击顶部导航栏的搜索图标，输入 weui，在返回的结果中，就能看到深、浅两色的 WeUI 组件库。
>> 点击这里，免费获取 微信小程序WeUI 组件库（浅色）| 免费UI设计素材 - Pixso设计素材
(, 下载次数: 170)

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

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

(, 下载次数: 174)
打开保存在 Pixso 草稿的 WeUI 组件库，左侧的「页面」列出了组件库中包含的 3 个页面——WeUI基础样式库、组件分类和控件，点击进入不同的页面，可以查看页面对应的内容。


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


若组件库中包含了你在设计小程序页面时需要用到的组件，可以从左侧的组件面板中拖拽添加到中间的编辑窗口，在 WeUI 组件库提供的组件基础上进行编辑，提高设计项目的产出效率。


Vant Weapp

Vant，是有赞团队推出的一个轻量、可靠的开源移动端组件库，支持在前端框架 Vue2、Vue3，以及微信小程序中使用。
对应到微信小程序的场景，Vant UI 组件库的别名为 Vant Weapp。
和前面的 WeUI 组件库一样，Vant UI 组件库也提供了组件设计稿、图标设计稿源文件供用户下载，不过这两份文件同样为 sketch 格式，使用非 Mac 电脑的用户就无法直接查看组件库中的内容。

(, 下载次数: 179)
不过比较庆幸的是，Pixso资源社区同样提供了 Vant UI 组件库的设计源文件，打开资源社区，以 Vant UI 作为关键词进行搜索，就能找到这一份文件。
>> 点击这里，免费获取 有赞Vant UI组件库
(, 下载次数: 168)

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

Pixso资源社区 简介

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

Pixso 个人用户完全免费

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

码字不易，如果对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！
我是皮仔 @Pixso协同设计，那我们下次再见咯。
作者: 浪花一朵朵@    时间: 2023-3-30 11:16
推荐9款优秀的小程序UI框架，建议收藏！
1.TouchUI WX

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

(, 下载次数: 178)
特点：
1.组建扩充
增加了30多种常用的组件用于官方组件的补充。
2、功能扩充
兼容阿里的iconfont图标库，海量矢量图标随意使用；补充了常用样式库、支持less语法、支持全局配置主题色等
3、开发体验改善
四文件方式改为单文件方式，通过VSCode编辑器+插件的方式开发，拥有web开发体验；
4、小程序转为H5应用
可以与H5开发框架TouchUI工程相互转换，发布成webApp。开发一套代码，拥有两套应用。
2.lin-ui

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

(, 下载次数: 174)
3.WeUI

https://github.com/Tencent/weui-wxss
WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。
可在https://weui.io/ 直接看到UI效果

(, 下载次数: 164)
  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

(, 下载次数: 188)
优点：视觉效果漂亮，注意看一下，他可以将样式沉浸到手机最顶部，这一点很好，同时其他组件也挺好，可针对自己的需求，直接修改或覆盖他的css样式。
缺点：缺少文档、很多新人无从下手。扫码预览时，近期广告有些频繁，影响使用，开发者也想有点费用，大家理解，喜欢的可以对开发者点广告支持，开源不易。
6.Vant Weapp

https://github.com/youzan/vant-weapp
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
开发文档参考：https://youzan.github.io/vant-weapp/#/intro

(, 下载次数: 166)
优点：视觉效果简单明朗、提供了日常开发使用的组件、文档很详细。
缺点：门槛相比其他几个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

(, 下载次数: 189)
调用「基础元件」中的「文本截断」，可以控制长文本的显示行数，文本超长的用省略号结尾。「页底提示」可以用在上拉加载中的过程中。而「价格」则提供了各种样式的价格及货币符号。

(, 下载次数: 167)
相比其他组件库，MinUI 将各种组件拆分得更细，真正使用时，需要开发者更多的对各个组件进行再次结合，但也因此 MinUI 显得更加通用。
其他推荐：
.net core高频面试题有哪些？
玩转Github：强烈推荐这份.NET程序员面试手册，4万字干货！
有哪些不错的windows form开源项目推荐？
Visual Studio 有哪些好用的插件？
Visual Studio有哪些不为人知却特别好用的实用工具/技巧/功能/特性？
作者: 频率妞    时间: 2023-3-30 11:17
我一般用的都是colorUI，你可以看看。demo：

作者: alanwooo    时间: 2023-3-30 11:18
想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。
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 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。



(, 下载次数: 176)


图片.png

5：Tina.js 一款轻巧的渐进式微信小程序框架
Tina.js 开源框架地址： https://github.com/tinajs/tina
官方介绍：是一款轻巧的渐进式微信小程序框架，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。




(, 下载次数: 164)


图片.png

6：前端框架weweb
地址: https://github.com/wdfe/weweb
官方介绍：weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。
7：微信UI组件库 iView Weapp
https://weapp.iviewui.com/
介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。




(, 下载次数: 169)


图片.png

8：ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库
https://cnodejs.org/topic/589d625a5c8036f7019e7a4a
官方介绍：ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。 包含 badge、btn、等共计 17 类组件或元素。
推荐阅读
【干货】2020年最新编程视频教程，速度收藏！！
作者: 暧日阳光    时间: 2023-3-30 11:19
阿拉丁整理一下比较常见的一些 微信小程序 UI 框架：
1、WeUI WXSS
这个是微信官方的，界面和交互设计和微信差不多。


项目地址：
https://github.com/Tencent/weui-wxss2、ColorUI
这个是 CSS 框架，非 JS 框架，主要是页面设计、交互体验。ColorUI是一个css库，在你引入样式后可以根据class来调用组件，一些含有交互的操作也有简单写，可以为你开发提供一些思路。
项目地址：
https://github.com/weilanwl/ColorUI3、MinUI
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具.

(, 下载次数: 168)
项目地址：
https://github.com/meili/minui4、Wux Weapp
Wux Weapp是一套组件化、可复用、易扩展的微信小程序 UI 组件库。UI 样式可配置，拓展灵活，轻松适应不同的设计风格；80+ 丰富的组件，能够满足移动端开发的基本需求。

(, 下载次数: 172)
项目地址：
https://github.com/wux-weapp/wux-weapp/
以上是阿拉丁小程序收集到的一些微信小程序 UI 框架，欢迎关注 @阿拉丁小程序 ，获取更多微信小程序的开发知识。



欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/) Powered by Discuz! X3.4