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

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

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

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

（一）、Webview跨平臺(tái)方案 

(1)Hybrid App開(kāi)發(fā)

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

優(yōu)點(diǎn)：

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

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

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

缺點(diǎn)：

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

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

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

(2)Uni-app

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

優(yōu)點(diǎn)：

①開(kāi)發(fā)成本、門(mén)檻低，開(kāi)發(fā)者編寫(xiě)一套vue.js代碼，可發(fā)布到IOS、Android、h5、小程序等多個(gè)平臺(tái)。

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

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

缺點(diǎn)：

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

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

③文檔松散，api眾多。

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

（二）、React Native跨平臺(tái)方案

（1）react native

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

（2）京東taro

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

優(yōu)點(diǎn)：

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

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

③可以通過(guò) JSBundle 即時(shí)更新 App。相比原來(lái)冗長(zhǎng)的審核和上傳過(guò)程，發(fā)布和測(cè)試新功能的效率大幅提高。

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

缺點(diǎn)：

①在動(dòng)畫(huà)效率和性能的支持還存在一些問(wèn)題，性能上不如原生Api。

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

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

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

(三)、Flutter

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

優(yōu)點(diǎn)：

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

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

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

缺點(diǎn)：

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

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

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

④?chē)?guó)內(nèi)文檔較少，需要查閱外文資料。

(四)、結(jié)論

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

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

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

結(jié)論：

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

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

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

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

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

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

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

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

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

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

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

（3）實(shí)際開(kāi)發(fā)情況

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

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

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

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

（5）結(jié)論

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

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

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

結(jié)論：

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

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

四、項(xiàng)目實(shí)施

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

H5和小程序項(xiàng)目：

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

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

（3）測(cè)試無(wú)誤再平緩遷移到正式版本，時(shí)間周期大概XXX個(gè)工作日。

Ios和安卓跨端項(xiàng)目：

（1）Flutter dart語(yǔ)言知識(shí)儲(chǔ)備。

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

（3）測(cè)試無(wú)誤再平緩遷移到正式版本，時(shí)間周期大概XXX個(gè)工作日

五、總結(jié)

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

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

來(lái)源網(wǎng)絡(luò)