公司新產(chǎn)品要求發(fā)布到各家小程序粘优，最近研究對(duì)比了社區(qū)主流的幾家小程序開發(fā)框架睹栖，獨(dú)坑不如拉人眾坑，分享給各位杨赤，歡迎和我一起入坑:)

背景

最近老板不知怎的很重視各種小程序平臺(tái)敞斋，感覺要靠小程序完成今年大半kpi。疾牲。植捎。
產(chǎn)品和運(yùn)營自然找我們要方案，一方面要快速鋪開各種小程序阳柔，另一頭hr又不給前端團(tuán)隊(duì)加headcount焰枢，我只能
目前幾桿槍，主要在微信和H5上，若按照各家規(guī)范進(jìn)行原生小程序開發(fā)济锄，肯定是不夠的暑椰；
所幸業(yè)內(nèi)有人在做跨各種小程序的框架，趁機(jī)研究一番拟淮，看看到底做的怎么樣干茉。

可選的小程序框架

我們主要分析了如下小程序開發(fā)框架（應(yīng)該差不多全了），主要包括：

我們的篩選權(quán)重：

• 跨端：權(quán)重最高很泊，畢竟第一訴求就是覆蓋各家小程序角虫，故wepy、mpx這種針對(duì)微信小程序的增強(qiáng)型開發(fā)框架首先排除委造，其次mpvue雖支持 H5 平臺(tái)代碼復(fù)用戳鹅，但未跟進(jìn)其它幾家小程序，也放棄昏兆；
• 案例：權(quán)重次之枫虏，案例多說明使用者多，坑應(yīng)該都踩得差不多了爬虱，有坑也應(yīng)該是明坑隶债；案例少的話，就要自己上去踩跑筝，暗坑多少不清楚死讹；從官網(wǎng)公開案例來看，taro曲梗、uni-app公開展示的案例是最多的（mpvue赞警、wepy雖案例也很多，但已被權(quán)重最高的跨端能力給淘汰了）
• 技術(shù)棧：權(quán)重再次之虏两，我們團(tuán)隊(duì)對(duì)于react愧旦、vue技術(shù)棧都有涉及，只是使用深度問題上有差異

最后定罢，我們決定把taro笤虫、uni-app兩個(gè)框架作為候選，做進(jìn)一步對(duì)比引颈。
uni-app其實(shí)內(nèi)置了mpvue耕皮，感覺是個(gè)加強(qiáng)版，拓展到多端了蝙场。
其實(shí)這2個(gè)框架的github star差的有點(diǎn)多凌停，taro遠(yuǎn)超uni-app，但不能根據(jù)這個(gè)直接做決定售滤，對(duì)比報(bào)告還是得做的罚拟，果然最后發(fā)現(xiàn)不能以star取人台诗。

Taro VS uni-app

看了幾天文檔對(duì)2個(gè)框架大概摸到門道，理了下對(duì)比思路赐俗，還是認(rèn)真從如下幾個(gè)維度比較下taro拉队、uni-app兩個(gè)框架：

• 跨端程度：真實(shí)運(yùn)行項(xiàng)目到各平臺(tái)，對(duì)比平臺(tái)差異抹平程度
• 運(yùn)行性能：框架是否帶來了額外的性能開銷阻逮，降低用戶體驗(yàn)
• 開發(fā)體驗(yàn)：是否支持現(xiàn)代開發(fā)流程粱快，是否對(duì)工程師提供高效友好的協(xié)助
• 社區(qū)生態(tài)：社區(qū)是否繁榮，是否有大量可用輪子叔扼？

跨端

數(shù)量對(duì)比

雙方都宣傳能支持微信事哭、百度、支付寶瓜富、今日頭條等小程序鳍咱，H5，以及iOS和Android的App与柑“迹看起來都不錯(cuò)。

質(zhì)量對(duì)比

為驗(yàn)證最終跨端效果价捧，我們分別下載 taro丑念、uni-app的示例項(xiàng)目，體驗(yàn)編譯到不同平臺(tái)的運(yùn)行效果结蟋。

首先選擇 taro 官方賬號(hào)下的知乎小程序示例（github地址）渠欺，運(yùn)行到各端后的效果：

taro-zhihu-01.png

從如上截圖來看，taro成功實(shí)現(xiàn)了多端編譯椎眯；我們接著更細(xì)致的對(duì)比了一下各端運(yùn)行，發(fā)現(xiàn)taro在如下方面存在問題：

• H5端：選項(xiàng)卡高亮狀態(tài)錯(cuò)誤胳岂，如上圖编整，內(nèi)容顯示的是第二個(gè)選項(xiàng)卡，但底部高亮的依然是第一個(gè)選項(xiàng)卡
• H5端：下拉刷新不生效
• 百度小程序端：下拉刷新觸發(fā)后乳丰，回彈失斦撇狻；若頁面同時(shí)存在下拉刷新和上拉加載产园，則和頁面滾動(dòng)沖突

之后點(diǎn)擊二級(jí)頁、三級(jí)頁，發(fā)現(xiàn)H5端的其它問題：

• 所有頁面缺少導(dǎo)航欄沉噩，小程序端導(dǎo)航欄是原生控件揭糕，taro在H5端未對(duì)應(yīng)生成
• 跳轉(zhuǎn)到二級(jí)頁后，底部選項(xiàng)卡依然不消失屎即，難道所有頁面都要包含選項(xiàng)卡庙睡？如下圖所示事富，不合理

taro-zhihu-02.png

針對(duì)這些問題，我們復(fù)查了一遍taro官網(wǎng)乘陪，官網(wǎng)倒是明確說明部分事件函數(shù)在H5端不生效统台，主要包括：

不過進(jìn)一步仔細(xì)發(fā)現(xiàn)啡邑，taro文檔里大量存在只有微信平臺(tái)打勾的情況贱勃，H5和App側(cè)大量的X。這說明跨其他平臺(tái)很難平滑遷移谤逼。

接著運(yùn)行uni-app示例項(xiàng)目贵扰，選擇官方賬號(hào)下的看圖App模板（github地址）測(cè)試，運(yùn)行到各端后效果：

uni-picture-01.png

從上圖來看森缠，uni-app 同樣成功的實(shí)現(xiàn)了多端編譯拔鹰；我們接著更細(xì)致的對(duì)比了一下各端運(yùn)行，發(fā)現(xiàn)如下問題：

• 支付寶平臺(tái)：下拉刷新贵涵、上拉加載無效

之后點(diǎn)擊二級(jí)頁列肢、三級(jí)頁，沒再發(fā)現(xiàn)明顯問題宾茂。

uni-picture-02.png

從兩個(gè)項(xiàng)目的實(shí)際運(yùn)行來看瓷马，uni-app的跨端效果更好（其實(shí)不止對(duì)比了官方demo，我們自己也寫了小demo）跨晴，特別是在H5平臺(tái)相比taro要完善不少欧聘。

另外，在進(jìn)行兩個(gè)框架的發(fā)行編譯時(shí)端盆，我們還發(fā)現(xiàn)了一個(gè)差異點(diǎn)：

• taro 的 dist 目錄下不區(qū)分編譯平臺(tái)怀骤，同一時(shí)間僅可編譯到一個(gè)平臺(tái)，不支持多個(gè)平臺(tái)對(duì)比查看運(yùn)行效果焕妙；
• uni-app 的 dist 目錄區(qū)分編譯平臺(tái)蒋伦，故支持同時(shí)編譯到多個(gè)平臺(tái)，可同時(shí)對(duì)比查看不同平臺(tái)運(yùn)行效果焚鹊，這個(gè)體驗(yàn)是不錯(cuò)的痕届，更有跨端開發(fā)的感覺
  另外uni-app的條件編譯比較完善，這個(gè)在處理平臺(tái)差異時(shí)很有用末患。

案例對(duì)比

兩個(gè)框架都在官網(wǎng)放上了眾多案例研叫，只是taro案例清一色是微信小程序，沒看到其他端璧针，難道大家使用taro嚷炉，只是為了用react開發(fā)微信小程序，不需要跨端陈莽？

uni-app的案例什么平臺(tái)都有渤昌，很多App做了多個(gè)平臺(tái)虽抄。說起來我們領(lǐng)導(dǎo)還問過跨iOS、Android App的事情独柑，不過目前另有原生團(tuán)隊(duì)迈窟，我們也只是做個(gè)備份調(diào)研。最終還是決定先把前端的技術(shù)統(tǒng)一了忌栅，穩(wěn)定后再考慮App是否也遷移到這類框架下车酣。

綜合比較，uni-app跨端質(zhì)量更好索绪，真實(shí)跨端案例也更多湖员。

運(yùn)行性能

我們?cè)诰W(wǎng)上查閱了一些文章，有人認(rèn)為taro的運(yùn)行性能好于mpvue瑞驱，而uni-app集成了mpvue娘摔，這個(gè)性能問題就得重點(diǎn)關(guān)注了。

不管是taro還是uni-app唤反，setData的優(yōu)化都是小程序性能優(yōu)化中最為重要之事凳寺，且優(yōu)化主要有兩個(gè)方向：

• 盡可能減少setData調(diào)用的頻次
• 盡可能減少單次setData傳輸?shù)臄?shù)據(jù)

然后在調(diào)研中發(fā)現(xiàn)，uni-app其實(shí)還集成了另一個(gè)前述參選的框架megalo（怎么都被它揉進(jìn)去了）

前面調(diào)研時(shí)知道megalo是做了差量數(shù)據(jù)更新的彤侍，那就應(yīng)該問題不大肠缨。

我們自己動(dòng)手寫了一個(gè)長列表測(cè)試，分別寫了taro版盏阶、uni-app版晒奕、原生小程序版，前幾頁數(shù)據(jù)滾動(dòng)時(shí)差不多名斟，7脑慧、8頁過去發(fā)現(xiàn)uni-app加載新頁面時(shí)有變慢的感覺。
推測(cè)uni-app的長列表沒有recycle機(jī)制砰盐，花了點(diǎn)時(shí)間把demo改進(jìn)了下漾橙，滾動(dòng)下面時(shí)把前面幾頁的數(shù)據(jù)干掉，然后再滾動(dòng)就感受不到流暢度的差別了楞卡。

總結(jié)：taro在性能優(yōu)化上做的更細(xì)致，使用uni-app需要自己注意代碼優(yōu)化脾歇。

開發(fā)體驗(yàn)

taro 和 uni-app 的環(huán)境搭建及項(xiàng)目創(chuàng)建蒋腮、運(yùn)行編譯都比較簡單。

taro的安裝及使用：

# 全局安裝 @tarojs/cli
$ npm install -g @tarojs/cli
# 創(chuàng)建 taro 項(xiàng)目
$ taro init myApp
# 進(jìn)入項(xiàng)目目錄
$ cd myApp
# 運(yùn)行到微信小程序藕各，調(diào)試模式
$ npm run dev:weapp
# 發(fā)行到微信小程序
$ npm run build:weapp

uni-app的安裝及使用：

# 全局安裝 vue-cli
$ npm install -g @vue/cli
# 創(chuàng)建uni-app項(xiàng)目
$ vue create -p dcloudio/uni-preset-vue my-project
# 進(jìn)入項(xiàng)目目錄
$ cd my-project
# 運(yùn)行到微信小程序池摧，調(diào)試模式
$ npm run dev:mp-weixin
# 發(fā)行到微信小程序
$ npm run build:mp-weixin

開發(fā)流程方面，taro和uni-app均是以微信小程序?yàn)榛A(chǔ)激况，也都針對(duì)小程序的開發(fā)弊端作彤，提供了更優(yōu)秀的體驗(yàn)膘魄，比如：

• 均支持使用 npm/yarn 安裝管理第三方依賴
• 均支持使用 ES6 甚至更新的ES規(guī)范
• 均支持使用 less/scss/ts 等預(yù)編譯器
• 均支持進(jìn)行應(yīng)用狀態(tài)管理，taro 支持 Redux/Mobx竭讳，uni-app 支持 vuex

開發(fā)工具方面创葡，taro官方未特別推薦IDE，但提供了vscode支持的d.ts绢慢；
uni-app推薦的開發(fā)工具是他自家的HBuilderX灿渴，用它可以不配環(huán)境，開箱即用胰舆；
hbuilder以前接觸過骚露，當(dāng)時(shí)沒深研究，新版還挺讓我意外缚窿，真沒想到國人的開發(fā)工具可以做到這樣棘幸，尤其是他家的markdown支持真心不錯(cuò)，于是本文就是在hbuilder里寫的（已經(jīng)有情感分了哈哈）倦零。

總結(jié)：兩個(gè)框架都支持現(xiàn)代前端開發(fā)流程误续。hbuilder對(duì)uni-app提供了優(yōu)化定制，但對(duì)不熟悉的開發(fā)者有一定適應(yīng)成本光绕。另外hbuilder自帶一個(gè)編譯器女嘲，和cli裝在項(xiàng)目下的編譯器是2個(gè)，這個(gè)坑不少新人要注意別踩诞帐。

社區(qū)生態(tài)

學(xué)習(xí)交流

Taro通過Github Issues+微信群方式交流欣尼，微信群活躍，貢獻(xiàn)代碼的人也多停蕉。

uni-app有專門的論壇愕鼓，還有視頻教程，QQ群微信群都活躍慧起。

另外文檔角度菇晃，uni-app的文檔比taro要完善，數(shù)了數(shù)交流群的數(shù)量蚓挤，也是uni-app多不少磺送。

生態(tài)

taro官方發(fā)布了taro-ui庫，awesome里三方組件不太多灿意。

uni-app官方發(fā)布了uni-ui庫估灿，還有個(gè)插件市場(chǎng)，里面輪子很多缤剧，做業(yè)務(wù)應(yīng)該可以很快拼輪子做出來馅袁。

基于公司業(yè)務(wù)及團(tuán)隊(duì)人員技能考慮

櫥窗里的衣服再漂亮，適合自己的才有用荒辕，開發(fā)框架亦是如此汗销。

我們根據(jù)業(yè)務(wù)需求及團(tuán)隊(duì)成員現(xiàn)狀犹褒，形成如下對(duì)比：

• 如何在有限前端團(tuán)隊(duì)人數(shù)下搞定更多平臺(tái)，是我們的首要考慮弛针，我們可不想踩太多坑導(dǎo)致任務(wù)完不成叠骑，跨端方面uni-app更成熟；
• 團(tuán)隊(duì)里熟悉vue技術(shù)棧的同學(xué)多一點(diǎn)钦奋，全員培訓(xùn)react的風(fēng)險(xiǎn)還是略高座云，使用uni-app內(nèi)部培訓(xùn)時(shí)間短、風(fēng)險(xiǎn)低付材。

因此朦拖，我們團(tuán)隊(duì)最后決定使用uni-app作為新項(xiàng)目的開發(fā)框架。

但挺誠心感謝其他開源框架的作者的厌衔，各位大牛的無私奉獻(xiàn)璧帝，讓我們可以節(jié)省這么多人力，拜謝富寿！
喜歡taro的朋友也莫噴我睬隶，大家各有所好，react和vue誰更好之類的罵戰(zhàn)就不要繼續(xù)延續(xù)到這里了页徐。

接下來肯定會(huì)有很多uni-app的坑苏潜，等著我們?nèi)ヌ业仍愁惖乃廾褪遣粩嗵颖溆隆⑴揽莹? ▔, ▔ )ㄏ恤左，待我們項(xiàng)目結(jié)束，再寫一篇《uni-app爬坑血淚史》分享給大家搀绣。