Uniapp And Taro一些小測評

前情

最近公司準備新開發一個小程序項目,對於使用哪一款小程序框架有一些猶豫,我有過2年左右的uniapp項目開發經驗,Taro在剛剛出來的時候有嘗試過,經常莫名報錯需要重啓,在內心是有些偏向uniapp一方的,趁項目還未正式啓動前,老大也願意給時間去嘗試的情況下,爲什麼不做個小測評對比對比了。


初始化項目

Uniapp:通過自帶Hbuilderx可視化初始化項目

Taro:通過命令行初始化項目

taro初始化項目在npm install這一塊基本是卡死的,我試過了幾次都沒有一次是成功的,都是手動cd到項目目錄下,再手動執行npm install才能成功初始化,我猜有可能是跟個人網絡有關。


項目啓動

Uniapp:自帶的Hbuilderx+微信開發者工具

Taro:vs code + 微信開發者工具

Uniapp可以做到一鍵啓動,而Taro則需要先啓動項目代碼,再手動啓動小程序IDE指定到項目根目錄。


開發體驗

Uniapp:因爲有自帶的IDE加持,代碼提示十分強悍。

Taro: 基於vs code,代碼提示偏弱,而且對於小程序的普通的View Text等標準組件都需一個一個單獨引入使用,好像如果用Vue也是不需要的。

再來看一下新增路由和設置tabBar,這是每個項目的基礎需求

Uniapp全流程可以通過鼠標點擊即可完成,很絲滑,基本可以靠提示脫離文擋完成一些配置

Taro就是真正的碼磚了,我寫過一段時間小程序,在沒有提示的情況下,我還是很有需要去翻翻文擋的,當然有插件可以支持,但在官方文擋裏沒有特別說明

還有一個在開發中不能少的,可以極大提高開發效率的:熱更新

Uniapp:熱更很細滑,速度也快,特別現在有vue3 + vite的支持,真的有點快

Taro:按官方文擋的說明,小程序IDE指向根目錄,開發過程中熱更時有時無,而且修改文字是百分百不會更新,如果開發中報錯了,那你得手動編譯小程序

Taro熱更不穩問題在我做demo的時候搞得我很頭疼,據同事推薦說把小程序指向dist,熱更就會穩,但事實是那根本就不是熱更了,那是直接刷新了,但是總比手動重新編譯的好,我的demo就是在此情況下開發完的。


代碼包體積

測試條件:helloworld項目,二個tab,未添加任何第三方庫和圖片等資源, 未進行壓縮

Uniapp

開發版:總包175KB,文件數14

構建發包版:總包61kb 文件數14

Taro

開發版:總包1.32M,文件數32

構建發包版:總包249kb 文件數20


條件編譯

要實現跨端說不寫兼容代碼是不太可能的,所以條件編譯是必須得有的,雙方都支持條件編譯,通過書寫不同的代碼去解決不同端的兼容問題

Uniapp: 借鑑C 語言中的 #ifdef、#ifndef 的方式,uniapp提供了條件編譯手段,在一個工程中可以優雅的完成平臺個性需求和兼容處理,再加上強大的IDE代碼提示,寫條件編譯很高效,條件編譯代碼就是普通的代碼註釋,哪裏需要包哪裏,有時可以細做到一個註釋實現單個key值的條件編譯,我基於此的啓發,還寫了個ifplus的條件編譯loader:https://www.npmjs.com/package/ifplus-loader

js的條件編譯:

css的條件編譯:

html的條件編譯:

json配置文件的條件編譯:

再來看一下條件編譯舒適的書寫方式

還有文件和目錄的條件編譯,可以說是基本全考慮到了,官方介紹文擋:https://uniapp.dcloud.net.cn/tutorial/platform.html

Taro從文擋介紹看你得通過環境變量判斷當前是屬於哪一個平臺,再做if else取捨,還有文件條件編譯就是帶不同平臺的後輟去做。

官方介紹頁面:https://taro-docs.jd.com/docs/envs


多端支持

Uniapp:基本支持世面上主流的小程序平臺,同時官方都有提供自己的各端案例,還多支持360小程序。

官方的第三方案例展示:https://uniapp.dcloud.net.cn/case.html

Taro:從官方文擋上看基本上支持市面上主流的小程序平臺,但是並沒有發現官方提供自己的案例演示,有點不太理解,官方是怎麼驗證可以跨這麼多端的,從備註的其它案例來看基本是清一色的小程序項目,當然Taro支持鴻蒙應用開發

官方的第三方案例展示:https://taro-docs.jd.com/showcase


文擋

學習一門框架,第一入手資料就是官方文擋,雙方文擋都算不錯,跟着文擋都能開始入門開發項目,但是Uniapp的文擋更全、目錄劃分的更好,Taro文擋組件篇竟然沒有附帶一個demo或者示範圖片,你完全看不出它長啥樣,雖不是什麼大問題,但是總感覺有點點小失落......

Uniapp官方文擋:

uni-app官網 (dcloud.net.cn)

Taro官方文擋:

Taro 介紹 | Taro 文檔 (jd.com)


生態

Uniapp:插件市場(https://ext.dcloud.net.cn/

基於Vue,Vue 全家桶

Taro:物料市場(https://taro-ext.jd.com/

支持React/Vue/Nerv,在前端框架支持上Taro完勝,但是案例在哪了?多少有點懷疑。

從個數看uniapp完勝,但uniapp有部分是收費的,收費插件都是可以免費試用的,合適再考慮是否正式購買,如果你實力不錯,你也可以寫寫插件或者模板賺點毛爺爺,在插件引入方面,Uniapp因爲Hbuilder X加持,插件支持一鍵導入,Taro則是通過命令行引入,Uniapp插件能看到評分,一般從評分就能區分插件是否有引入的必要了,Taro好像沒有評分項,只能通過自己去嘗試踩坑了。


社區

二跨平臺框架都有自己的社區

Uniapp:QQ羣+ 官方論壇

我還記得我當時用uniapp的時候,連續幾天在羣裏AT官方人員幫忙解決問題,雖然也不是十分積極,但是還是能找到人的,而且uniapp的論壇十分活躍,我提的幾個貼都有收到官方人員和其它開發的回覆,助我爬出了不少坑。

Uniapp入羣:https://uniapp.dcloud.net.cn/ 左手邊導航滾動到底掃碼入羣

uniapp社區鏈接:

DCloud問答

Taro:微信羣 + github

在Taro的微信羣裏,你並不能發現官方的開發人員,可能有,但我提了好幾個問題,也有很多開發者發問題在羣裏,基本都是石沉大海,應該是沒有吧,只是組織一個討論的羣,有一個機器人倒是一直在發送歡迎語,但搞笑的是帶的卡片鏈接還是404的,有問題那就去github提issue吧。

Taro還有二個讓人迷惑的地方,有二個地方的社區入口都是跳轉到京東商城,文擋的跳轉也是404

Taro入羣方式:https://taro-docs.jd.com/docs/communicate 掃碼入羣

Taro官方論壇:

Discussions · NervJS/taro · GitHub

總結

上面對比了這麼多,Taro處於下風,但Taro也並不是差的那麼離譜,只能說離好還有點點差距,二個框架都是能用來開發項目的,所以你是會用Uniapp還是Taro了,可以在博文後面留言哦,我們一起討論討論吧。

如果你是react技術棧,那選Taro吧,因爲你沒得選!!哈哈哈......

同時在此感謝爲開源事業做貢獻的大牛們,有你們的默默付出,我們纔有更多更好的碼磚體驗

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章