● 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 ,用微信小程式原生開發。
● 優點:輕量級、社群活躍。
● 缺點:與使用框架相比,原生開發需要編寫更多的程式碼,開發週期可能會較長。