uni-app 跨端开发精美开源UI框架推荐

Microi风闲

已于 2024-12-26 22:55:53 修改

阅读量3.3k

点赞数 28

CC 4.0 BY-SA版权

分类专栏：【跨端开发】Uniapp 文章标签： uni-app 开源 ui

于 2024-12-21 19:43:32 首次发布

本文链接：https://blog.csdn.net/mss359681091/article/details/144634527

【跨端开发】Uniapp 专栏收录该内容

27 篇文章

订阅专栏

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀

一、uni-app 组成和跨端原理
 二、uni-app 各端差异注意事项
 三、uni-app 离线本地存储方案
 四、uni-app UI库、框架、组件选型指南
 五、uni-app 蓝牙开发
 六、uni-app 导航栏开发指南
 七、uni-app 原生控件层级过高无法覆盖的解决方案
 八、uni-app 设置缓存过期时间
 九、uni-app H5端使用注意事项
 十、uni-app之web-view组件 postMessage 通信【跨端开发系列】
十一、uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置【跨端开发系列】
十二、uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】
十三、uni-app 跨端开发精美开源UI框架推荐

在这里插入图片描述

前言

随着 UniApp 愈发流行，支持 UniApp 的 UI组件库 就显得更加受欢迎，这里就分享几款支持UniApp的UI组件库，让你跨端应用开发更快速、高效。

一、TMUI

TMUI 是一个高性能、多主题的 Vue3 和 TypeScript 驱动的跨平台 UI 组件库，支持Uni App、微信小程序、H5等多个平台‌。TMUI版本提供了丰富的组件，支持自定义样式，包括线条、渐变、暗黑模式等，每个组件都可以根据需要进行个性化定制‌。

官方网站：https://tmui.tmui.design/

在这里插入图片描述

1.1 主要特点

高性能‌：所有组件采用最新特性，性能翻倍，确保在原生和小程序应用中流畅运行。2
多主题‌：支持多主题和暗黑模式，用户可以根据需要切换主题。
跨平台兼容性‌：支持Uni App、微信小程序、H5等多个平台，适用于不同的开发需求。
自定义组件‌：每个组件都支持自定义样式，包括线条、渐变、暗黑模式等，提供高度的灵活性。
高性能编译‌：使用Vite编译，编译速度极快，提升开发效率。

1.2 注意事项

🎯如果没打算好采用 TypeScript 编写页面，请 谨慎 使用本ui框架。（如果不懂ts。就当把js改成ts后缀，当js写也可以，不会报错。）

tmui 采用全局 TypeScript 。因此任何 vue 页面，都将只能使用ts模式编写页面。默认采用CLI 安装方式。

二、uView UI

uView 是遵循 MIT (opens new window)开源协议开源的uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台,2.0已全面兼容nvue.

官网地址：uView UI 官网：https://uviewui.com/
下载地址：uView UI下载：https://ext.dcloud.net.cn/plugin?id=1593

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

三、FirstUI

First UI 是一套基于 uni-app 开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容 App-Nvue 、App-vue 、小程序 （微信、支付宝、百度、字节、QQ）、H5。UI 样式可配置，拓展灵活，轻松适应不同的设计风格，100+ 丰富的组件，能够满足移动端开发的基本需求，提供开箱即用的常用布局，极大程度节省开发成本。

官方地址：https://www.firstui.cn/

在这里插入图片描述

3.1 功能特点

FirstUI UNI（选项式API）版是一套基于 uni-app 开发的组件化、可复用、易扩展、低耦合的跨平台移动端 UI 组件库。

UI 样式可配置，拓展灵活，轻松适应不同的设计风格。
100+ 丰富的组件，能够满足移动端开发的基本需求。
提供开箱即用的常用布局，极大程度节省开发成本。
细致、漂亮的 UI。
支持App-vue（Android、IOS）、App-Nvue（Android、IOS）、小程序、H5。
支持在 vue2 或 vue3 下使用（支持在vue3组合式API下使用）。

3.2 注意事项

FirstUI 并不是全免费开源的，一切好的组件都是需要收费的，就是要充会员，自己根据实际情况来吧。

四、Tuniao UI

图鸟UI，是基于 uni-app 进行开发的 UI 框架，提供丰富的组件进行快速开发，已经支持H5和微信小程序，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。包含基础常用的布局元素，flex、grid、浮动,完整一体的配色体系，包含4种色深模式，同时包含4套渐变配色,30+精选组件，让开发者可以快速进行开发,酷炫常用的页面模板，更有让你眼前一亮的界面效果。

Vue2版地址：https://vue2.tuniaokj.com/
Vue3版地址：https://vue3.tuniaokj.com/

在这里插入图片描述