跨平臺開發框架和工具集錦

本文版權歸做者AWeiLoveAndroid全部，未經受權，嚴禁私自轉載。轉載請聲明原文連接和做者信息。

常常看到你們在一些技術羣熱火朝天的爭論跨平臺技術的牛逼之處，實際上是毫無心義的，尺有所短寸有所長，每一個技術各司其職，沒有好壞之分。爭論有何意義？咱們倒不如來研究一下，這個跨平臺技術適不適用以及性能和穩定性等方面的作個比較。

1、爲何須要跨平臺？

在移動端剛出來那會兒，Android、iOS都是各自爲營，分開開發的，團隊之間是獨立的，從需求調研，研發，測試，上線一整套流程須要的週期很長，少則幾個月，多達1年甚至更長。隨着移動端的逐漸普及，移動端開發的市場也愈來愈大，互聯網公司愈來愈多，爭搶互聯網蛋糕的人愈來愈多，各互聯網公司之間的競爭愈來愈激烈，如何快速把好的想法推出去佔有市場纔是當前須要考慮的問題，在這樣的形勢下，爲了適應市場的需求，減小成本開銷，縮短開發週期，提升效率這些問題逐漸的被各公司關注。順應市場變化的跨平臺框架正好迎合了公司的需求，一拍即合，因而各類跨平臺框架如雨後春筍般的在互聯網公司開始普及開來。

2、跨平臺框架的發展歷史

俗話說:「讀史令人明志"，我想你們頗有必要了解一下跨平臺框架（工具）發展歷史。爲了搞清楚跨平臺技術，我查證了許多資料，我在這裏畫了一張價值100w的跨平臺框架的發展歷史圖，以下圖所示。圖中很清晰明瞭的歸納了跨平臺框架的一個發展歷程。

根據跨平臺的框架（工具）功能，我把跨平臺框架（工具）主要分爲3大類，分別是：Web App網頁、Hybrid框架、含有編譯轉換的框架。

（一）Web App網頁

在智能機尚未出來以前，其實就有適用於手機端的網頁了。Web App其實不算是嚴格意義上的App，我以爲應該把它稱做網頁端自適應移動版更合適。那時候網頁通常是wap開頭的，好比wap.xxx.com。後來有了3g網絡以後，升級爲3g開頭的，好比3g.xxx.com，還有一種是以m開頭的，好比m.xxx.com。我當年就用過諾基亞手機登錄騰訊家園逛QQ空間偷菜，如今手機騰訊網https://wap.3g.qq.com/還存在，其餘的Web App，好比淘寶網手機版https://h5.m.taobao.com/ 就是一個Web App的案例，還有新浪網，網易新聞等都有本身的Web App站點。

採起這樣的一種策略的優點：入門門檻低，只須要會HTML五、CSS三、JS前端語言就能夠開發Web App了，開發成本低，內容更新也很方便，Web App無需安裝，能夠在不一樣系統、不一樣平臺和設備上運行。

Web App缺點：用戶體驗比不上原生那麼流暢，性能上比不上原生；有一些功能受瀏覽器、系統以及平臺自己限制很差實現，好比系統級別的彈窗、傳感器、手機聯繫人等都只能靠原生去實現（也不排除有些框架能夠作到，好比：小程序能夠經過本身引擎能夠騰訊的瀏覽器內核引擎操做手機硬件）。本文首發於個人公衆號Flutter那些事，未經受權嚴禁轉載！

隨着技術的發展，Web App已是百花齊放，性能和原生效果方面都有很大的改善，新興的Web App表明性的框架有：PWA、小程序等。

（1） PWA

PWA: 全稱是Progressive Web App，翻譯成中文意思是：漸進式網絡應用程序。它是 Google 公司於2015 年提出的，2016 年 6 月才推廣的項目。

PWA優點：PWA能夠將App的快捷方式放置在桌面上，全屏運行，體驗上與原生幾乎一致，支持有網和斷網時使用。PWA不包含原生OS相關代碼。

PWA缺點：PWA仍然是網站，只是在緩存、通知、後臺功能等方面表現的更好。

PWA是Google主推的一項技術標準，FireFox，Chrome以及一些基於Blink的瀏覽器已經支持漸進式Web應用了，Edge上對漸進式Web應用的支持正在開發中，Apple公司也表示在Safari瀏覽器上支持PWA。國外互聯網公司Twitter和Flipboard都推出了PWA的項目。因爲網絡環境因素以及小程序的競爭等緣由，目前國內PWA的使用率幾乎爲零。

（2） 小程序

小程序：是一種無需下載安裝便可使用的應用，只須要掃一掃或打開微信搜一下便可打開應用。2016年9月21日，微信小程序正式開啓內測。

小程序的優點：小程序開發門檻相對較低，難度比開發App小，可以知足需求的簡單的基礎應用。小程序可以實現消息通知、線下掃碼、公衆號關聯等七大功能。經過公衆號關聯，用戶能夠實現公衆號與小程序之間相互跳轉。因爲無需下載App,小程序推廣起來更方便。

小程序的缺點：小程序是依附於微信的，因此不少功能侷限於微信團隊提供的API，你很差擴展功能。另外小程序不適合開發交互複雜、需求多樣的應用，只能考慮原生開發。

（二）Hybrid框架

Hybrid App，其實就是原生應用和Web應用相結合，通常作法就是項目中的某一部分是原生界面，一部分是Web頁面，經過原平生臺的WebView去調用Web頁面。這種相似的開發模式就須要原生開發人員和前端開發人員密切配合（有些公司資源緊缺由單人負責這個項目）。 本文首發於個人公衆號Flutter那些事，未經受權嚴禁轉載！

因爲原生WebView存在必定的侷限性，和Web交互起來有些問題很差處理，因而出現了一些基於原生WebView封裝的Hybrid框架，這些框架有一個共同特色：封裝了移動端設備（這裏指Android、iOS）上最經常使用的本地API調用，而後以統一的Javascript API形式提供給Web開發者調用。這樣一來原生不能解決的問題能夠用Web去處理，同時你也能夠本身封裝原生API，作成一些插件使用。

比較熱門的Hybrid框架有Ionic、Cordova、DCloud：

（1） Ionic

Ionic： Ionic是一款開源的跨平臺，可用於開發移動端的開發框架。框架的核心是從Web的角度去開發手機應用，框架是基於PhoneGap編譯平臺。Ionic底層打包使用 Cordova，Ionic自帶豐富的Ionic UI樣式，Ionic使用的是AngularJS前端框架。Ionic擁有豐富的命令操做，能夠經過命令行工具快速建立Android和iOS項目，而且也能夠編譯成Android和iOS平臺的應用程序,同時Ionic也支持自定義編寫Android和iOS的插件。

Ionic從2013年11月份開始發佈第一個Alpha版本，2015年5月v1.0.0 「uranium-unicorn」 release版本發佈。

（2） Cordova

Cordova：Cordova的前身是PhoneGap，2011年Adobe公司收購了PhoneGap將其開源，並捐獻給Apache，命名爲Cordova。Cordova從PhoneGap中抽出的核心代碼。Cordova是一個使用HTML，CSS和JS這些前端語言去構建移動應用的平臺。

Cordova自帶豐富的命令操做，使用命令行能夠建立相似於Web App的頁面，在瀏覽器查看咱們建立的項目，同時若是咱們使用命令行將項目在移動端編譯運行，也是可行的，這也是Cordova項目很獨特的地方，兼容Web App以及移動端。

Cordova提供了一些操做原生設備有關的API，經過這些API，可使用JavaScript去訪問原生的設備的相關功能，例如打開攝像頭、打電話、開啓傳感器等。好比拿Android來講，Cordova是經過addJavascriptInterface（Android Webview的API）和JS Prompt這兩種方式來實現JS對於原生 Android API的調用。

Cordova的文檔從2010年10月就開始維護了，版本號爲0.9.2。 cordova-cli在2012年11月發佈第一個版本，版本號爲0.1.13。cordova-android這個從2009年12月就開始發佈第一個版本0.9.0了。cordova-ios這個從2009年12月就開始發佈第一個版本0.9.0了。

（3） DCloud

DCloud：這個是國產的跨平臺開發工具平臺，裏面包含有：HBuilder,HTML5+,MUI,uni-app，wap2app等。HBuilder是一個開發工具，MUI是一個UI框架，HTML5+ App是一種基於HTML、JS、CSS編寫的運行於手機端的App。

HBuilder能夠經過擴展的JS API任意調用移動端的原生功能，實現與原生App一樣強大的功能和性能，它封裝了經常使用的擴展能力（二維碼、分享等），同時經過Native.js把原生API映射成了JS對象，經過JS能夠直接調iOS和Android的原生API（經過plus.ios調用iOS原生API，經過plus.android調用Android原生API）。

HBuilder工具從2013年就開始出現了。

（三）含有編譯轉換的框架

（1） React Native

React Native：使用JavaScript 和 React 編寫移動應用，在 UI方面使用是原生的控件，性能比Hybrid表現要好不少。React Native由於是基於React，它是響應式編程，熟悉React的會很快上手，一次性學習，全平臺開發，團隊能夠爲任何平臺開發應用，不須要爲每一個平臺學習不一樣的基礎技術。React Native支持熱更新也成了不少開發團隊的熱捧。

React Native於2015年3月v0.1.0: Initial public release版本。

（2） Weex

Weex：Weex 是一個使用 Web 開發體驗來開發高性能原生應用的框架。使用同一套代碼就能夠構建 Android、iOS 和 Web 應用。Weex 的結構是解耦的，渲染引擎與語法層是分開的，目前主要支持 Vue.js 和 Rax 這兩個前端框架。Weex 在 iOS 和 Android 上都實現了一個渲染引擎，並提供了一套基礎的內置組件。基於這些組件，你能夠用JS封裝更多的上層組件。

Weex於2016年6月開始發佈版本，第一個版本號爲v0.5.0。

（3） Flutter

Flutter: Flutter是谷歌推出的跨平臺項目，它的前身是Sky項目，起源於2015年。Sky項目一開始就定位Dart做爲開發語言，使用Dart語言開發移動端項目，Sky它不依賴於平臺，它的代碼能夠運行在Android、iOS設備上，真正作到了「一次代碼，到處運行」，讓你在Android、iOS設備上擁有接近原生的體驗。 本文首發於個人公衆號Flutter那些事，未經受權嚴禁轉載！

Flutter在2017年5月發佈了第一個版本v0.0.6。

3、其餘相關熱門開發技術？

除上文講解的以外，我還想提幾個目前能夠值得研究的一些技術，主要有這幾個：Instant App、快應用、Kotlin、Scade.

（1） Instant App

Instant App：Instant App翻譯成中文能夠稱之爲瞬時程序加載，也能夠稱之爲即時應用。它出現的目的，就是爲了讓人們可以像點擊連接那麼簡單，節省掉安裝App的痛苦，最快速度、最少流量的消耗，讓用戶體驗到App級的用戶體驗。前提是必須在Google Play發佈apk，以及手機支持Google Service框架，建議優先使用谷歌親兒子。因爲牆以及谷歌的一些要求等問題，這個技術在國內並無被推廣開。

（2） 快應用

快應用：快應用是九大手機廠商基於硬件平臺共同推出的新型應用生態。用戶無需下載安裝，即點即用，享受原生應用的性能體驗。使用前端技術棧開發，原生渲染，同時具有H5頁面和原生應用的雙重優勢。快應用在傳統通知欄、負一屏、信息流等用戶直觀感知的位置創建和搜索入口，包括短信、拍照、語音助手、卸載場景、卡包等等。

（3） Kotlin

Kotlin：這裏講一下Kotlin Native，它利用LLVM來編譯到機器碼。它主要是基於 LLVM後端編譯器（Backend Compiler）來生成本地機器碼。Kotlin Native設計初衷是爲了支持在非JVM虛擬機平臺環境的編程，如 ios、嵌入式平臺等。同時支持與 C 互操做。

（4） Scade

Scade：Scade是一個跨平臺的，支持Android，Apple和Linux的工具。使用Swift的代碼庫爲進行開發，能夠構建和部署多個不一樣平臺的應用。Swift代碼編譯爲Android和iOS可執行文件以及靜態和動態庫，並打包爲IAK和ADK文件。通用平臺特定的控件直接集成到Scade圖形SVG渲染引擎中,Scade標準庫提供了大量系統功能,操做系統特定功能做爲默認包公開並易於使用，無需包裝或使用外部功能接口。

---

【聲明】本文首發於個人公衆號Flutter那些事，未經受權嚴禁轉載！