移动H5端方案
● vue3
1. vue3+vantUI 框架
● 官方文档:https://vant-ui.github.io/vant/#/zh-CN
● 版本:v4.9.4 最新版本,更新时间2024-08(从2019-07至今,迭代时间5年)。
● 研发团队:有赞团队
● 优点:轻量、更新快,界面较美观、80+ 个高质量组件,覆盖移动端主流场景。
● 适配性:官方支持vue3和微信小程序端;社区支持react端。
2. TDesign Vue3 Mobile
● 官方文档:TDesign
● 版本:v1.3.4,更新时间2024-08-08,(从2021-12至今,迭代时间3年)。
● 研发团队:腾讯
● 扩展性:有配套的PC端,详见官方文档。
● 优点:大厂研发,界面美观简洁,组件功能强大,社区活跃。
3. vue3 + uniapp(H5)
● 官方文档:uni-app官网
● 版本:v3.0.0,更新时间2023-07,(从2018-06至今,迭代时间6年)。
● 研发团队:DCloud公司(深圳市触控时空网络科技有限公司)+社区,社区占很大比重。
● 适配性:iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
● 优点:多端适配,社区活跃。
● 缺点:
○ uniapp的vue2版本比vue3版本成熟,vue3版本还在迭代中,文档不够完善;
○ uniapp某些功能依赖它对应的插件市场,这些插件有部分还不兼容vue3,要注意解决兼容性问题;
○ 社区中关于uniapp的vue3用法可参考的不多,活跃性不强;
○ 代码开发依赖uni的api和hbuilderx编译器,调试不那么便捷。
○ 界面风格可能较为基础和朴素,不够美观,只能够满足基本的界面需求。
● react
1. antd-mobile UI 框架 + react 最新
● 官网文档:Ant Design Mobile - Ant Design Mobile
● 版本号:v5.37.1 最新版本,更新时间2024-07-03(从2016-07至今迭代时间有8年)。
● 研发团队:阿里。
● 优势:压倒性优势,大厂研发,界面美观优雅,组件功能强大,迭代时间长,使用广泛,体验性极致,超级推荐。(Antd Mobile 是国内 React 移动端项目的首选组件库。)
● 扩展性:也有配套的PC端antd (Ant Design - 一套企业级 UI 设计语言和 React 组件库)
● 缺点:只支持react,不支持vue 。
2. Arcod-Mobile + react 最新
● 介绍: 提供了 50+ 基础组件,迄今为止已在字节内部迭代了两年,包括头条、西瓜、番茄小说、抖音、懂车帝等在内的 10+ 业务已接入。
● 官方文档:Arco Design - 企业级产品的完整设计解决方案
● 版本:v2.31.6,更新时间2024-07-09(从2022年07至今,迭代时间2年)。
● 研发团队:字节跳动
● 优点:压倒性优势,大厂研发,界面美观新潮,组件功能强大,体验性极致,推荐。
● 扩展性:也有配套PC端Arcod (Arco Design - 企业级产品的完整设计和开发解决方案)
● 缺点:只有1个支持react的版本类型,不支持vue。
● 对比:按发布日志来看,迭代时间较短,组件功能大体一致,但在某些细节或经验沉淀上,阿里的antd-mobile成熟度更高。
3. TDesign React Mobile
● 官方文档:TDesign - 开源的企业级设计体系,为设计师 & 开发者,打造工作美学
● 版本号:v0.5.0,更新时间2024-08-23(从2022-06至今,迭代时间2年)
● 研发团队:腾讯
● 扩展性:有配套的PC端,详见官方文档。
● 优点:大厂研发,界面简洁大气,组件功能强大,社区活跃。
● 缺点:与Arcod-Mobile相比较,界面风格不如前者新潮;Arcod-Mobile的高级组件更有优势。注重交互体验优先选择Arcod-Mobile。
4. vant react
● 社区文档:react vant - 轻量、可靠的移动端 React 组件库
GitHub - 3lang3/react-vant: React mobile UI Components base on Vant
● 研发团队:社区
● 版本:v3.3.5,更新时间2024-05-15。
● 缺点:社区研发,目前功能不更新了,只修复bug。
● 微信小程序端
1. vue3+uniapp
● 官方文档:uni-app官网
● 适用性:适合页面交互不复杂的场景。
● 缺点:
○ 界面风格可能较为基础和朴素,不够美观,只能够满足基本的界面需求,视觉风格需要自行开发;
○ 更新适配问题,由于需要同时适配多个平台,可能在微信小程序的新特性更新上会有一定的延迟。
2. TDesign 微信小程序(原生)
● 官方文档:TDesign
● 版本:v1.6.0,更新时间2024-08-23,(从2021-11至今迭代时间3年)。
● 研发团队:腾讯
● 适用性:不适用 vue ,用微信小程序原生开发。
● 优点:大厂开发,界面美观,组件丰富,社区活跃。
● 缺点:与使用框架相比,原生开发需要编写更多的代码,开发周期可能会较长。
3. vant weapp(原生)
● 官方文档:https://vant-ui.github.io/vant-weapp/#/home
● 版本:v1.11.6 更新时间2024-05-14,(从2019-12至今,迭代时间5年)。
● 研发团队:有赞团队
● 适用性:不适用 vue ,用微信小程序原生开发。
● 优点:轻量级、社区活跃。
● 缺点:与使用框架相比,原生开发需要编写更多的代码,开发周期可能会较长。