您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

推荐10个高颜值小程序开源UI库

时间:2023-01-06 11:14:34  来源:今日头条  作者:Echa攻城狮

大家好,我是Echa。

由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收到粉丝们的私信反馈有没有针对小程序开发相关开源漂亮火热的UI库呢?这样的话,接私活搞副业更加得心应手了。为了粉丝们多接私活,多挣钱,提高生活品质。小编不能耽误大家发财,赶紧大脑高速运转安排上。另外,有接私活搞副业能力的粉丝们,可以私信小编回复:接私活。获取适合接私活合集系列的优秀开源项目,助你接私活得心应手。

今天小编给大家分享10个Github上非常火的小程序开源UI库,个个都靓,希望大家喜欢。

创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会持续更新干货,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。

全文大纲

  1. WeUI - 由微信官方设计团队为微信 Web 开发量身设计
  2. Vant WeApp - 是有赞移动端组件库 Vant 的小程序版本
  3. iView Weapp - 是由 TalkingData 发布的组件库
  4. ColorUI - 鲜亮的高饱和色彩,专注视觉的小程序组件库
  5. Wux Weapp - 是一套组件化、可复用、易扩展的微信小程序 UI 组件库
  6. TaroUI - 是由 京东·凹凸实验室 倾力打造的多端开发解决方案
  7. Lin UI - 是由林间有风团队精心打造的一套微信小程序组件库
  8. MinUI - 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库
  9. uViewUI - 是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让你信手拈来,如鱼得水
  10. Touch WX - 是一套完全免费的微信小程序开发框架
WeUI

 

在线体验:https://weui.io/

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

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。

随着小程序的普及,微信也有很多内部小程序在开发,每个小程序都需要从零到1进行开发设计,而这个过程中,有大量的 UI 交互是重复的,另外,微信内部已经有一套H5版本的 WeUI 样式库。综合考虑,我们基于 WeUI 样式库开发了小程序版本的 UI 组件库,在内部多个小程序项目已经使用 OK 的情况下,我们把这套组件库开源让外部开发者也可以使用

如下图:


 


Vant Weapp

官网地址:https://youzan.github.io/vant-weapp/#/theme

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

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

小程序基于 Shadow DOM 来实现自定义组件,所以 Vant Weapp 使用与之配套的 css 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。

CSS 变量 的兼容性要求。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。

如下图:


 


 

iView Weapp

官网地址:https://weapp.iviewui.com/

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

iView Weapp 是一套高质量的微信小程序 UI 组件库。

在开始使用 iView Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档。

如下图:


 


 

ColorUI

官网地址:http://docs.xzeu.com/

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

ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。

鲜亮的高饱和色彩,专注视觉的小程序组件库

如下图:


 


 


 

wux-weapp

官网地址:https://wuxui.com/

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

wux-weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库

 

  1. UI 样式可配置,拓展灵活,轻松适应不同的设计风格
  2. 60+ 丰富的组件,能够满足移动端开发的基本需求

 

如下图:


 


 

TaroUI

官网地址:https://taro-ui.jd.com/

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

Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码。

特性

多端适配:一套组件可以在微信小程序 / H5 / 百度小程序 等多端适配运行

组件丰富:提供丰富的基础组件,覆盖大部分使用场景,满足各种功能需求

按需引用:可按需使用独立的组件,不必引入所有文件,可最小化的注入到项目中

多套主题:提供默认的蓝色主题、红色主题以及自定义主题,后期会新增渐变色主题

如下图:


 


 


 


 


 

Lin UI

官网地址:https://doc.mini.talelin.com/

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

Lin UI是由林间有风团队精心打造的一套微信小程序组件库,组件丰富、设计优美,并且拥有完整的商业案例,是您开发微信小程序的不二选择。

在如今这个移动互联网时代,技术创新将带来商业模式的完全颠覆,伴随着小程序的诞生,移动互联网行业也迎来了新一波的浪潮。
无数大小公司纷纷开始开发自己的小程序产品,前端的技术栈要求里也新增了 微信小程序 这项技能。

另一方面,软件开发的过程中,部分功能或视图的实现是一个重复性的工作,微信小程序从诞生到现在,不过两年时间(2017/1/09 ~ 2019/2/12),生态圈对比 Vue, React 来说实在过于单调, 而且很少有在设计和实用性上都很突出的产品,能够在实际开发中帮助到开发者的产品更是屈指可数。

所以,我们在深思熟虑后,决定要动手设计并开发一个与小程序相匹配的组件库。与其他组件库不同的是,我们除了提供基本的组件外,还会提供 wxs模块 、高级组件 、 电商组件模块 等等。 例如,在电商项目里常用的 SKU联动选择 ,城市选择器 等。不过,为了尽快发布与开发者们见面,我们先完成了基本的组件部分,剩余的高级内容将在当前版本稳定后,提上日程。

特性

简单易用

组件采用微信小程序的原生语法编写,只需要熟悉初级的 html 、 CSS 、 JAVAScript 和 微信小程序 相关知识就能上手开发,同时既可以一次性加载所有的代码,也可以选择只加载使用到的某些组件的代码。

规范统一

遵循统一的 设计规范 ,接口标准 和 事件冒泡机制 ,减少开发者查阅文档的时间成本,提升开发效率。

文档丰富

为了能让更多开发者接触之初,就能够熟练的用Lin-UI开发自己的小程序应用,我们对每个组件的 属性 、 事件 、用法 、和 案例 上都做了详尽的描述。

扩展性强

支持 按需引入 和 自定义的主题色 ,生成多种风格,满足个性化产品需求;同时还具有很强的 扩展性 ,轻松实现组件的二次开发。

支持第三方库框架

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

如下图:


 


 


 


 

MinUI

官网地址:https://meili.github.io/

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

MinUI 基于规范的小程序 UI 组件库,轻量、易用、工具化。

Min 是一套面向小程序的开发环境,由蘑菇街前端开发团队提供和维护。目前,我们开源了它面向小程序自定义组件的部分(后续还会陆续开源其他能力),结合微信开发者工具,对组件的 开发 和 使用,Min 会让你感到优雅和高效。而 MinUI,就是基于 Min 平台产出的一套 UI 组件库,同时也是 “蘑菇街女装精选” 小程序 (小程序总榜前 3 位) 在应用的 UI 组件库。

授人以渔,基于 Min 提供的开发赋能,和 MinUI 组件库实践的参考,不同小程序的开发者,可以快速建立起符合其自身需求的组件化体系。

如下图:


 


 

uView UI

官网地址:https://v1.uviewui.com/

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

uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让你信手拈来,如鱼得水。

uni-app在2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归。

因此,uView应运而生,uView的目标是成为uni-app生态最优秀的UI框架。

关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它们表示感谢。

适用领域

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到IOSAndroid、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

四大利器,为您保驾护航

 

  • 指南:涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川
  • 组件:众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用
  • 工具库:众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨
  • 布局:收集众多的常用页面和布局,减少开发者的重复工作,让您专注逻辑,事半功倍

 

如下图:


 


 


 


 

Touch WX

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

Touch WX 是一套完全免费的微信小程序开发框架,包含丰富的UI控件用于官方组件的补充。

1、组件扩充:

增加了30多种常用的组件用于官方组件的补充。

2、功能扩充:

兼容阿里的iconfont图标库,海量矢量图标随意使用;补充了常用样式库、支持less语法、支持全局配置主题色等

3、开发体验改善:

四文件方式改为单文件方式,通过VSCode编辑器+插件的方式开发,拥有web开发体验;

4、小程序转为H5应用:

可以与H5开发框架Touch UI工程相互转换,发布成webApp。开发一套代码,拥有两套应用。

这套框架的原理是:

将Touch WX工程中所写的代码进行编译,直接输出为微信小程序工程原始代码。扩充的30多种组件,完全是基于小程序官方的自定义组件机制实现(row&col除外)。

所以它支持小程序的全部语法,怎么开发小程序,就怎么开发Touch WX。

不过因为是单文件的开发方式,在文件的代码结构上稍有不同。请注意这一点。

这样好处在于:

1、开发者迁移成本很小。

可以轻松的将已有的小程序移植为Touch WX工程,来使用它的扩展能力;

2、便于排查错误。

当遇到问题时,开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题;

3、按需编译

由于小程序对体积有限制,在使用框架开发时,只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。

4、不会对框架产生依赖。

以后不想用了这套框架,可以直接对已经输出的小程序工程进行维护。

如下图:



Tags:UI库   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
大家好,我是Echa。由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收...【详细内容】
2023-01-06  Tags: UI库  点击:(0)  评论:(0)  加入收藏
GUI(图形用户界面),顾名思义就是用图形的方式,来显示计算机操作的界面,更加方便且直观。与之相对应的则是CUI(命令行用户交互),就是常见的Dos命令行操作,需要记忆一些常用的命令,...【详细内容】
2021-04-30  Tags: UI库  点击:(320)  评论:(0)  加入收藏
Element UI开发团队:饿了么前端官网:https://element.eleme.cn/#/zh-CNgithub( star:44.1k ):https://github.com/ElemeFE/element特性:Element-UI 是目前针对于 Vue 开发 PC 端项...【详细内容】
2020-08-11  Tags: UI库  点击:(125)  评论:(0)  加入收藏
前言本文介绍利用Python开发GUI应用程序时几种常见的跨平台Python GUI库。注:本文基本开发环境配置为:- Window7(64位)- Python 3.8.5- 以及各类Python GUI库本次分享内容的目...【详细内容】
2020-08-10  Tags: UI库  点击:(110)  评论:(0)  加入收藏
阿里巴巴共享业务事业部UED团队的作品。专门为手机H5页面提供一个常用的组件库,以减少重复工作。介绍SUI Mobile(MSUI) 是一套基于 Framework7 开发的UI库,风格样式偏iOS。它...【详细内容】
2020-06-22  Tags: UI库  点击:(465)  评论:(0)  加入收藏
本文主要跟大家分享一些 Vue 的 UI 库,这些库都是 github 高星的库,废话不多说,我们一起来看看。1. Vuetify (⭐️ 24k)网站:https://vuetifyjs.com/zh-Hans/github: https://githu...【详细内容】
2020-03-06  Tags: UI库  点击:(263)  评论:(0)  加入收藏
▌简易百科推荐
大家好,我是Echa。由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收...【详细内容】
2023-01-06  Echa攻城狮  今日头条  Tags:UI库   点击:(0)  评论:(0)  加入收藏
作为一个还算得上策划的策划,其实经常还是会有很多想法冒出来的,一部分会因为自己简单浅薄的可行性评估淘汰,另一部分则会被能力和精力所打败。这不,昨天是新年的第一天,起床就在...【详细内容】
2023-01-02  简简单单的翻车鱼  今日头条  Tags:小程序   点击:(9)  评论:(0)  加入收藏
这几年,小程序、小游戏,非常火。业内人都知道,小程序或小游戏,就是H5应用,就是html+JS。这类应用,反编译很容易,网上就有很多方法教程。对小程序反编译之后,可轻松获得源码。稍加修...【详细内容】
2022-12-30  JShaman  今日头条  Tags:小程序   点击:(16)  评论:(0)  加入收藏
环境:TP5+EasyWechat4① 小程序后台配置违禁关键词小程序端配置违禁关键词② 手动修改下easywechat的checkText方法 ③ PHP代码 public function _initialize() {...【详细内容】
2022-12-04  世界上最好的语言  今日头条  Tags:小程序   点击:(53)  评论:(0)  加入收藏
做微信小程序开发,为了节省更多的时间,引用了Vant Weapp框架。安装Vant Weapp的的流程非常简单,这一块就不做介绍了,只说在安装完成后进行运行,调试器报错 [渲染层网络层错误] Fa...【详细内容】
2022-11-27  企尚网络  今日头条  Tags:微信小程序   点击:(239)  评论:(0)  加入收藏
短信想必大家都并不陌生,甚至可以说耳熟能详,有学者闲来无事根据统计得出我们每日都会收到三条到十条的短信,短信内容不一,有验证信息,也有支付记录。那你知道如何从短信跳转至微...【详细内容】
2022-11-10  王海军的日记    Tags:小程序   点击:(271)  评论:(0)  加入收藏
微信公众号h5应该如何转跳到小程序,难度大吗?很多人心里会有这样的疑问也是正常的,认为只有“专业人员”才能够进行操作,其实不然,普通人也是能够进行操作的。实际上很简单,“专业...【详细内容】
2022-11-09  王海军的日记    Tags:小程序   点击:(54)  评论:(0)  加入收藏
说到开发小程序,你的脑海中浮现的大概是这样的页面:...【详细内容】
2022-10-22  互联共商   网易号  Tags:微信小程序   点击:(53)  评论:(0)  加入收藏
前置准备:一张需要被关联的表格具体步骤(5): 添加关联字段 选择 被关联表 双击关联字段格 选择被关联数据 关联成功步骤分解:添加关联字段 选择被关联表 双击关联字段格...【详细内容】
2022-10-20  TOWIFY  知乎  Tags:小程序   点击:(44)  评论:(0)  加入收藏
WiFi系统开发方案,WiFiApp开发,WiFi小程序开发,需要了解WiFi详情费用工期模式制度功能等可咨询从事各类软件开发,优秀的团队为您量身定制解决方案,价格合理,用心服务。WiFi软件功...【详细内容】
2022-10-11  武汉微驱动科技有限公司     Tags:小程序   点击:(74)  评论:(0)  加入收藏
站内最新
站内热门
站内头条