本文版權(quán)歸作者AWeiLoveAndroid所有，未經(jīng)授權(quán)，嚴禁私自轉(zhuǎn)載。轉(zhuǎn)載請聲明原文鏈接和作者信息。
經(jīng)常看到大家在一些技術(shù)群熱火朝天的爭論跨平臺技術(shù)的牛逼之處，其實是毫無意義的，尺有所短寸有所長，每個技術(shù)各司其職，沒有好壞之分。爭論有何意義？我們倒不如來研究一下，這個跨平臺技術(shù)適不適用以及性能和穩(wěn)定性等方面的做個比較。
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
- 谷歌Flutter1.0正式版發(fā)布
- Flutter基礎(chǔ)篇（1）-- 跨平臺開發(fā)框架和工具集錦
- Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
- Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
- Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
- Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備
- Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
- Flutter基礎(chǔ)篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
- Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細介紹
- Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實現(xiàn)Web頁面編寫
- Flutter1.9升級體驗總結(jié)（Flutter Web 1.9最新版本填坑指南）
Flutter進階篇：
- Flutter進階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項目
- Flutter進階篇（2）-- Flutter路由詳解
- Flutter進階篇（3）-- Flutter 的手勢（GestureDetector）分析詳解
- Flutter進階篇（4）-- Flutter的Future異步詳解
- Flutter進階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫
- Flutter進階篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用詳解
- Flutter進階篇（7）-- Flutter路由輕量級框架FRouter
Dart語法系列博文鏈接 ↓：
Dart語法基礎(chǔ)篇：
Dart語法進階篇：
一、為什么需要跨平臺？
在移動端剛出來那會兒，Android、iOS都是各自為營，分開開發(fā)的，團隊之間是獨立的，從需求調(diào)研，研發(fā)，測試，上線一整套流程需要的周期很長，少則幾個月，多達1年甚至更長。隨著移動端的逐漸普及，移動端開發(fā)的市場也越來越大，互聯(lián)網(wǎng)公司越來越多，爭搶互聯(lián)網(wǎng)蛋糕的人越來越多，各互聯(lián)網(wǎng)公司之間的競爭越來越激烈，如何快速把好的想法推出去占有市場才是當(dāng)前需要考慮的問題，在這樣的形勢下，為了適應(yīng)市場的需求，減少成本開銷，縮短開發(fā)周期，提高效率這些問題逐漸的被各公司關(guān)注。順應(yīng)市場變化的跨平臺框架正好迎合了公司的需求，一拍即合，于是各種跨平臺框架如雨后春筍般的在互聯(lián)網(wǎng)公司開始普及開來。
二、跨平臺框架的發(fā)展歷史
俗話說:“讀史使人明志"，我想大家很有必要了解一下跨平臺框架（工具）發(fā)展歷史。為了搞清楚跨平臺技術(shù)，我查證了許多資料，我在這里畫了一張價值100w的跨平臺框架的發(fā)展歷史圖，如下圖所示。圖中很清晰明了的概括了跨平臺框架的一個發(fā)展歷程。
根據(jù)跨平臺的框架（工具）功能，我把跨平臺框架（工具）主要分為3大類，分別是：Web App網(wǎng)頁、Hybrid框架、含有編譯轉(zhuǎn)換的框架。
（一）Web App網(wǎng)頁
在智能機還沒有出來之前，其實就有適用于手機端的網(wǎng)頁了。Web App其實不算是嚴格意義上的App，我覺得應(yīng)該把它稱作網(wǎng)頁端自適應(yīng)移動版更合適。那時候網(wǎng)頁一般是wap開頭的，比如wap.xxx.com。后來有了3g網(wǎng)絡(luò)之后，升級為3g開頭的，比如3g.xxx.com，還有一種是以m開頭的，比如m.xxx.com。我當(dāng)年就用過諾基亞手機登陸騰訊家園逛QQ空間偷菜，現(xiàn)在手機騰訊網(wǎng)https://wap.3g.qq.com/還存在，其他的Web App，比如淘寶網(wǎng)手機版https://h5.m.taobao.com/ 就是一個Web App的案例，還有新浪網(wǎng)，網(wǎng)易新聞等都有自己的Web App站點。
采取這樣的一種策略的優(yōu)勢：入門門檻低，只需要會HTML5、CSS3、JS前端語言就可以開發(fā)Web App了，開發(fā)成本低，內(nèi)容更新也很方便，Web App無需安裝，可以在不同系統(tǒng)、不同平臺和設(shè)備上運行。
Web App缺點：用戶體驗比不上原生那么流暢，性能上比不上原生；有一些功能受瀏覽器、系統(tǒng)以及平臺本身限制不好實現(xiàn)，比如系統(tǒng)級別的彈窗、傳感器、手機聯(lián)系人等都只能靠原生去實現(xiàn)（也不排除有些框架可以做到，比如：小程序可以通過自己引擎可以騰訊的瀏覽器內(nèi)核引擎操作手機硬件）。本文首發(fā)于我的公眾號Flutter那些事，未經(jīng)授權(quán)嚴禁轉(zhuǎn)載！
隨著技術(shù)的發(fā)展，Web App已經(jīng)是百花齊放，性能和原生效果方面都有很大的改善，新興的Web App代表性的框架有：PWA、小程序等。
（1） PWA
PWA: 全稱是Progressive Web App，翻譯成中文意思是：漸進式網(wǎng)絡(luò)應(yīng)用程序。它是 Google 公司于2015 年提出的，2016 年 6 月才推廣的項目。
PWA優(yōu)勢：PWA可以將App的快捷方式放置在桌面上，全屏運行，體驗上與原生幾乎一致，支持有網(wǎng)和斷網(wǎng)時使用。PWA不包含原生OS相關(guān)代碼。
PWA缺點：PWA仍然是網(wǎng)站，只是在緩存、通知、后臺功能等方面表現(xiàn)的更好。
PWA是Google主推的一項技術(shù)標(biāo)準，F(xiàn)ireFox，Chrome以及一些基于Blink的瀏覽器已經(jīng)支持漸進式Web應(yīng)用了，Edge上對漸進式Web應(yīng)用的支持正在開發(fā)中，Apple公司也表示在Safari瀏覽器上支持PWA。國外互聯(lián)網(wǎng)公司Twitter和Flipboard都推出了PWA的項目。由于網(wǎng)絡(luò)環(huán)境因素以及小程序的競爭等原因，目前國內(nèi)PWA的使用率幾乎為零。
（2） 小程序
小程序：是一種無需下載安裝即可使用的應(yīng)用，只需要掃一掃或打開微信搜一下即可打開應(yīng)用。2016年9月21日，微信小程序正式開啟內(nèi)測。
小程序的優(yōu)勢：小程序開發(fā)門檻相對較低，難度比開發(fā)App小，能夠滿足需求的簡單的基礎(chǔ)應(yīng)用。小程序能夠?qū)崿F(xiàn)消息通知、線下掃碼、公眾號關(guān)聯(lián)等七大功能。通過公眾號關(guān)聯(lián)，用戶可以實現(xiàn)公眾號與小程序之間相互跳轉(zhuǎn)。由于無需下載App,小程序推廣起來更方便。
小程序的缺點：小程序是依附于微信的，所以很多功能局限于微信團隊提供的API，你不好擴展功能。另外小程序不適合開發(fā)交互復(fù)雜、需求多樣的應(yīng)用，只能考慮原生開發(fā)。
（二）Hybrid框架
Hybrid App，其實就是原生應(yīng)用和Web應(yīng)用相結(jié)合，一般做法就是項目中的某一部分是原生界面，一部分是Web頁面，通過原生平臺的WebView去調(diào)用Web頁面。這種類似的開發(fā)模式就需要原生開發(fā)人員和前端開發(fā)人員密切配合（有些公司資源緊缺由單人負責(zé)這個項目）。 本文首發(fā)于我的公眾號Flutter那些事，未經(jīng)授權(quán)嚴禁轉(zhuǎn)載！
由于原生WebView存在一定的局限性，和Web交互起來有些問題不好處理，于是出現(xiàn)了一些基于原生WebView封裝的Hybrid框架，這些框架有一個共同特點：封裝了移動端設(shè)備（這里指Android、iOS）上最常用的本地API調(diào)用，然后以統(tǒng)一的Javascript API形式提供給Web開發(fā)者調(diào)用。這樣一來原生不能解決的問題可以用Web去處理，同時你也可以自己封裝原生API，做成一些插件使用。
比較熱門的Hybrid框架有Ionic、Cordova、DCloud：
（1） Ionic
Ionic： Ionic是一款開源的跨平臺，可用于開發(fā)移動端的開發(fā)框架。框架的核心是從Web的角度去開發(fā)手機應(yīng)用，框架是基于PhoneGap編譯平臺。Ionic底層打包使用 Cordova，Ionic自帶豐富的Ionic UI樣式，Ionic使用的是AngularJS前端框架。Ionic擁有豐富的命令操作，可以通過命令行工具快速創(chuàng)建Android和iOS項目，并且也可以編譯成Android和iOS平臺的應(yīng)用程序,同時Ionic也支持自定義編寫Android和iOS的插件。
Ionic從2013年11月份開始發(fā)布第一個Alpha版本，2015年5月v1.0.0 “uranium-unicorn” release版本發(fā)布。
（2） Cordova
Cordova：Cordova的前身是PhoneGap，2011年Adobe公司收購了PhoneGap將其開源，并捐獻給Apache，命名為Cordova。Cordova從PhoneGap中抽出的核心代碼。Cordova是一個使用HTML，CSS和JS這些前端語言去構(gòu)建移動應(yīng)用的平臺。
Cordova自帶豐富的命令操作，使用命令行可以創(chuàng)建類似于Web App的頁面，在瀏覽器查看我們創(chuàng)建的項目，同時如果我們使用命令行將項目在移動端編譯運行，也是可行的，這也是Cordova項目很獨特的地方，兼容Web App以及移動端。
Cordova提供了一些操作原生設(shè)備有關(guān)的API，通過這些API，可以使用JavaScript去訪問原生的設(shè)備的相關(guān)功能，例如打開攝像頭、打電話、開啟傳感器等。比如拿Android來說，Cordova是通過addJavascriptInterface（Android Webview的API）和JS Prompt這兩種方式來實現(xiàn)JS對于原生 Android API的調(diào)用。
Cordova的文檔從2010年10月就開始維護了，版本號為0.9.2。 cordova-cli在2012年11月發(fā)布第一個版本，版本號為0.1.13。cordova-android這個從2009年12月就開始發(fā)布第一個版本0.9.0了。cordova-ios這個從2009年12月就開始發(fā)布第一個版本0.9.0了。
（3） DCloud
DCloud：這個是國產(chǎn)的跨平臺開發(fā)工具平臺，里面包含有：HBuilder,HTML5+,MUI,uni-app，wap2app等。HBuilder是一個開發(fā)工具，MUI是一個UI框架，HTML5+ App是一種基于HTML、JS、CSS編寫的運行于手機端的App。
HBuilder可以通過擴展的JS API任意調(diào)用移動端的原生功能，實現(xiàn)與原生App同樣強大的功能和性能，它封裝了常用的擴展能力（二維碼、分享等），同時通過Native.js把原生API映射成了JS對象，通過JS可以直接調(diào)iOS和Android的原生API（通過plus.ios調(diào)用iOS原生API，通過plus.android調(diào)用Android原生API）。
HBuilder工具從2013年就開始出現(xiàn)了。
（三）含有編譯轉(zhuǎn)換的框架
（1） React Native
React Native：使用JavaScript 和 React 編寫移動應(yīng)用，在 UI方面使用是原生的控件，性能比Hybrid表現(xiàn)要好很多。React Native因為是基于React，它是響應(yīng)式編程，熟悉React的會很快上手，一次性學(xué)習(xí)，全平臺開發(fā)，團隊可以為任何平臺開發(fā)應(yīng)用，不需要為每個平臺學(xué)習(xí)不同的基礎(chǔ)技術(shù)。React Native支持熱更新也成了很多開發(fā)團隊的熱捧。
React Native于2015年3月v0.1.0: Initial public release版本。
（2） Weex
Weex：Weex 是一個使用 Web 開發(fā)體驗來開發(fā)高性能原生應(yīng)用的框架。使用同一套代碼就可以構(gòu)建 Android、iOS 和 Web 應(yīng)用。Weex 的結(jié)構(gòu)是解耦的，渲染引擎與語法層是分開的，目前主要支持 Vue.js 和 Rax 這兩個前端框架。Weex 在 iOS 和 Android 上都實現(xiàn)了一個渲染引擎，并提供了一套基礎(chǔ)的內(nèi)置組件。基于這些組件，你可以用JS封裝更多的上層組件。
Weex于2016年6月開始發(fā)布版本，第一個版本號為v0.5.0。
（3） Flutter
Flutter: Flutter是谷歌推出的跨平臺項目，它的前身是Sky項目，起源于2015年。Sky項目一開始就定位Dart作為開發(fā)語言，使用Dart語言開發(fā)移動端項目，Sky它不依賴于平臺，它的代碼可以運行在Android、iOS設(shè)備上，真正做到了“一次代碼，處處運行”，讓你在Android、iOS設(shè)備上擁有接近原生的體驗。 本文首發(fā)于我的公眾號Flutter那些事，未經(jīng)授權(quán)嚴禁轉(zhuǎn)載！
Flutter在2017年5月發(fā)布了第一個版本v0.0.6。
三、其他相關(guān)熱門開發(fā)技術(shù)？
除上文講解的之外，我還想提幾個目前可以值得研究的一些技術(shù)，主要有這幾個：Instant App、快應(yīng)用、Kotlin、Scade.
（1） Instant App
Instant App：Instant App翻譯成中文可以稱之為瞬時程序加載，也可以稱之為即時應(yīng)用。它出現(xiàn)的目的，就是為了讓人們能夠像點擊鏈接那么簡單，節(jié)省掉安裝App的痛苦，最快速度、最少流量的消耗，讓用戶體驗到App級的用戶體驗。前提是必須在Google Play發(fā)布apk，以及手機支持Google Service框架，建議優(yōu)先使用谷歌親兒子。由于墻以及谷歌的一些要求等問題，這個技術(shù)在國內(nèi)并沒有被推廣開。
（2） 快應(yīng)用
快應(yīng)用：快應(yīng)用是九大手機廠商基于硬件平臺共同推出的新型應(yīng)用生態(tài)。用戶無需下載安裝，即點即用，享受原生應(yīng)用的性能體驗。使用前端技術(shù)棧開發(fā)，原生渲染，同時具備H5頁面和原生應(yīng)用的雙重優(yōu)點。快應(yīng)用在傳統(tǒng)通知欄、負一屏、信息流等用戶直觀感知的位置建立和搜索入口，包括短信、拍照、語音助手、卸載場景、卡包等等。
（3） Kotlin
Kotlin：這里講一下Kotlin Native，它利用LLVM來編譯到機器碼。它主要是基于 LLVM后端編譯器（Backend Compiler）來生成本地機器碼。Kotlin Native設(shè)計初衷是為了支持在非JVM虛擬機平臺環(huán)境的編程，如 ios、嵌入式平臺等。同時支持與 C 互操作。
（4） Scade
Scade：Scade是一個跨平臺的，支持Android，Apple和Linux的工具。使用Swift的代碼庫為進行開發(fā)，可以構(gòu)建和部署多個不同平臺的應(yīng)用。Swift代碼編譯為Android和iOS可執(zhí)行文件以及靜態(tài)和動態(tài)庫，并打包為IAK和ADK文件。通用平臺特定的控件直接集成到Scade圖形SVG渲染引擎中,Scade標(biāo)準庫提供了大量系統(tǒng)功能,操作系統(tǒng)特定功能作為默認包公開并易于使用，無需包裝或使用外部功能接口。
文首的圖片來源于網(wǎng)頁:http://www.sohu.com/a/50632196_128381
【聲明】本文首發(fā)于我的公眾號Flutter那些事，未經(jīng)授權(quán)嚴禁轉(zhuǎn)載！
