寫(xiě)在開(kāi)頭：

本文不涉及到任何代碼，只講概念層面的，結(jié)合本人在實(shí)際開(kāi)發(fā)過(guò)程中的各種體驗(yàn)，對(duì)這幾種跨平臺(tái)技術(shù)進(jìn)行一個(gè)點(diǎn)評(píng)。

跨平臺(tái)技術(shù)的由來(lái)：

傳統(tǒng)的純?cè)_(kāi)發(fā)已經(jīng)不能滿(mǎn)足日益增長(zhǎng)的業(yè)務(wù)需求。主要表現(xiàn)在如下兩個(gè)方面。

1. 動(dòng)態(tài)化內(nèi)容需求增大。當(dāng)需求發(fā)生變化時(shí)，純?cè)鷳?yīng)用需要通過(guò)版本升級(jí)來(lái)更新內(nèi)容，但應(yīng)用上架、審核是需要周期的，這個(gè)周期對(duì)高速變化的互聯(lián)網(wǎng)時(shí)代來(lái)說(shuō)是很難接受的，所以，對(duì)應(yīng)用動(dòng)態(tài)化(不發(fā)版也可以更新應(yīng)用內(nèi)容)的需求就變得迫在眉睫了。
2. 業(yè)務(wù)需求變化快，開(kāi)發(fā)成本變大。由于原生開(kāi)發(fā)一般都要維護(hù) Android、iOS兩個(gè)

開(kāi)發(fā)團(tuán)隊(duì)，版本迭代時(shí)，無(wú)論人力成本還是測(cè)試成本都會(huì)變大。

總結(jié)一下，純?cè)_(kāi)發(fā)主要面臨動(dòng)態(tài)化和開(kāi)發(fā)成本兩個(gè)問(wèn)題，而針對(duì)這兩個(gè)問(wèn)題，又誕生了一些跨平臺(tái)的動(dòng)態(tài)化框架。

跨平臺(tái)技術(shù)簡(jiǎn)介

針對(duì)原生開(kāi)發(fā)面臨的問(wèn)題，人們一直都在努力尋找好的解決方案，然而時(shí)至今日，已經(jīng)存在很多跨平臺(tái)框架(注意，本書(shū)中所指的“跨平臺(tái)”若無(wú)特殊說(shuō)明，即特指 Android和iOS兩個(gè)平臺(tái))，根據(jù)其原理，主要可分為如下三類(lèi)。

• H5(HTML5)+原生( Cordova、 Tonic、微信小程序)。
• Javascript開(kāi)發(fā)+原生渲染( React Native、Wex、快應(yīng)用)。
• 自繪U+原生( QT Mobile、 Flutter)。

接下來(lái)，我們將逐個(gè)來(lái)了解這三類(lèi)框架的原理及優(yōu)缺點(diǎn)。

1.12 Hybrid技術(shù)簡(jiǎn)介

H5+原生混合開(kāi)發(fā)

這類(lèi)框架的主要原理是將APP需要?jiǎng)討B(tài)變動(dòng)的一部分內(nèi)容通過(guò)H5來(lái)實(shí)現(xiàn)，通過(guò)原生的網(wǎng)頁(yè)加載控件 Webview( Android)或 WK Webview(iOS)來(lái)加載(以后若無(wú)特殊說(shuō)明，本書(shū)將用 Webview來(lái)統(tǒng)一指代 Android和iOs中的網(wǎng)頁(yè)加載控件)。這樣，H5部分就可以

隨時(shí)改變而不用發(fā)版，動(dòng)態(tài)化需求得到滿(mǎn)足;同時(shí)，由于H5代碼只需要一次開(kāi)發(fā)，就能同時(shí)在 Android和OS兩個(gè)平臺(tái)上正常運(yùn)行，這也可以降低開(kāi)發(fā)成本，也就是說(shuō)，H5部分的

功能越多，開(kāi)發(fā)成本就越小。我們稱(chēng)這種H5+原生的開(kāi)發(fā)模式為混合開(kāi)發(fā)，對(duì)于采用混合模式開(kāi)發(fā)的APP，我們稱(chēng)之為混合應(yīng)用或 Hybrid APP，如果一個(gè)應(yīng)用的大多數(shù)功能都是采用H5實(shí)現(xiàn)的話(huà)，我們稱(chēng)其為 Web APP。

目前混合開(kāi)發(fā)框架的典型代表有 Cordova、 lonic和微信小程序，值得一提的是，微信小程序目前是在 Webview中渲染的。并非原生渲染，但將來(lái)有可能會(huì)采用原生渲染。

混合開(kāi)發(fā)技術(shù)點(diǎn)

如之前所述，原生開(kāi)發(fā)可以訪間平臺(tái)的所有功能，而在混合開(kāi)發(fā)中，H5代碼是運(yùn)行在

Web Vicw中的， Webview實(shí)質(zhì)上就是一個(gè)瀏覽器器內(nèi)核、其script依然運(yùn)行在一個(gè)權(quán)限

受限的沙箱中，所以對(duì)大多數(shù)系統(tǒng)能力都沒(méi)有訪向權(quán)限、如無(wú)法訪向文件系統(tǒng)、不能使用藍(lán)牙等，所以，對(duì)于H5不能實(shí)現(xiàn)的功能，都需要原生來(lái)實(shí)現(xiàn)。

而混合框架一般都會(huì)在原生代碼中預(yù)先實(shí)現(xiàn)一些訪問(wèn)系統(tǒng)能力的API，然后暴露給 Webview以供 Javascript調(diào)用，這樣一來(lái)， Webview就成為 Javascript與原生AP之間通信的橋梁，主要負(fù)責(zé) Javascript與原生之間調(diào)用消息的傳遞，而消息的傳遞必須遵守一個(gè)標(biāo)準(zhǔn)的協(xié)議，其規(guī)定了消息的格式與含義，我們將依賴(lài)于 Webview的、用于在 Javascript與原生之間通信并實(shí)現(xiàn)了某種消息傳輸協(xié)議的工具稱(chēng)為 Webview Javascript Bridge，簡(jiǎn)稱(chēng) Jsbridge，它也是混合開(kāi)發(fā)框架的核心.

我所使用的跨平臺(tái)技術(shù)：

• Electron
• React-Native
• Taro
• Cordova
• 快應(yīng)用
• Flutter(剛學(xué)習(xí))
• ...

排名由前往后，除了Flutter沒(méi)有使用過(guò)在商業(yè)項(xiàng)目中

Electron的核心：

Electron就是把Node.js的運(yùn)行環(huán)境和谷歌瀏覽器內(nèi)核一起打包了，于是就擁有了Node.js和H5技術(shù)的融合能力，又因?yàn)槭腔贑++編寫(xiě)，于是可以跨平臺(tái)。Mac、windows、Linux。

工具類(lèi)的軟件是最復(fù)雜的，例如vscode、word這些，都是極度復(fù)雜的，又因?yàn)榭梢哉{(diào)用addon、各種腳本插件，原生第三方插件，這個(gè)技術(shù)簡(jiǎn)直就是黑科技，至今我也不敢說(shuō)對(duì)它熟悉。但是APP Store已經(jīng)不能上線Electron應(yīng)用了，而且打包簽名服務(wù)器也經(jīng)常掛

特別注意：Electron開(kāi)發(fā)出來(lái)的東西是軟件，是一個(gè)安裝在電腦上的軟件!

我的GitHub可能有你想要的Demo內(nèi)容：https://github.com/JinJieTan

要想開(kāi)發(fā)好Electron，要擁有一名C++人員專(zhuān)門(mén)編寫(xiě)插件，一位后端出生的人生操作sqlite數(shù)據(jù)庫(kù)(數(shù)據(jù)庫(kù)升級(jí)雖然可以兼容老版本，但是復(fù)雜的應(yīng)用設(shè)計(jì)得不好數(shù)據(jù)庫(kù)就完了)，一位前后端都懂并且熟悉調(diào)用操作系統(tǒng)插件的全棧工程師開(kāi)發(fā)，這樣才能hold得住復(fù)雜應(yīng)用。如果你說(shuō)這樣是不是太浪費(fèi)了，那我覺(jué)得你沒(méi)有開(kāi)發(fā)過(guò)復(fù)雜的軟件，一個(gè)好的軟件(客戶(hù)端)，要考慮程序反編譯(保護(hù))、奔潰守護(hù)進(jìn)程等異常搜集、用戶(hù)自動(dòng)升級(jí)(差量or全量)、本地?cái)?shù)據(jù)庫(kù)加密、通信、激活喚醒。。。。太多了，但是大部分前端做的就是后臺(tái)管理系統(tǒng)，這也是一個(gè)悲劇。。。面試造火箭

像以前我就做過(guò)將微信和QQ里面一些插件拿出來(lái)經(jīng)過(guò)一些處理用在項(xiàng)目里，至此打開(kāi)了新世界,總之Electron非常考驗(yàn)技術(shù)，是晉升偽全棧工程師最快的路徑

推薦學(xué)習(xí)指數(shù)：五顆星

React-native

去年愛(ài)彼迎把APP的技術(shù)從RN換回了原生，首先它是外企，它可能某種程度上，使用RN會(huì)比國(guó)內(nèi)有更大的優(yōu)勢(shì)，獲得更大的支持。就像你使用Taro，那么你有可能在論壇上找到它的負(fù)責(zé)人，提出想要的支持，最后它真的支持了(這個(gè)是存在的，如果你想認(rèn)識(shí)可以幫你聯(lián)系，我也在建議身邊人使用Taro)

回到正題：

難道RN死了嗎?

JQuery都沒(méi)死，它會(huì)死嗎?當(dāng)然不會(huì)!RN的生態(tài)非常強(qiáng)大，它開(kāi)發(fā)出來(lái)的，也是真正的原生應(yīng)用，它的原理如下：

在React-native文件中編寫(xiě)的代碼，會(huì)在內(nèi)存中生成虛擬DOM對(duì)象(其實(shí)就是一個(gè)JS對(duì)象)，然后再通過(guò)javaScriptCore(IOS自帶，安卓不是，所以RN打包后安卓的包比蘋(píng)果大)映射成原生控件樹(shù)。很多jsBridge都是基于javaScriptCore實(shí)現(xiàn)的

例如：

iOS代碼發(fā)送通知： 
//需要包含的頭文件 
#import <React/RCTEventDispatcher.h> 
#import <React/RCTBridge.h> 
[self.bridge.eventDispatcher sendAppEventWithName:@"EventNotification" 
                                              body:@{@"name": @"nnnnnnn"}]; 
RN代碼接收通知： 
//創(chuàng)建一個(gè)監(jiān)聽(tīng)收到的通知，需要組件NativeAppEventEmitter 
var listener = NativeAppEventEmitter.addListener( 
'EventNotification', //監(jiān)聽(tīng)的通知名稱(chēng) 
   (reminder) => console.log(reminder.name, '收到的通知') 
); 

提示：跨平臺(tái)不是什么高深的技術(shù)，只要搞懂它的運(yùn)行機(jī)制原理，就好開(kāi)發(fā)，定位問(wèn)題。

那么RN有什么缺點(diǎn)呢?例如頻繁setState，可能會(huì)造成卡頓(做動(dòng)畫(huà)的時(shí)候容易掉幀，特別是性能差的手機(jī))，但是也是可以使用一些技術(shù)優(yōu)化盡量避免，跟是誰(shuí)寫(xiě)的有很大關(guān)系，還有就是項(xiàng)目變得特別大，跟原生交互特別多，特別復(fù)雜的應(yīng)用，跨平臺(tái)遇到的問(wèn)題兼容處理也會(huì)越來(lái)越多，這也是為什么愛(ài)彼迎會(huì)換回原生的原因，維護(hù)確實(shí)比較麻煩，還有版本環(huán)境的問(wèn)題，有可能你升級(jí)了以后再也啟動(dòng)不了了。。。

推薦理由：開(kāi)發(fā)快速，生態(tài)成熟，使用React的JSX語(yǔ)法和FLex布局快速開(kāi)發(fā)原生應(yīng)用，推薦學(xué)習(xí)指數(shù)：四顆星

Taro

小程序跨平臺(tái)開(kāi)發(fā)，一款可以用TSX、JSX和React語(yǔ)法開(kāi)發(fā)小程序的框架，內(nèi)置了一些UI組件，還有物料市場(chǎng)，目前看勢(shì)頭很好。還可以集成React-native,真正做到一套代碼多處運(yùn)行，不僅能編譯成各種平臺(tái)小程序，還可以是RN的應(yīng)用～ 666 ,還支持快應(yīng)用

https://taro.aotu.io/

現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候，針對(duì)不同的端去編寫(xiě)多套代碼的成本顯然非常高，這時(shí)候只編寫(xiě)一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書(shū)寫(xiě)一套代碼，再通過(guò) Taro 的編譯工具，將源代碼分別編譯出可以在不同端(微信/百度/支付寶/字節(jié)跳動(dòng)/QQ/京東小程序、快應(yīng)用、H5、React-Native 等)運(yùn)行的代碼。

Taro的源碼我沒(méi)看過(guò)，但是我看里面用了很多他們自己寫(xiě)的babel包，應(yīng)該是JIT模式，加入了中間層，把你寫(xiě)的東西，編譯成了小程序可以執(zhí)行的代碼，個(gè)人認(rèn)為小程序不要做得太復(fù)雜，不然你還不如做個(gè)APP，輕量跨平臺(tái)，自然是最快速的，而且可以使用TSX語(yǔ)法，React，太好了。

推薦指數(shù)：五顆星

Cordova

它是一個(gè)比較古老的技術(shù)，但是我目前的公司使用得比較6，還做成了一套產(chǎn)業(yè)體系，我覺(jué)得它也挺不錯(cuò)的

它是比較傳統(tǒng)的跨平臺(tái)技術(shù)，類(lèi)似小程序，在webView中渲染，原理如下：

其實(shí)就是原生的webView去加載，執(zhí)行H5代碼，這樣可以跨平臺(tái)，而且可以隨時(shí)更新發(fā)布內(nèi)容。這就是傳統(tǒng)的hybrid APP (混合開(kāi)發(fā))

還有一種webApp,直接用h5的技術(shù)打包成APP，比較簡(jiǎn)單，這個(gè)百度下就知道了

Hybrid技術(shù)應(yīng)該比較多，但是原理大同小異，都是通過(guò)webView加載，性能體驗(yàn)肯定沒(méi)有原生好，因?yàn)檎{(diào)用webView需要幾百毫秒的時(shí)間，但是也可以通過(guò)一些技術(shù)優(yōu)化，跟誰(shuí)寫(xiě)也有很大關(guān)系

快應(yīng)用

就是華為、小米等國(guó)內(nèi)廠商為了跟小程序競(jìng)爭(zhēng)搞出來(lái)的，像RN這些框架，回內(nèi)置一些渲染/排版引擎，那么打包出來(lái)提交比較大，快應(yīng)用是集成到安卓手機(jī)的ROM中，所以只有源碼那部分，安裝體積比較小，這樣就叫快應(yīng)用

快應(yīng)用使用原生js開(kāi)發(fā)，框架跟原生微信小程序很像(寫(xiě)著不舒服，Taro支持快應(yīng)用)

提示：寫(xiě)快應(yīng)用的工資很高，感覺(jué)基本都在30K以上(可能是錯(cuò)覺(jué))

Flutter

Flutter是ogle推出并開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架，主要特點(diǎn)是跨平臺(tái)、高保真、有些性能。開(kāi)發(fā)者可以通過(guò)Dar語(yǔ)言開(kāi)發(fā)APP，一套代碼可以同時(shí)運(yùn)行在OS和 Android平臺(tái)以上。Flutter提供了豐富的組件、接口，開(kāi)發(fā)者可以很快地為 Flutter添加 Native擴(kuò)展。

同時(shí)Flutter還可以使用 Native引擎渲染視圖，這無(wú)疑能為用戶(hù)提供良好的體驗(yàn)。

跨平臺(tái)自繪引擎

Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其他大多數(shù)框架不同，因?yàn)?Flutter既不使用Webview，也不使用操作系統(tǒng)的原生控件。相反， Flutter使用自己的高性能渲染引擎來(lái)繪制 Widget。這樣不僅可以保證在 Android和iOS上UI的一致性，而且可以避免因?qū)υ?/p>

件依賴(lài)而帶來(lái)的限制及高昂的維護(hù)成本。

Flutter使用ska作為其2D渲染引擎，Skia是 Google的一個(gè)2D圖形處理函數(shù)庫(kù)，包含字形、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖，且都有高效能且簡(jiǎn)潔的表現(xiàn)，Skia是跨平臺(tái)的，并且其還提供了非常友好的API，目前 Google Chrome瀏覽器和 Android均采用Skia作為其繪圖引擎。目前， Flutter默認(rèn)支持iOS、 Android、 Fuchsia( Google新的自研操作系統(tǒng))三個(gè)移動(dòng)平臺(tái)。但 Flutter亦可支持Web開(kāi)發(fā)( Flutter for Web)和PC開(kāi)發(fā)

高性能

Flutter的高性能主要靠?jī)牲c(diǎn)來(lái)保證，首先， Flutter APP采用Dart語(yǔ)言開(kāi)發(fā)。Dart在JT(即時(shí)編譯)模式下，速度與 Javascript基本持平。同時(shí)Dar還支持AOT，當(dāng)以AOT模式運(yùn)行時(shí)， Javascript便遠(yuǎn)遠(yuǎn)追不上了。速度的提升對(duì)高幀率下的視圖數(shù)據(jù)計(jì)算很有幫助。其次， Flutter 1使用自己的渲染引擎來(lái)繪制UI，布局?jǐn)?shù)據(jù)等由Dan語(yǔ)言直接控制，所以在布局過(guò)程中不需要像RN那樣要在 Javascript和 Native之間通信。

這一點(diǎn)在一些滑動(dòng)和拖動(dòng)的場(chǎng)景下具有明顯的優(yōu)勢(shì)，因?yàn)榛瑒?dòng)和拖動(dòng)的過(guò)程往往會(huì)引起布局發(fā)生變化，所以 Javascript需要與 Native不停地同步布局信息，這與在瀏覽器中要 Javascript頻繁操作DOM所帶來(lái)的問(wèn)題是相同的，都會(huì)帶來(lái)比較可觀的性能開(kāi)銷(xiāo)。

重點(diǎn)：Flutter自己有自己的渲染引擎，這樣避免了以上幾種跨平臺(tái)技術(shù)的通過(guò)中間層通信帶來(lái)的性能開(kāi)銷(xiāo)，但是依然避免不了寫(xiě)原生代碼，而且目前GitHub上的issue還比較多，不過(guò)小編已經(jīng)入坑了，就學(xué)最后一個(gè)，以后就不學(xué)前端了

Dart語(yǔ)言學(xué)習(xí)也需要一些成本，如果公司有這個(gè)安排的話(huà)，可以入坑嘗試

綜上五種所述：不一樣的業(yè)務(wù)場(chǎng)景有一樣的技術(shù)場(chǎng)景，技術(shù)為產(chǎn)品服務(wù)，跨平臺(tái)的出現(xiàn)并不是為了干掉原生，而是為了更好的、更高效的開(kāi)發(fā)。