本文作者：大師兄(高武軍)

現就職於某公司移動端架構師兼產品開發。
主要開發產品：mdn（適配app和微信的移動端解決方案），pageui（移動端ui元件庫），formBuilder（可以讓前端建表和操作表的表單設計器）。

Cordova 是一個開源的移動開發框架。允許你用標準的 Web 技術——HTML5，CSS3 和 JavaScript 做跨平臺開發。應用在每個平臺的具體執行被封裝了起來，並依靠符合標準的 API 繫結去訪問每個裝置的功能。

本課程是一個系列基礎教程，目標是帶領讀者上手實戰，你可以掌握和 Cordova 相關環境搭建，建立專案，新增外掛等核心技能。隨心隨意打包自己的 App 應用。

導讀：混合開發 APP

近年來隨著移動裝置型別與作業系統的增多，使用者需求也日益增長，因此在專案啟動前，大家都會考慮到它的需求、成本、需要投入的時間，自己的團隊成員與技術成熟度等一系列因素。在這種情況下，App 的開發方案也盡顯多元。

曾經 Html5 有一段小浪潮，很多人看到或參與過這樣一個討論：是選擇原生開發、混合開發，還是 Web 開發？究竟哪個才是最佳實踐，筆者認為只有實踐過的人才知道，尤其是在當今這個充滿變數的移動網際網路時代。

混合移動應用程式開發的流行

當涉及到移動應用程式開發時，目前還沒有一種可以適合所有場景的方式。你可以選擇開發本地應用程式、基於網路的移動應用程式或是混合移動應用程式，而在以上選項中，混合移動應用程式開發應該是最具優勢的。

那麼什麼是混合應用程式開發呢？

App 混合開發，顧名思義是一個開發模式，它指的是開發 App 時一部分功能用 native 構建，另一部分功能用 Html5 構建。介於 web-app、native-app 這兩者之間的 App，英文名叫：Hybrid App。

其實，早在幾年前就已經出現了 App 混合開發模式，到2014年末才開始流行，2016年已經被廣泛使用，而2017年甚至達到鼎盛期。

混合開發模式的流行離不開它自身的優勢，因為 Hybrid App 總體特性更接近 Native App，但是和 Web App 區別較大，同時使用了網頁語言編碼，所以開發成本和難度比 Native App 要小很多。因此說，Hybrid App（混合模式移動應用）兼具“Native App 良好使用者互動體驗的優勢”和“Web App 跨平臺開發的優勢”。目前有名的混合開發框架有 Cordova，React-Native，Weex，Ionic 等。

Cordova 是 Apache 的一個開源專案。

Cordova 的體系架構從上往下分為，前端（html，js），Html 渲染引擎（各平臺的瀏覽器元件），cordova plugin。Cordova Plugin 為 Cordova 重最核心的部分，擴充套件了 js 訪問手機硬體和原生 API 的介面。

開發者可自定義 Cordova Plugin 擴充套件自己的原生介面，新增到 Cordova。總體來說 Cordova 即可以簡單的部署到多平臺，也支援單平臺的深層定製。

ReactNative

Facebook 推出的跨平臺框架。 使用 JS 和 React 就可以開發 App，React 是 Facebook 自己的 JS 庫。用 react-native 開發的介面會完全轉化為 native 介面。部署的時候不用重新編譯，可以熱載入而且可以植入原生程式碼。

react-native 是通過 JavaScript 將 native 中的方法對映到 JS 中，沒有使用瀏覽器元件（除低版本 iOS），嚴格意義上來說開發出來的並不是 Hybrid App。所以，開發時比較依賴 react-native 暴露出來的介面，除此之外，初次學習成本比較高，需要學習 react 的使用（一套前端不能複用到 PC、手機瀏覽器、微信公眾號網頁）。

Weex

阿里推出的跨平臺框架，Weex 的理念是write once run anywhere 也就是三端體驗一致，讓大家專注於業務，寫一份程式碼 iOS、Android、H5 都能夠適用。當然也有為企業節省開發成本的考慮。所以 Weex 技術方案的關鍵在於要擁有一個強大的解析渲染引擎。

Weex 所採用的技術架構方案：JS 引擎用 V8，JS 開發框架基於 vue.js。可以看出學習的成本也是非常高的。

Ionic

Ionic 是一個專注於用 Web 開發技術，基於 Html5 建立類似於手機平臺原生應用的一個開發框架。綁定了 AngularJS 和 Sass。這個框架的目的是從 Web 的角度開發手機應用，基於 Cordova 的編譯平臺，可以實現編譯成各個平臺的應用程式。

Ionic 所採用的 JS 開發框架基於 AngularJS，並且還提供了很多 UI 元件，封裝了 Cordova 常用的 Native API，但是看出學習的成本也是非常高的。

Cordova 的優勢在於你熟悉了 Cordova 開發方式，熟悉了一套框架，把 Html5 開發手機 App 的坑大部分都踩過一遍之後，開發第二個 App 會極大的提高你的開發速度！

所以那些會 Html5 技術想更進一步掌握跨平臺，高效能 App 開發技術，增加職場競爭力的前端人員。優秀的 Cordova 將是你的第一選擇。

Cordova——混合型框架中的佼佼者

Cordova 主張一站式開發，簡而言之，就是一個純 Html5 的開發人員也可以開發和釋出 Android 和 iOS 的 App了，而不需要專門的 Android 和 iOS 開發人員。

而在眾多混合型框架中，Apache 作為幕後老大，背景強大，Cordova 可以說是佼佼者。Cordova 基於標準的 Web 技術——HTML、JavaScript 和 CSS，用 JavaScript 包裝平臺的 API 供開發者呼叫，具備強大的編譯工具為不同平臺生成應用，同時擁有豐富的第三方資源和產業鏈。

Cordova 的特點有以下：

• 外掛豐富

Cordova 的外掛是其生態系統的重要組成部分，能幫助你快速地抵達移動裝置的原生 API 上面。它提供了Cordova 和原生元件相互通訊的介面，將其繫結到了標準的裝置 API 上。這使你能夠通過 JavaScript 呼叫原生程式碼。

Apache Cordova 專案維護著一組外掛叫做核心外掛。這些核心外掛可以讓你的應用程式訪問裝置功能，比如：電源、相機、聯絡人、攝像頭、麥克風、感測器、資料、網路狀態等。除了核心外掛，Cordova 還有一些第三方外掛提供若干個附加功能。

• 可移植性

基於瀏覽器的移動 Web 可移植性和跨平臺最突出表現為混合 App 也能節省跨平臺的時間與成本，開發者只需編寫一次核心程式碼就可部署到多個平臺，而原生 App 的跨平臺效能最差。

目前已有部分開發商採取了只編寫一次應用程式，就可以在6個主要的移動平臺和應用程式商店（App Store）裡進行釋出的方式，這些移動平臺和應用程式商店包括：iOS、Android、BlackBerry、webOS、Bada 以及 Symbian 等。

當然這種方式也存在缺點，筆者認為其最主要的缺點有兩個：一是效能不夠好，二是相容性較差。

但隨著 Android 5.0+ 的普及以及 iOS 9.0+ 的普及，效能缺陷和相容性問題都在減少，也就是說，如果未來某天 Android 最低支援版本從5.0開始，iOS 最低支援版本從9.0開始了，那麼混合開發 App 的缺點就變得不那麼明顯了。很明顯現在這都不是問題。

隨著移動網際網路的發展，現在基本是 App 滿天飛，如果我去下載一個 App，那麼基本都能看到有兩種選擇，一種是 Android 版本，一種是 iOS 版本。不管我的手機是哪種作業系統，安裝完一個 App 之後，後續如果有新的版本釋出的時候，我還必須去更新，才能享用新版本里的功能。比如我裝了“京東”這個 App，前幾天正好碰到“618”活動，那麼之前一個月 App Store 就提醒我要去更新最新的 App 版本，以免錯過“618”活動中新的功能使用。相對來說 iOS 系統更新 App 比起 Android 系統使用者體驗會好一點，但是還是稍顯麻煩。

那麼有沒有一種方式，我只需要開發一個 App 版本，就能去適配通用的作業系統呢，不僅可以適配 Android、iOS，還可以適配其他系統，比如 Windows Phone、 Palm WebOS、Blackberry 等等。有，Cordova 就能提供這種能力，程式碼寫一次，就能到處執行，跟我們日常開發網站效果一樣，基於寫 Web App，根據輸出平臺要求不同，就能提供不同型別的安裝包。Cordova 其設計初衷是希望使用者群體能夠通過跨平臺開發的方法降低原生開發的成本，為此，開發人員需要安裝原生開發環境，配置工程，使用 HTML5、CSS3、JS 和原生 SDK 生成應用。

使用 Apache Cordova 的人群

• 移動應用開發者，想擴充套件一個應用的使用平臺，而不通過每個平臺的語言和工具集重新實現。
• Web 開發者，想包裝部署自己的 Web App 將其分發到各個應用商店門戶。
• 移動應用開發者，有興趣混合原生應用組建和一個 WebView（一個特別的瀏覽器視窗）可以接觸裝置 A 級 PI，或者你想開發一個原生和 WebView 元件之間的外掛介面。

或許在未來幾年，Android 和 iOS 開發人員需求量將會逐漸減少，而 Html5 開發人員需求量會與日俱增，那麼，從 Android 或 iOS 轉型為 Html5 的開發人員會更加地走俏。

下一篇

更多課程內容

導讀：混合開發 APP

第03課：Android 與 IOS 打包

作者撰寫中…

第04課：JS 是如何和本地 API 進行通訊

作者撰寫中…

第05課：利用 Hooks 預處理打包流程

作者撰寫中…

第06課：Cordova Plugin 的使用和自定義

作者撰寫中…

第07課：手機按鍵與 Cordova

作者撰寫中…

第08課：App 自動更新設計

作者撰寫中…

第09課：Cordova 實戰開發技巧（一）

作者撰寫中…

第10課：Cordova 實戰開發技巧（二）

作者撰寫中…

第11課：Cordova 實戰開發技巧（三）

作者撰寫中…