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

Nut UI

介绍：Nut UI 京东风格的轻量级移动端组件库,基于Taro版NutUi 4.x版本修改而来，适配了uni-app, 使用 Vue 技术栈开发小程序应用，开箱即用，拥有丰富的业务组件。

• github: https://github.com/nutui-uniapp/nutui-uniapp
• gitee: https://gitee.com/nutui-uniapp/nutui-uniapp
• 文档地址：https://nutui-uniapp.pages.dev/

Uni UI

介绍：Uni UI 是uni-app提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

• github: https://github.com/dcloudio/uni-ui
• gitee: https://gitee.com/dcloud/uni-ui
• 文档地址：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

🔥 开源热度

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

框架	wot-design-uni	uv-ui	uview-plus	Tuniao UI Uniapp V3	Nut UI	Uni UI
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	Nut UI	Uni UI
H5	✓	✓	✓	✓	✓	✓
Android	✓	✓	✓	✓	✓	✓
iOS	✓	✓	✓	✓	✓	✓
微信小程序	✓	✓	✓	✓	✓	✓
支付宝小程序	✓	✓	✓	✓	❌	✓
钉钉小程序	✓	✓	✓	❌	❌	✓
百度小程序	❌	✓	✓	❌	❌	✓
QQ小程序	❌	✓	✓	❌	❌	✓
头条小程序	❌	✓	✓	❌	❌	✓

🌲 组件数量及特性

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

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

从表格可以看出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组件库。