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

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

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

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

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

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

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

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

怕性能不如原生WXML

怕框架不成熟，跳到坑里

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

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

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

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

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

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

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

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

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

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

2、性能體驗(yàn)

開發(fā)者常問的第二個(gè)問題：三方框架，內(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)比微信原生開發(fā)更好。

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

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

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

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

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ī)范約束，大幅提升了小程序的整體性能體驗(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í)際上通過兩邊提供的 evaluateJavascript 所實(shí)現(xiàn)。

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