真實(shí)測(cè)評(píng)：用uni-app開(kāi)發(fā)小程序，比原生開(kāi)發(fā)好在哪里？

小程序原生開(kāi)發(fā)有不少槽點(diǎn)：

原生wxml開(kāi)發(fā)對(duì)Node、預(yù)編譯器、webpack支持不好，影響開(kāi)發(fā)效率和工程構(gòu)建流程。所以大公司都會(huì)用框架開(kāi)發(fā)

微信定義的這套語(yǔ)法，wxml、wxs，以及wx:if等語(yǔ)法，私有化太強(qiáng)。不如正經(jīng)學(xué)vue，學(xué)會(huì)了全端通用，而不是只為微信小程序

vue生態(tài)里有太多周邊工具，可以提高開(kāi)發(fā)效率，比如ide、校驗(yàn)器、三方庫(kù)。。。而微信的開(kāi)發(fā)者工具和專(zhuān)業(yè)編輯器相比實(shí)在不好用，個(gè)性化設(shè)置也非常少

作為前端工程師，除了微信小程序，還要開(kāi)發(fā)web、其他小程序甚至App，人們不喜歡來(lái)回切換開(kāi)發(fā)工具和變更語(yǔ)法思考方式。

uni-app自然可以解決這些問(wèn)題，但開(kāi)發(fā)者又經(jīng)常有些顧慮：

怕使用uni-app后，微信小程序里有的功能無(wú)法實(shí)現(xiàn)，受制于uni-app的更新

怕性能不如原生WXML

怕框架不成熟，跳到坑里

擔(dān)心社區(qū)生態(tài)不完善

本文從開(kāi)發(fā)者關(guān)心的功能、性能、學(xué)習(xí)門(mén)檻、開(kāi)發(fā)體驗(yàn)、生態(tài)、可擴(kuò)展性等維度，逐個(gè)分析對(duì)比，給予說(shuō)明。

1、功能實(shí)現(xiàn)

開(kāi)發(fā)者最常問(wèn)的問(wèn)題：如果小程序迭代升級(jí)，新增了一批API，但uni-app框架未及時(shí)更新，該怎么辦?

其實(shí)這是誤解，uni-app不限制底層API 調(diào)用;在小程序端，uni-app支持直接編寫(xiě)微信原生代碼。

類(lèi)比傳統(tǒng)web開(kāi)發(fā)，如果vue、react等框架的使用，造成開(kāi)發(fā)者無(wú)法操作瀏覽器提供的所有api，那這樣的框架肯定是不成熟的。小程序開(kāi)發(fā)也一樣，uni-app框架中，同樣可調(diào)用微信提供的所有原生代碼。

故如果存在某些API(平臺(tái)特有或新增API)，uni-app尚未封裝，開(kāi)發(fā)者可直接在uni-app中編寫(xiě)微信原生API，即wx.開(kāi)頭的各種API。

舉個(gè)例子，目前uni-app雖然尚未封裝跨平臺(tái)的廣告(ad)組件，但開(kāi)發(fā)者在小程序端依然可以使用微信組件來(lái)展現(xiàn)廣告，代碼示例如下：

包括微信小程序自定義組件、WXS、云開(kāi)發(fā)這些復(fù)雜用法，在uni-app里一樣全面支持。

所以，結(jié)論是：使用uni-app框架開(kāi)發(fā)，在功能上和原生小程序開(kāi)發(fā)沒(méi)有區(qū)別，不會(huì)有任何限制。

2、性能體驗(yàn)

開(kāi)發(fā)者常問(wèn)的第二個(gè)問(wèn)題：三方框架，內(nèi)部大多做了層層封裝，這些封裝是否會(huì)增加運(yùn)行負(fù)載，導(dǎo)致性能下降?

同樣是多慮了，uni-app不會(huì)導(dǎo)致性能下載，甚至對(duì)很多環(huán)節(jié)做了自動(dòng)優(yōu)化，很多場(chǎng)景下性能體驗(yàn)比微信原生開(kāi)發(fā)更好。

類(lèi)似使用vue.js開(kāi)發(fā)web，不但不會(huì)造成性能比原生js差，反而由于虛擬dom和差量更新技術(shù)的運(yùn)用，在大多數(shù)場(chǎng)景下，比開(kāi)發(fā)者手動(dòng)寫(xiě)代碼操作dom的性能還好。

小程序中需要頻繁的寫(xiě)setData代碼來(lái)更新數(shù)據(jù)，這里很重要的就是差量數(shù)據(jù)更新。如果不做差量，代碼性能不好，如果每處邏輯都判斷差量數(shù)據(jù)更新，那代碼寫(xiě)起來(lái)太麻煩了。

使用uni-app，底層自動(dòng)差量數(shù)據(jù)更新，簡(jiǎn)單而高性能。

我們從優(yōu)化理論、實(shí)測(cè)數(shù)據(jù)兩個(gè)維度來(lái)仔細(xì)說(shuō)明。

2.1、理論：框架優(yōu)化方案

為提高性能體驗(yàn)，小程序從架構(gòu)設(shè)計(jì)層面做了很多工作：

邏輯層、視圖層分離，避免JS運(yùn)算阻塞視圖渲染

單獨(dú)定義組件標(biāo)簽(wxml)，減少DOM復(fù)雜度

精簡(jiǎn)樣式(wxss)，提升渲染性能

復(fù)雜組件原生化(video/map等)，解決web組件的功能/體驗(yàn)缺失

通過(guò)這些規(guī)范約束，大幅提升了小程序的整體性能體驗(yàn)，但依然存在不少性能坑點(diǎn)，其中以setData最為頻繁普遍。

這里引用微信官方的描述，簡(jiǎn)單介紹一下setData背后的工作原理：

小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨(dú)立的 JavascriptCore 作為運(yùn)行環(huán)境。在架構(gòu)上，WebView 和 JavascriptCore 都是獨(dú)立的模塊，并不具備數(shù)據(jù)直接共享的通道。當(dāng)前，視圖層和邏輯層的數(shù)據(jù)傳輸，實(shí)際上通過(guò)兩邊提供的 evaluateJavascript 所實(shí)現(xiàn)。

為簡(jiǎn)化開(kāi)發(fā)，微信將evaluateJavascript調(diào)用封裝成了setData JS方法，實(shí)現(xiàn)視圖層和邏輯層的數(shù)據(jù)傳輸，數(shù)據(jù)流示意圖如下：