移動H5端方案

行走的蒲公英發表於2024-08-27

● 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 ,用微信小程式原生開發。

● 優點:輕量級、社群活躍。

● 缺點:與使用框架相比,原生開發需要編寫更多的程式碼,開發週期可能會較長。

相關文章