Taro vs uni-app選型對比經歷

公司新產品要求發佈到各家小程序，最近研究對比了社區主流的幾家小程序開發框架，獨坑不如拉人衆坑，分享給各位，歡迎和我一塊兒入坑:)

背景

最近老闆不知怎的很重視各類小程序平臺，感受要靠小程序完成今年大半kpi。。。 產品和運營天然找咱們要方案，一方面要快速鋪開各類小程序，另外一頭hr又不給前端團隊加headcount，我只能

目前幾桿槍，主要在微信和H5上，若按照各家規範進行原生小程序開發，確定是不夠的；

所幸業內有人在作跨各類小程序的框架，趁機研究一番，看看到底作的怎麼樣。

可選的小程序框架

咱們主要分析了以下小程序開發框架（應該差很少全了），主要包括：

框架	技術棧	案例	微信小程序	支付寶小程序	百度小程序	頭條小程序	H5	App
Taro	React	豐富	⭕	⭕	⭕	⭕	⭕	⭕
娜娜奇	React	少	⭕	⭕️	⭕️	⭕️	⭕️	❌
wepy	Vue	豐富	⭕	❌	❌	❌	❌	❌
mpvue	Vue	豐富	⭕	❌	❌	❌	⭕️	❌
uni-app	Vue	豐富	⭕	⭕️	⭕️	⭕	⭕️	⭕
megalo	Vue	少	⭕	⭕️	⭕️	❌	❌	❌
OKAM	Vue	少	⭕	⭕	⭕	⭕	❌	❌
Mpx	Vue	少	⭕	❌	❌	❌	❌	❌

Tips:如上表格包含了各框架在微信、支付寶、百度、頭條、H五、App多平臺的支持狀況，鑑於掘金的markdown表格排版限制，你須要向右滑動查看完整支持對比。

咱們的篩選權重：

• 跨端：權重最高，畢竟第一訴求就是覆蓋各家小程序，故wepy、mpx這種針對微信小程序的加強型開發框架首先排除，其次mpvue雖支持 H5 平臺代碼複用，但未跟進其它幾家小程序，也放棄；
• 案例：權重次之，案例多說明使用者多，坑應該都踩得差很少了，有坑也應該是明坑；案例少的話，就要本身上去踩，暗坑多少不清楚；從官網公開案例來看，taro、uni-app公開展現的案例是最多的（mpvue、wepy雖案例也不少，但已被權重最高的跨端能力給淘汰了）
• 技術棧：權重再次之，咱們團隊對於react、vue技術棧都有涉及，只是使用深度問題上有差別

最後，咱們決定把taro、uni-app兩個框架做爲候選，作進一步對比。 uni-app其實內置了mpvue，感受是個增強版，拓展到多端了。 其實這2個框架的github star差的有點多，taro遠超uni-app，但不能根據這個直接作決定，對比報告仍是得作的，果真最後發現不能以star取人。

Taro VS uni-app

看了幾天文檔對2個框架大概摸到門道，理了下對比思路，仍是認真從以下幾個維度比較下taro、uni-app兩個框架：

• 跨端程度：真實運行項目到各平臺，對比平臺差別抹平程度
• 運行性能：框架是否帶來了額外的性能開銷，下降用戶體驗
• 開發體驗：是否支持現代開發流程，是否對工程師提供高效友好的協助
• 社區生態：社區是否繁榮，是否有大量可用輪子？

跨端

數量對比

雙方都宣傳能支持微信、百度、支付寶、今日頭條等小程序，H5，以及iOS和Android的App。看起來都不錯。

質量對比

爲驗證最終跨端效果，咱們分別下載 taro、uni-app的示例項目，體驗編譯到不一樣平臺的運行效果。

首先選擇 taro 官方帳號下的知乎小程序示例（github地址），運行到各端後的效果：

從如上截圖來看，taro成功實現了多端編譯；咱們接着更細緻的對比了一下各端運行，發現taro在以下方面存在問題：

• H5端：選項卡高亮狀態錯誤，如上圖，內容顯示的是第二個選項卡，但底部高亮的依然是第一個選項卡
• H5端：下拉刷新不生效
• 百度小程序端：下拉刷新觸發後，回彈失敗；若頁面同時存在下拉刷新和上拉加載，則和頁面滾動衝突

以後點擊二級頁、三級頁，發現H5端的其它問題：

• 全部頁面缺乏導航欄，小程序端導航欄是原生控件，taro在H5端未對應生成
• 跳轉到二級頁後，底部選項卡依然不消失，難道全部頁面都要包含選項卡？以下圖所示，不合理

針對這些問題，咱們複查了一遍taro官網，官網卻是明確說明部分事件函數在H5端不生效，主要包括：

方法	做用
onPullDownRefresh	頁面相關事件處理函數--監聽用戶下拉動做
onReachBottom	頁面上拉觸底事件的處理函數
onShareAppMessage	用戶點擊右上角轉發
onPageScroll	頁面滾動觸發事件的處理函數
onTabItemTap	當前是 tab 頁時，點擊 tab 時觸發

不過進一步仔細發現，taro文檔裏大量存在只有微信平臺打勾的狀況，H5和App側大量的X。這說明跨其餘平臺很難平滑遷移。

接着運行uni-app示例項目，選擇官方帳號下的看圖App模板（github地址）測試，運行到各端後效果：

從上圖來看，uni-app 一樣成功的實現了多端編譯；咱們接着更細緻的對比了一下各端運行，發現以下問題：

• 支付寶平臺：下拉刷新、上拉加載無效

以後點擊二級頁、三級頁，沒再發現明顯問題。

從兩個項目的實際運行來看，uni-app的跨端效果更好（其實不止對比了官方demo，咱們本身也寫了小demo），特別是在H5平臺相比taro要完善很多。

另外，在進行兩個框架的發行編譯時，咱們還發現了一個差別點：

• taro 的 dist 目錄下不區分編譯平臺，同一時間僅可編譯到一個平臺，不支持多個平臺對比查看運行效果；
• uni-app 的 dist 目錄區分編譯平臺，故支持同時編譯到多個平臺，可同時對比查看不一樣平臺運行效果，這個體驗是不錯的，更有跨端開發的感受 另外uni-app的條件編譯比較完善，這個在處理平臺差別時頗有用。

案例對比

兩個框架都在官網放上了衆多案例，只是taro案例清一色是微信小程序，沒看到其餘端，難道你們使用taro，只是爲了用react開發微信小程序，不須要跨端？

uni-app的案例什麼平臺都有，不少App作了多個平臺。提及來咱們領導還問過跨iOS、Android App的事情，不過目前另有原生團隊，咱們也只是作個備份調研。最終仍是決定先把前端的技術統一了，穩定後再考慮App是否也遷移到這類框架下。

綜合比較，uni-app跨端質量更好，真實跨端案例也更多。

運行性能

咱們在網上查閱了一些文章，有人認爲taro的運行性能好於mpvue，而uni-app集成了mpvue，這個性能問題就得重點關注了。

不論是taro仍是uni-app，setData的優化都是小程序性能優化中最爲重要之事，且優化主要有兩個方向：

• 儘量減小setData調用的頻次
• 儘量減小單次setData傳輸的數據

而後在調研中發現，uni-app其實還集成了另外一個前述參選的框架megalo（怎麼都被它揉進去了）

前面調研時知道megalo是作了差量數據更新的，那就應該問題不大。

咱們本身動手寫了一個長列表測試，分別寫了taro版、uni-app版、原生小程序版，前幾頁數據滾動時差很少，七、8頁過去發現uni-app加載新頁面時有變慢的感受。 推測uni-app的長列表沒有recycle機制，花了點時間把demo改進了下，滾動下面時把前面幾頁的數據幹掉，而後再滾動就感覺不到流暢度的差異了。

總結：taro在性能優化上作的更細緻，使用uni-app須要本身注意代碼優化。

開發體驗

taro 和 uni-app 的環境搭建及項目建立、運行編譯都比較簡單。

taro的安裝及使用：

# 全局安裝 @tarojs/cli
$ npm install -g @tarojs/cli
# 建立 taro 項目
$ taro init myApp
# 進入項目目錄
$ cd myApp
# 運行到微信小程序，調試模式
$ npm run dev:weapp
# 發行到微信小程序
$ npm run build:weapp
複製代碼

uni-app的安裝及使用：

# 全局安裝 vue-cli
$ npm install -g @vue/cli
# 建立uni-app項目
$ vue create -p dcloudio/uni-preset-vue my-project
# 進入項目目錄
$ cd my-project
# 運行到微信小程序，調試模式
$ npm run dev:mp-weixin
# 發行到微信小程序
$ npm run build:mp-weixin
複製代碼

開發流程方面，taro和uni-app均是以微信小程序爲基礎，也都針對小程序的開發弊端，提供了更優秀的體驗，好比：

• 均支持使用 npm/yarn 安裝管理第三方依賴
• 均支持使用 ES6 甚至更新的ES規範
• 均支持使用 less/scss/ts 等預編譯器
• 均支持進行應用狀態管理，taro 支持 Redux/Mobx，uni-app 支持 vuex

開發工具方面，taro官方未特別推薦IDE，但提供了vscode支持的d.ts； uni-app推薦的開發工具是他自家的HBuilderX，用它能夠不配環境，開箱即用； hbuilder之前接觸過，當時沒深研究，新版還挺讓我意外，真沒想到國人的開發工具能夠作到這樣，尤爲是他家的markdown支持真心不錯，因而本文就是在hbuilder裏寫的（已經有情感分了哈哈）。

總結：兩個框架都支持現代前端開發流程。hbuilder對uni-app提供了優化定製，但對不熟悉的開發者有必定適應成本。另外hbuilder自帶一個編譯器，和cli裝在項目下的編譯器是2個，這個坑很多新人要注意別踩。

社區生態

學習交流

Taro經過Github Issues+微信羣方式交流，微信羣活躍，貢獻代碼的人也多。

uni-app有專門的論壇，還有視頻教程，QQ羣微信羣都活躍。

另外文檔角度，uni-app的文檔比taro要完善，數了數交流羣的數量，也是uni-app多很多。

生態

taro官方發佈了taro-ui庫，awesome裏三方組件不太多。

uni-app官方發佈了uni-ui庫，還有個插件市場，裏面輪子不少，作業務應該能夠很快拼輪子作出來。

基於公司業務及團隊人員技能考慮

櫥窗裏的衣服再漂亮，適合本身的纔有用，開發框架亦是如此。

咱們根據業務需求及團隊成員現狀，造成以下對比：

• 如何在有限前端團隊人數下搞定更多平臺，是咱們的首要考慮，咱們可不想踩太多坑致使任務完不成，跨端方面uni-app更成熟；
• 團隊裏熟悉vue技術棧的同窗多一點，全員培訓react的風險仍是略高，使用uni-app內部培訓時間短、風險低。

所以，咱們團隊最後決定使用uni-app做爲新項目的開發框架。

但挺誠心感謝其餘開源框架的做者的，各位大牛的無私奉獻，讓咱們能夠節省這麼多人力，拜謝！ 喜歡taro的朋友也莫噴我，你們各有所好，react和vue誰更好之類的罵戰就不要繼續延續到這裏了。

接下來確定會有不少uni-app的坑，等着咱們去跳，但我等猿類的宿命就是不斷跳坑、爬坑ㄟ( ▔, ▔ )ㄏ，待咱們項目結束，再寫一篇《uni-app爬坑血淚史》分享給你們。

============end============

沒想到今天正好在掘金看到uni-app的廣告了^_^