UI选型篇

🌱 前言

笔者在开发 snail-uni 之前，通过 uni-app 开发上线过 新闻类、社交类、预约类、生活记账类等不同类型的小程序，所以在ui使用体验中有一些心得。 snail-uni 将从优秀的第三方Ui库中选择，本次选型推荐分别是Wot-design-uni 、Uv-ui、Uview-plus、Tuniao UI Uniapp V3，分别从开源热度、多端支持、组件数量等方面进行对比。

🌾 UI总览

Wot-design-uni

介绍：一个基于Vue3 + TS 开发的 uni-app 组件库，提供 70+ 高质量组件，支持暗黑模式、国际化和自定义主题

• github: https://github.com/Moonofweisheng/wot-design-uni
• gitee: https://gitee.com/wot-design-uni/wot-design-uni
• 文档地址：https://wot-design-uni.pages.dev

Uv-ui

介绍：uv-ui 破釜沉舟之兼容vue3+2、app、h5、小程序等多端基于 uni-app 和 uView2.x 的生态框架，支持单独导入，开箱即用，利剑出击。

• github: https://github.com/climblee/uv-ui
• gitee: https://gitee.com/climblee/uv-ui
• 文档地址：https://www.uvui.cn/

Uview-plus

介绍：uview-plus，是uni-app全面兼容 nvue 的 uni-app 生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。

• github: https://github.com/ijry/uview-plus
• gitee: https://gitee.com/uiadmin/uview-plus
• 文档地址: https://uiadmin.net/uview-plus/

Tuniao UI Uniapp V3

介绍：TuniaoUI vue3 uniapp 是一款基于 uniapp、vue3、Typescript 进行开发的 UI组件库，提供丰富的组件进行快速开发，支持微信小程序、APP 和 H5，包含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。

• github: https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp
• 文档地址：https://vue3.tuniaokj.com

🔥 开源热度

注：以下表格均为最新实时热度

框架	wot-design-uni	uv-ui	uview-plus	Tuniao UI Uniapp V3
github start
github forks
gitee start				/
gitee forks				/

• start 历史趋势

注： 趋势图为实时更新，结论有所误差！笔者编写时截止时间为：2024 年 7 月 29 日

通过以上对比不难看出，wot-design-uni、uv-ui 两个ui库，在开源热度方面有着明显的上升趋势

🍃 多端支持

注：采集时间为：2024 年 7 月 29 日

框架	wot-design-uni	uv-ui	uview-plus	Tuniao UI Uniapp V3
H5	✓	✓	✓	✓
Android	✓	✓	✓	✓
iOS	✓	✓	✓	✓
微信小程序	✓	✓	✓	✓
支付宝小程序	✓	✓	✓	✓
钉钉小程序	✓	✓	✓	❌
百度小程序	❌	✓	✓	❌
QQ小程序	❌	✓	✓	❌
头条小程序	❌	✓	✓	❌

🌲 组件数量及特性

注：采集时间为：2024 年 7 月 29 日

框架	wot-design-uni	uv-ui	uview-plus	Tuniao UI Uniapp V3
组件数量	72	75	72	55
暗黑模式	✓	❌	❌	❌
国际化	✓	✓	✓	❌
自定义主题	✓	✓	✓	✓

从表格可以看出wot-design-uni 组件数量和uv-ui、uview-plus 相差不大，特性支持上wot-design-uni更具优势，笔者在项目中分别使用过uv-ui、uview-plus、wot-design-uni，在使用体验中笔者认为wot-design-uni更加灵活，可以很轻松的修改组件和组合。通过以上对比Snail-uni最终采用wot-design-uni作为UI组件库。