Taro 和 uni-app選型對比

一.Taro和uni-app的介紹

 1.taro的介紹

   taro是多端統一開發框架，支持用 React 的開發方式編寫一次代碼，生成能運行在微信/百度/支付寶/字節跳動小程序、H五、React Native 等的應用.

  詳細j介紹見官網:https://nervjs.github.io/taro/

2.uni-app的介紹

 uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H五、小程序等多個平臺。

  詳細介紹見官方文檔:https://uniapp.dcloud.io/

 

二.Taro和ni-app的特色

  官網介紹：

  1.官網介紹taro的特色：

  （1）多端運行：一鍵生成能夠在微信小程序/H5/ReactNative等端運行的代碼。

  （2）語法風格：採用React語法標準，支持JSX書寫，讓代碼更具表現性。

 （3）組件化：支持組件化開發，讓代碼能夠複用，讓功能開發更加清晰。

 （4）TypeScript：全面支持TypeScript，提供更強大的生產力。

 （5）開發體驗：貼心的代碼智能提示,實時代碼檢查,讓開發效率大幅提高。

（6）現代開發流程：配套的開發工具Taro CLI讓開發流程自動化，一切都從一行命令開始

 2.官網介紹uni-app的特色：

（1）跨端數量更多；一套代碼，能夠發佈到IOS，Android，小程序，H5等多個平臺。

（2）平臺能力不受限：在跨端的同時，經過推薦編譯+平臺特有API調用，能夠優雅的爲某平臺寫個性化代碼，調用專有能力而不影響其餘平臺；支持原生代碼編寫和原生sdk生成。

（3）性能體驗優秀：體驗更好的Hybrid框架，加載新頁面速度更快

（4）周邊生態豐富：支持NPM包管理，兼容微信小程序自定義組件及JS，SDK，支持mpvue項目及組件，APP端支持和原生混合編碼；至關於微信小程序中豐富的三方sdk克直接用於跨平臺開發。

（5）學習成本低：基於通前端技術棧，採用vue語法+微信小程序api,無額外學習成本。

（6）開發成本低：人力成本大幅度節省，招聘，人力，管理，研發，測試各方面成本大幅度降低；HbuildX是高效開發利器，熟練掌握後研發效果至少翻倍（即使值開發一個平臺）。

三.二者的對比

   1.共同點:

      （1）二者都是用主流框架開發的

      （2）都能支持微信、百度、支付寶、今日頭條等小程序，H5，以及iOS和Android的App

      （3）均支持使用 npm/yarn 安裝管理第三方依賴

      （4）均支持使用 ES6 甚至更新的ES規範

      （5）均支持使用 less/scss/ts 等預編譯器

       （6）均支持進行應用狀態管理，taro 支持 Redux/Mobx，uni-app 支持 vuex

    2.維度考量:

• 技術棧：使用的技術框架，對比技術上的差別
• 開發工具:適合開發人員的工具，能爲開發帶來錦上添花的效果

• 跨端程度：真實運行項目到各平臺，對比平臺差別抹平程度
• 運行性能：框架是否帶來了額外的性能開銷，下降用戶體驗
• 開發體驗：是否支持現代開發流程，是否對工程師提供高效友好的協助
• 社區生態：社區是否繁榮，是否有大量可用輪子？
• 質量對比:經過一些案例進一步瞭解二者開發功能上的優劣

特色描述	taro	uni-app
技術棧	使用react開發的框架	使用vue開發的框架
開發工具	taro官方未特別推薦IDE，但提供了vscode 支持的d.ts。也能夠根據自身狀況選擇本身習慣的 開發工具開發，能夠提升編譯代碼上的開發效率 （開發工具自由）	uni-app推薦的開發工具是他自家的HBuilderX，用它能夠不配環境，開箱即用。hbuilder對uni-app提供了優化定製，但對不熟悉的開發者有必定適應成本。另外hbuilder自帶一個編譯器，和cli裝在項目下的編譯器是2個，這個坑很多新人要注意別踩。（開發工具侷限，只能用Hbuild工具開發）
跨端程度	微信、支付寶、百度、頭條、H五、App多平臺	微信、支付寶、百度、頭條、H五、App多平臺（官網特別強調支持IOS，Android）
運行性能	taro在性能優化上作的更細緻	uni-app須要本身注意代碼優化
開發體驗	taro的安裝及使用：	uni-app的安裝及使用：
社區生態	1.Taro經過Github Issues+微信羣方式交流，微信羣活躍，貢獻代碼的人也多。 2.taro官方發佈了taro-ui庫，awesome裏三方組件不太多。 3.github 上taro的star遠超uni-app	1.uni-app有專門的論壇，還有視頻教程，QQ羣微信羣都活躍。 2.uni-app官方發佈了uni-ui庫，還有個插件市場，裏面輪子不少，作業務應該能夠很快拼輪子作出來。 3.uni-app的文檔比taro要完善，數了數交流羣的數量，也是uni-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的跨端效果更好，特別是在H5平臺相比taro要完善很多。 另外，在進行兩個框架的發行編譯時，咱們還發現了一個差別點： taro 的 dist 目錄下不區分編譯平臺，同一時間僅可編譯到一個平臺，不支持多個平臺對比查看運行效果； uni-app 的 dist 目錄區分編譯平臺，故支持同時編譯到多個平臺，可同時對比查看不一樣平臺運行效果，這個體驗是不錯的，更有跨端開發的感受 另外uni-app的條件編譯比較完善，這個在處理平臺差別時頗有用。
案例對比	兩個框架都在官網放上了衆多案例，只是taro案例清一色是微信小程序，沒看到其餘端	uni-app的案例什麼平臺都有，不少App作了多個平臺（特別強調跨iOS，Android）

四.總結

綜合考量，決定選擇uni-app,具體緣由以下:

1.uni-app在不一樣平臺的運行效果更好；

2.uni-app有它自帶的IDE,可以幫助咱們快速構建項目和打包項目；

3.如何在有限前端團隊人數下搞定更多平臺，是咱們的首要考慮，沒有人想踩太多坑致使任務完不成，而且跨端方面uni-app更成熟；

4。學習uni-app（vue）的學習成本更低，開發時間和風險更低。