如今隨著移動互聯(lián)網(wǎng)的群魔亂舞，越來越多的“移動端”如雨后春筍快速發(fā)展，各種小程序技術(shù)方案發(fā)展迅猛。不僅開發(fā)周期長而且人員成本高，十分不利于團(tuán)隊成員形成合力提高開發(fā)效率。低效的工作直接影響到新品的迭代更新，在這樣的形勢下，跨端技術(shù)受到越來越收到青睞。

        跨端方案進(jìn)行開發(fā)必然會調(diào)整原有平臺的技術(shù)成分，我們在選擇跨端方案不能只依賴于某幾項指標(biāo)，比如編程語言、性能等，更多的還要考慮學(xué)習(xí)、遷移成本，開發(fā)效率和社區(qū)支持多種指標(biāo)，適合公司產(chǎn)品和業(yè)務(wù)需要的架構(gòu)才是*好的架構(gòu)。

        目前主流的跨端方案主要分為三種：一種是使用webview方案，代表技術(shù)是Hybird混合開發(fā)；一種是將JavaScriptCore引擎作為虛擬機(jī)的方案，代表框架是React Native；另一種是使用自研的dart虛擬機(jī)方案，代表框架是Flutter。

上海小程序開發(fā)，公眾號開發(fā)，就選上海詠熠科技。上海詠熠科技是上海小程序開發(fā)靠譜的公司。

（一）、Webview跨平臺方案 

(1)Hybrid App開發(fā)

        Hybrid混合開發(fā)是一種取長補(bǔ)短的開發(fā)模式，原生代碼利用WebView為H5提供容器，并配合 JSBridge 提供了原生與JS之間的通信鏈路，基于這個通信基礎(chǔ)，原生可以暴露出一些標(biāo)準(zhǔn)服務(wù)API提供給JS調(diào)用，同樣的JS也可以封裝一些基礎(chǔ)API給原生調(diào)用。目前我們采用的就是這種交互方式，還有京東、淘寶、今日頭條等APP有部分模塊也是基于混合開發(fā)模式。

優(yōu)點：

①開發(fā)效率高，節(jié)約時間。同一套代碼Android和IOS基本上都可使用；

②更新和部署比較方便，每次升級版本只需要在服務(wù)器端升級即可，不需要上傳到App Store進(jìn)行審核。

③代碼維護(hù)方便、版本更新快，節(jié)省產(chǎn)品、人力成本；

缺點：

①加載緩慢、網(wǎng)絡(luò)要求高，混合APP數(shù)據(jù)需要全部從服務(wù)器調(diào)取，每個頁面都需要重新下載，因此打開速度慢，網(wǎng)絡(luò)占用高，緩沖時間長，用戶體驗稍差。

②兼容性差，手機(jī)系統(tǒng)更新?lián)Q代快，需要做比較多的兼容性方案。

③Hybrid App只是提供了一個殼，基座還是需要ios和安卓同事開發(fā)和維護(hù)的。

(2)Uni-app

        Uni-app是一個開放式跨端跨框架解決方案，使用 Vue框架來開發(fā)小程序、H5、APP等應(yīng)用。uni-app支持webview與weex雙重渲染，h5頁面使用webview渲染，原生部分采用nvue wewx進(jìn)行渲染，相當(dāng)于把h5的技術(shù)與rn的技術(shù)做了一個結(jié)合。由于原生是基于weex的，然后下一層才是通信bridge。多了一層就多了一份性能問題，所以性能方面會比ReactNative略差一點。

優(yōu)點：

①開發(fā)成本、門檻低，開發(fā)者編寫一套vue.js代碼，可發(fā)布到IOS、Android、h5、小程序等多個平臺。

②社區(qū)活躍，生態(tài)好，組件豐富，社區(qū)有大量的組件提供使用。

③支持熱更新，APP*新修改可以動態(tài)發(fā)布，而不需要提交APP市場審核。

缺點：

①nvue原生開發(fā)有局限性，特別是樣式方面限制比較嚴(yán)重，定制化程度低。

②部分組件可能需要收費(fèi)，云打包超過次數(shù)需要收費(fèi)。

③文檔松散，api眾多。

④主打快速，生成多端代碼，許多中小公司在用。

（二）、React Native跨平臺方案

（1）react native

       react native是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架。RN使用JavaScript語言類似于HTML的JSX，JSX 源碼通過 React Native 框架編譯后，與Native原生的UI組件進(jìn)行映射，用原生代替DOM元素來渲染，在UI渲染上非常接近Native App。 

（2）京東taro

      Taro 是一個開放式跨端跨框架解決方案，支持使用 React、Vue等框架來開發(fā)小程序、H5、APP等應(yīng)用。APP開發(fā)基于 Facebook的開源項目React Native，開發(fā)語言可以使用vue,但*終生產(chǎn)的代碼是react。開發(fā)中不僅需要代碼調(diào)試而且還有底層交互，所以使用taro需要具備react、原生技能。

優(yōu)點：

①只需要同一套javascript代碼就可以運(yùn)行于ios和android 兩個平臺，在開發(fā)、測試和維護(hù)的成本上要低很多。

②采用熱加載的即時編譯方式，使得App UI的開發(fā)體驗得到改善，幾乎做到了和網(wǎng)頁開發(fā)一樣隨時更改，隨時可見的效果。

③可以通過 JSBundle 即時更新 App。相比原來冗長的審核和上傳過程，發(fā)布和測試新功能的效率大幅提高。

④擺脫了WebView的交互和性能問題，同時可以直接套用網(wǎng)頁開發(fā)中的css布局機(jī)制。

缺點：

①在動畫效率和性能的支持還存在一些問題，性能上不如原生Api。

②官方文檔中可以發(fā)現(xiàn)仍有部分組件和API都區(qū)分了Android和IOS 版本,即便是共享組件,也會有平臺獨(dú)享的函數(shù)。也就是說仍不能真正實現(xiàn)嚴(yán)格意義上的“一套代碼，多平臺使用”。

③缺乏很多基本控件，第三方開源質(zhì)量良莠不齊。

④需要具備react、原生開發(fā)能力。

(三)、Flutter

        Flutter是谷歌在2018年發(fā)布的移動UI框架，可以快速在APP、web上構(gòu)建高質(zhì)量的原生用戶界面。它*大的特點是渲染不是基于操作系統(tǒng)的組件，而是直接基于繪圖庫（skia）來繪制的，這樣做到了渲染的跨端。邏輯的跨端也不是基于js引擎，而是自研的dart虛擬機(jī)來跨端，通過dart語言來寫邏輯，支持AOT和JIT兩種編譯方式，而沒有采用HTML/CSS/JavaScript組合方式開發(fā)，在執(zhí)行效率上明顯高于React Native所使用的JavaScriptCore。

優(yōu)點：

①UI性能可以比肩原生，編譯出來的程序可以達(dá)到60bps的高性能。

②Dart在 JIT模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當(dāng)以 AOT模式運(yùn)行時，JavaScript便遠(yuǎn)遠(yuǎn)追不上了。

③組件豐富，社區(qū)也相對活躍。

缺點：

①優(yōu)點即缺點，Dart 語言的生態(tài)小，精通成本比較高。

②UI控件API設(shè)計不佳。

③與原生融合障礙很多，不利于漸進(jìn)式升級。

④國內(nèi)文檔較少，需要查閱外文資料。

(四)、結(jié)論

上文也有提到過，拋開技術(shù)和社區(qū)支持，適合公司產(chǎn)品和業(yè)務(wù)需要的技術(shù)才是*好的技術(shù)。目前公司采用的技術(shù)是Hybrid混合開發(fā)模式，前端團(tuán)隊技術(shù)棧都是vue，經(jīng)過對比，可以得出幾個粗略的結(jié)論：

taro和react native都是使用的react，所以這兩個方案不適合。

目前影響公司產(chǎn)品快速迭代升級的矛盾主要在h5和微信小程序混用導(dǎo)致效率低、聯(lián)調(diào)復(fù)雜，App的跨端統(tǒng)一不是主要矛盾。所以仍然可以采用webview嵌套h5的形式，但h5和小程序開發(fā)模式需要統(tǒng)一。使用uni-app開發(fā)App,性能不如React和Flutter,使用nvue weex開發(fā)也有比較多的限制,綜合比較提升不是很大，所以也不適合。Flutter雖然學(xué)習(xí)成本*高，難度也大，但短時間內(nèi)github starts數(shù)量已經(jīng)達(dá)到122K,issus提問題數(shù)和代碼貢獻(xiàn)人數(shù)都比較多，說明Flutter在近期活躍度很高，對于技術(shù)發(fā)展和框架完善能起到很大幫助。實際開發(fā)中，為了提高開發(fā)效率和頁面復(fù)用，APP一般只開發(fā)登錄頁、我的頁、和首頁（不考慮首頁加載慢情況，首頁也可以用h5），其他頁面嵌套H5。把殼做出來，這樣開發(fā)新App項目也能夠快速復(fù)制。

結(jié)論：

方案1、App仍使用現(xiàn)有Hybrid方案，h5和微信小程序開發(fā)使用同一套代碼。

方案2、在人力充足的情況下，登錄頁、我的頁嘗試采用Flutter進(jìn)行開發(fā)，其他h5和微信小程序使用同一套代碼。

三、多端合一開發(fā)

上文提到目前影響公司產(chǎn)品快速迭代升級的矛盾主要在h5和微信小程序混用導(dǎo)致效率低、聯(lián)調(diào)復(fù)雜，App的跨端統(tǒng)一不是主要矛盾。所以h5的微信小程序的開發(fā)方式需要統(tǒng)一。

目前我們的小程序主要是微信（企業(yè)微信）小程序，支付寶、百度、頭條、淘寶等小程序暫時沒有需求，前端技術(shù)棧為vue、vant-ui，所以能同時兼顧以上方面并且開發(fā)效率高、社區(qū)活躍的方案就是我們所需要的。

現(xiàn)在市面上比較流行的框架有：

Taro，京東凹凸實驗室出品，Uni-app，DCloud出品，kbone，騰訊微信團(tuán)隊出品，mpvue在2019年就沒有再更新過，而且uni-app的方案也是自mpvue，mpvue不在比較范圍內(nèi)。

（1）社區(qū)活躍度

根據(jù)加群一星期taro和uni-app提問題和解決問題的情況看，Uni-app更為活躍，可能跟群總?cè)藬?shù)有關(guān)（taro200人群，uni-app2000人群），但總體來說還是uni-app更活躍，百度、csdn、掘金等技術(shù)文章、解決方案也是uni-app居多。Kbone百度搜索技術(shù)文章可以說是沒有，基本可以忽略，社區(qū)也不活躍。

（2）百度指數(shù)曝光程度

在百度指數(shù)，從2020-01-01 到2021-06-12一年多的時間來看，各框架從曝光度和搜索指數(shù)從高到低依次為 uni-app--》flutter--》taro--》react native 

（3）實際開發(fā)情況

綜合對比uni-app、taro從項目搭建、代碼編寫、資料查詢、開發(fā)性能體驗、vant-ui支持、代碼發(fā)布等情況，uni-app更具優(yōu)勢，而且還挺大。

①taro2021年3月份才開始支持vue的寫法，使用taro-vue開發(fā)小程序，很多vue方面的技術(shù)細(xì)節(jié)都沒有體現(xiàn)，無從下手。

②taro不能很好的支持vant-ui，引入vant包時就遇到很多問題，樣式方面也有缺失。

③taro-vue技術(shù)類支持文章還是不夠，很多問題查閱不到。比較適合react框架進(jìn)行開發(fā)，使用vue來開發(fā)目前還不適合。

（5）結(jié)論

1、kbone雖然是騰訊微信小程序團(tuán)隊出品，但是目前無論是社區(qū)支持還是技術(shù)支持還遠(yuǎn)遠(yuǎn)不行。

2、Taro的vue版本在2021年3月份才開始支持，而且底層是通過react渲染實現(xiàn)，比較適合react的技術(shù)框架并且vant-ui和開發(fā)體驗都不是很好。

3、uni-app微信小程序在2016年就已經(jīng)開始商用，經(jīng)過多年的積累，已經(jīng)形成了一個相對完善、活躍的社區(qū)，技術(shù)和更新也有一個很好的沉淀。同時支持現(xiàn)有微信小程序轉(zhuǎn)uni-app、h5轉(zhuǎn)uni-app，遷移難度有所降低。

結(jié)論：

①和小程序有關(guān)聯(lián)，頁面需要復(fù)用的項目，如xxx小程序、微信公眾號，建議采用uni-app的方式進(jìn)行開發(fā)。

②和小程序沒有關(guān)聯(lián)并且開發(fā)邏輯較為獨(dú)立的項目，例如后臺管理系統(tǒng)，保持不變，還是使用vue進(jìn)行開發(fā)。

四、項目實施

凡事預(yù)則立不預(yù)則廢，在項目實施前要有規(guī)劃和部署。微信小程序和h5混用的矛盾比較突出，需要著手解決；Ios和安卓跨端問題也需要提前做技術(shù)儲備。

H5和小程序項目：

（1）新建一個測試項目，使用uniapp的微信小程序轉(zhuǎn)uniapp工具對xxx小程序代碼轉(zhuǎn)譯成uni-app。

（2）測試驗證，確保使用uni-app可以覆蓋XXX小程序所有頁面以及所有交互。

（3）測試無誤再平緩遷移到正式版本，時間周期大概XXX個工作日。

Ios和安卓跨端項目：

（1）Flutter dart語言知識儲備。

（2）新建一個測試項目，使用Flutter進(jìn)行登錄頁、個人頁的開發(fā)，并對相機(jī)、地理位置、通訊錄等常用api進(jìn)行測試，驗證h5與原生交互通訊是否高效。

（3）測試無誤再平緩遷移到正式版本，時間周期大概XXX個工作日

五、總結(jié)

        上海詠熠科技專注小程序開發(fā)，公眾號制作，網(wǎng)站建設(shè)。

        綜上論述都是基于實戰(zhàn)項目和人員技能掌握情況做出相對比較合適的方案，要在實際項目中運(yùn)行，總會有一個測試和試錯的過程，能提高開發(fā)效率并且項目風(fēng)險可控的情況下建議進(jìn)行更新替換是上海詠熠科技為客戶做做工作的*大高興。 

來源網(wǎng)絡(luò)