公司新產品要求發布到各家小程序，最近研究對比了社區主流的幾家小程序開發框架，獨坑不如拉人眾坑，分享給各位，歡迎和我一起入坑:)
背景
最近老板不知怎的很重視各種小程序平臺，感覺要靠小程序完成今年大半kpi。。。
產品和運營自然找我們要方案，一方面要快速鋪開各種小程序，另一頭hr又不給前端團隊加headcount，我只能
目前幾桿槍，主要在微信和H5上，若按照各家規范進行原生小程序開發，肯定是不夠的；
所幸業內有人在做跨各種小程序的框架，趁機研究一番，看看到底做的怎么樣。
可選的小程序框架
我們主要分析了如下小程序開發框架（應該差不多全了），主要包括：
| 框架 | 技術棧 | 案例 | 微信小程序 | 支付寶小程序 | 百度小程序 | 頭條小程序 | H5 | App |
|---|---|---|---|---|---|---|---|---|
| Taro | React | 豐富 | ? | ? | ? | ? | ? | ? |
| 娜娜奇 | React | 少 | ? | ?? | ?? | ?? | ?? | ? |
| wepy | Vue | 豐富 | ? | ? | ? | ? | ? | ? |
| mpvue | Vue | 豐富 | ? | ? | ? | ? | ?? | ? |
| uni-app | Vue | 豐富 | ? | ?? | ?? | ? | ?? | ? |
| megalo | Vue | 少 | ? | ?? | ?? | ? | ? | ? |
| OKAM | Vue | 少 | ? | ? | ? | ? | ? | ? |
| Mpx | Vue | 少 | ? | ? | ? | ? | ? | ? |
我們的篩選權重：
- 跨端：權重最高，畢竟第一訴求就是覆蓋各家小程序，故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版、原生小程序版，前幾頁數據滾動時差不多，7、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爬坑血淚史》分享給大家。
