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

背景

最近老板不知怎的很重視各種小程序平臺(tái)，感覺(jué)要靠小程序完成今年大半kpi。。。
產(chǎn)品和運(yùn)營(yíng)自然找我們要方案，一方面要快速鋪開(kāi)各種小程序，另一頭hr又不給前端團(tuán)隊(duì)加headcount，我只能
目前幾桿槍?zhuān)饕谖⑿藕虷5上，若按照各家規(guī)范進(jìn)行原生小程序開(kāi)發(fā)，肯定是不夠的；
所幸業(yè)內(nèi)有人在做跨各種小程序的框架，趁機(jī)研究一番，看看到底做的怎么樣。

可選的小程序框架

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

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

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

最后，我們決定把taro、uni-app兩個(gè)框架作為候選，做進(jìn)一步對(duì)比。
uni-app其實(shí)內(nèi)置了mpvue，感覺(jué)是個(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è)框架大概摸到門(mén)道，理了下對(duì)比思路，還是認(rèn)真從如下幾個(gè)維度比較下taro、uni-app兩個(gè)框架：

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

跨端

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

雙方都宣傳能支持微信、百度、支付寶、今日頭條等小程序，H5，以及iOS和Android的App?？雌饋?lái)都不錯(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

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

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

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

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

taro-zhihu-02.png

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

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

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

uni-picture-01.png

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

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

之后點(diǎn)擊二級(jí)頁(yè)、三級(jí)頁(yè)，沒(méi)再發(fā)現(xiàn)明顯問(wèn)題。

uni-picture-02.png

從兩個(gè)項(xiàng)目的實(shí)際運(yùn)行來(lái)看，uni-app的跨端效果更好（其實(shí)不止對(duì)比了官方demo，我們自己也寫(xiě)了小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ò)的，更有跨端開(kāi)發(fā)的感覺(jué)
  另外uni-app的條件編譯比較完善，這個(gè)在處理平臺(tái)差異時(shí)很有用。

案例對(duì)比

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

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

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

運(yùn)行性能

我們?cè)诰W(wǎng)上查閱了一些文章，有人認(rèn)為taro的運(yùn)行性能好于mpvue，而uni-app集成了mpvue，這個(gè)性能問(wèn)題就得重點(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)該問(wèn)題不大。

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

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

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

taro 和 uni-app 的環(huán)境搭建及項(xiàng)目創(chuàng)建、運(yùn)行編譯都比較簡(jiǎ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

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

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

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

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

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

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

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

uni-app有專(zhuān)門(mén)的論壇，還有視頻教程，QQ群微信群都活躍。

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

生態(tài)

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

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

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

櫥窗里的衣服再漂亮，適合自己的才有用，開(kāi)發(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)目的開(kāi)發(fā)框架。

但挺誠(chéng)心感謝其他開(kāi)源框架的作者的，各位大牛的無(wú)私奉獻(xiàn)，讓我們可以節(jié)省這么多人力，拜謝！
喜歡taro的朋友也莫噴我，大家各有所好，react和vue誰(shuí)更好之類(lèi)的罵戰(zhàn)就不要繼續(xù)延續(xù)到這里了。

接下來(lái)肯定會(huì)有很多uni-app的坑，等著我們?nèi)ヌ?，但我等猿?lèi)的宿命就是不斷跳坑、爬坑ㄟ( ▔, ▔ )ㄏ，待我們項(xiàng)目結(jié)束，再寫(xiě)一篇《uni-app爬坑血淚史》分享給大家。