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

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

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

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

（一）、Webview跨平臺方案 

(1)Hybrid App開發(fā)

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

優(yōu)點：

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

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

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

缺點：

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

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

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

(2)Uni-app

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

優(yōu)點：

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

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

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

缺點：

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

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

③文檔松散，api眾多。

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

（二）、React Native跨平臺方案

（1）react native

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

（2）京東taro

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

優(yōu)點：

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

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

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

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

缺點：

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

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

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

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

(三)、Flutter

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

優(yōu)點：

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

②Dart在 JIT模式下，速度與 JavaScript基本持平。但是 Dart支持 AOT，當以 AOT模式運行時，JavaScript便遠遠追不上了。

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

缺點：

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

②UI控件API設計不佳。

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

④國內文檔較少，需要查閱外文資料。

(四)、結論

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

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

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

結論：

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

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

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

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

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

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

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

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

根據(jù)加群一星期taro和uni-app提問題和解決問題的情況看，Uni-app更為活躍，可能跟群總人數(shù)有關（taro200人群，uni-app2000人群），但總體來說還是uni-app更活躍，百度、csdn、掘金等技術文章、解決方案也是uni-app居多。Kbone百度搜索技術文章可以說是沒有，基本可以忽略，社區(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方面的技術細節(jié)都沒有體現(xiàn)，無從下手。

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

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

（5）結論

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

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

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

結論：

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

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

四、項目實施

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

H5和小程序項目：

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

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

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

Ios和安卓跨端項目：

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

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

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

五、總結

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

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

來源網絡