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

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

一、uni-app 组成和跨端原理
二、uni-app 各端差异注意事项
三、uni-app 离线本地存储方案
四、uni-app UI库、框架、组件选型指南
五、uni-app 蓝牙开发
六、uni-app 导航栏开发指南
七、uni-app 原生控件层级过高无法覆盖的解决方案
八、uni-app 设置缓存过期时间
九、uni-app H5端使用注意事项

前言

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

一、TMUI

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

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

1.1 主要特点

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

4.1 功能特点

美观易用是TuniaoUI追求的。TuniaoUI现在已经发布了uni-app 跳转到vue2文档和vue3版本，当前文档为vue3文档，后续会不断的拓展其他原生版本，扩大生态，让更多的开发者可以使用TuniaoUI，图鸟同时也欢迎各大开发者一起加入进来进行开发和不断完善图鸟。

4.2 开源协议

• TuniaoUI 开源组件遵循 apache 协议，开发者可以自由的享受和参与开源。
• TuniaoUI vue3 Typescript 开源组件遵循 MIT 协议，开发者可以自由的享受和参与开源。

五、ThorUI

Thor UI 是包含 uni-app 和原生小程序双重版本且轻量、简洁的移动端组件库。提供近百个高质量组件，覆盖移动端各类场景，让您的开发效率倍速提升!

ThorUI 组件库小程序原生版本，该开源版源码为V1.4.2版本，后续更新版本付费会员才可使用.ThorUI组件库，uni-app 版本，v3编译，支持nvue uni-app编译模式（原weex编译模式），easycom 组件模式（无需手动引入，开发工具自带智能感知）

代码地址: https://github.com/dingyong0214/ThorUI.git
代码地址: https://github.com/dingyong0214/ThorUI-uniapp.git

5.1 功能特点

• 提供近百个高质量前端 UI 组件，美观优雅，体验成熟，覆盖移动端大部分业务场景
• 默认支持编译发布到 APP 端 (iOS 和 Android)、H5、微信小程序、QQ小程序
• 支持使用新的技术，兼容 Vue 3
• 内置一套同样简洁漂亮的图标库，数量也很多
• 支持按需引入，减少应用打包体积
• 上手容易，官方提供用于学习的模板和示例工程

5.2 特别注意

Thor UI 基础组件基于 MIT 开源协议开放源码，使用也完全免费，并且可以商用。但主要注意的是，优化版的 Thor UI 示例中的组件，需要付费会员才能使用和商用。这部分官方有明确的描述：

六、Grace UI

GraceUI 是一套基于 uni-app 及 微信小程序 的优秀前端框架，提供了丰富的组件、布局及界面库，会大幅度提高您的开发速度。
GraceUI 来自于近五年的上百个小程序及APP项目总结，我们是一线开发者，深度地参与项目开发，所以能够为您提供优质的框架。

官网地址：https://www.graceui.com/

6.1 特别注意

收费了貌似，看看最新动态吧。

七、总结

有了这些精美的UI框架库，我们可能不需要UI美工也可以同样做出精美的app或者小程序了。

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

一、uni-app 组成和跨端原理
二、uni-app 各端差异注意事项
三、uni-app 离线本地存储方案
四、uni-app UI库、框架、组件选型指南
五、uni-app 蓝牙开发
六、uni-app 导航栏开发指南
七、uni-app 原生控件层级过高无法覆盖的解决方案
八、uni-app 设置缓存过期时间
九、uni-app H5端使用注意事项