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

推荐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库   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
推荐10个高颜值小程序开源UI库
大家好,我是Echa。由于昨天小编发布一篇关于适合接私活的小程序开源项目相关优质的干货文章:推荐16个适合接私活的小程序开源项目,有兴趣的粉丝们看看这篇。结果陆陆续续小编收...【详细内容】
2023-01-06  Search: UI库  点击:(669)  评论:(0)  加入收藏
七个Python必备的GUI库,这次一定要学会
GUI(图形用户界面),顾名思义就是用图形的方式,来显示计算机操作的界面,更加方便且直观。与之相对应的则是CUI(命令行用户交互),就是常见的Dos命令行操作,需要记忆一些常用的命令,...【详细内容】
2021-04-30  Search: UI库  点击:(414)  评论:(0)  加入收藏
浅谈前端八大UI库
Element UI开发团队:饿了么前端官网:https://element.eleme.cn/#/zh-CNgithub( star:44.1k ):https://github.com/ElemeFE/element特性:Element-UI 是目前针对于 Vue 开发 PC 端项...【详细内容】
2020-08-11  Search: UI库  点击:(288)  评论:(0)  加入收藏
Python GUI编程之Python GUI库综述
前言本文介绍利用Python开发GUI应用程序时几种常见的跨平台Python GUI库。注:本文基本开发环境配置为:- Window7(64位)- Python 3.8.5- 以及各类Python GUI库本次分享内容的目...【详细内容】
2020-08-10  Search: UI库  点击:(307)  评论:(0)  加入收藏
SUI Mobile - 阿里出品的小巧且精美的手机H5前端UI库
阿里巴巴共享业务事业部UED团队的作品。专门为手机H5页面提供一个常用的组件库,以减少重复工作。介绍SUI Mobile(MSUI) 是一套基于 Framework7 开发的UI库,风格样式偏iOS。它...【详细内容】
2020-06-22  Search: UI库  点击:(1041)  评论:(0)  加入收藏
2020年 16 个最有用的 Vue UI库
本文主要跟大家分享一些 Vue 的 UI 库,这些库都是 github 高星的库,废话不多说,我们一起来看看。1. Vuetify (⭐️ 24k)网站:https://vuetifyjs.com/zh-Hans/github: https://githu...【详细内容】
2020-03-06  Search: UI库  点击:(477)  评论:(0)  加入收藏
▌简易百科推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  dbaplus社群    Tags:小程序   点击:(13)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  前端充电宝  微信公众号  Tags:小程序   点击:(16)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24    简易百科  Tags:代码   点击:(56)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  云诏    Tags:小程序   点击:(70)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  小文智能    Tags:微信小程序   点击:(94)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  久码小程序开发  今日头条  Tags:小程序   点击:(115)  评论:(0)  加入收藏
小程序技术分享:安全机制与运行机制
小程序凭借其高曝光率、开发成本低、运行更流畅等优势和特点,一经推出就被广泛使用,面对小程序的火爆,自然而然地,就有很多开发者转战小程序领域,本文主要带大家了解下小程序运行...【详细内容】
2023-12-07  前端实习生Findan    Tags:小程序   点击:(138)  评论:(0)  加入收藏
微信小程序的编译原理
2021年来,随着科技的进步,人们的生活水平也在不断提高。现在,微信小程序已经成为了现代人生活中不可或缺的一部分,它可以帮助我们更方便地查找信息,购物,预订机票和酒店,进行社交等...【详细内容】
2023-12-06  前端实习生Findan    Tags:小程序   点击:(128)  评论:(0)  加入收藏
模板小程序和订制开发小程序的区别?
相比外卖APP,外卖小程序是不用下载到手机的,所以对于用户来说更方便一点。简单方便的程序用户才更愿意使用。现在不少商家越来越重视外卖小程序开发,想通过外卖小程序冲进这片...【详细内容】
2023-11-24  重庆洺宸传媒    Tags:小程序   点击:(233)  评论:(0)  加入收藏
一分钟学会用宝塔面板搭建小程序
宝塔面板搭建小程序怎样用?想要使用宝塔面板搭建小程序?这里是实用教程,帮助您快速上手。在本教程中,我们将扼要了解宝塔面板的基础知识,并一步步演示怎么搭建一个小程序。第一步...【详细内容】
2023-11-15    网络  Tags:小程序   点击:(193)  评论:(0)  加入收藏
站内最新
站内热门
站内头条