🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀
一、uni-app 组成和跨端原理
二、uni-app 各端差异注意事项
三、uni-app 离线本地存储方案
四、uni-app UI库、框架、组件选型指南
五、uni-app 蓝牙开发
六、uni-app 导航栏开发指南
七、uni-app 原生控件层级过高无法覆盖的解决方案
八、uni-app 设置缓存过期时间
九、uni-app H5端使用注意事项
文章目录
- 🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀
- 前言
- 一、TMUI
- 1.1 主要特点
- 1.2 注意事项
- 二、uView UI
- 三、FirstUI
- 3.1 功能特点
- 3.2 注意事项
- 四、Tuniao UI
- 4.1 功能特点
- 4.2 开源协议
- 五、ThorUI
- 5.1 功能特点
- 5.2 特别注意
- 六、Grace UI
- 6.1 特别注意
- 七、总结
- 🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀
前言
随着 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/
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端使用注意事项