移动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 ,用微信小程序原生开发。

● 优点:轻量级、社区活跃。

● 缺点:与使用框架相比,原生开发需要编写更多的代码,开发周期可能会较长。

posted @ 2024-08-27 09:50  行走的蒲公英  阅读(55)  评论(0编辑  收藏  举报