Apache Cordova 是一個移動應用程式開發架構，可以使用該架構，通過 HTML5 和純 JavaScript 建立跨平台移動應用程式。跨平台就是應用程式的代碼庫隻需使用 HTML5 和 JavaScript 編寫一次，就可以在 Android、iOS 或 Windows Mobile 等多個目标移動平台上運作。
Web 開發社群不斷在創新，而且借助 Angular、jQuery 和 React 等架構的最新發展，傳統 Web 應用程式目前在功能上幾乎變得與特定于平台的原生應用程式并無差别。
從傳統角度講，通常将移動應用程式開發視為一個包含特定移動平台知識的特定技能集。每個平台都有自己的一組規則和架構。這些技能是僅适用于某個平台的非常具體的技能。此外，我不确定可以合理地跨平台重用多少功能（比如 UI 幀或原生 API 調用）。這意味着對于許多在桌面/平闆電腦/Android 和 iOS 使用者中擁有龐大客戶群的用例，在針對目标平台來管理每個應用程式時，很可能會做一些多餘的開發和維護工作。
對于以 Java 開發為主的我而言，我發現這些平台依賴性與 Swing 非常相似。當然，這沒有什麼不妥，但考慮到目前的産品釋出和上市速度，堅持平台原生應用程式開發已成為一種艱巨的挑戰。這種情況迫使移動開發人員社群進行自我改造。此次改造是為了滿足當今的現代移動世界中的速度、可伸展性和可用性需求。
回到移動應用程式開發的話題，我正在使用 Cordova 架構。它似乎有一個龐大的、活躍的社群和使用者群。您可以使用在 Web 應用程式開發社群中最常見的技術，建構跨平台的 iOS/Android/Windows 應用程式。Cordova 應用程式可以使用 HTML5 和 JavaScript 進行開發，然後它在特定于原生移動平台的作業系統級 API 調用上有一個 JavaScript 抽象。
如果您是 Web 應用程式開發人員，在深入分析後您會發現，Cordova 混合移動應用程式開發中的相似之處要多于不同之處。大量的特定于平台的原生特性能夠以插件的形式進行提供。這些插件可以使用純 JavaScript 來調用，這使得移動 Web 應用程式開發變成了一種無縫體驗。當然，借助單一代碼庫，您現在可以将應用程式釋出為同時相容 Android 和 iOS 的可執行程式。
最重要的一點是：Cordova 是免費和開源的。以下是開始使用 Apache Cordova 的一些技巧。
深入剖析 Apache Cordova
要建構 Cordova 混合應用程式，您需要做的第一件事是設定 NodeJS。除此之外，還需要選擇一個模拟器。就我而言，我選擇使用 Android 作為目标平台。
Cordova 可用作 node 包，可使用以下指令進行安裝：
npm install -g cordova
成功安裝 cordova 包後，下一步是建立一個架構應用程式。在這裡，我想建立一個名為
cordovaapp
的應用程式。為此，我可以使用以下指令：
cordova create cordovaapp
 | 最簡單的項目結構類似于左側所示的圖。 突出顯示的部分包含應用程式的 html 檔案、css 檔案和 JavaScript 檔案。這些檔案專門放在 www 檔案夾中。 這裡的一個重要檔案是 config.xml，它用語設定特定于應用程式的配置項。 |
我們可以使用
cordova platform
列出可用的平台。
為了配置
cordovaapp
，我們将為應用程式添加 3 個目标運作平台：浏覽器、iOS 和 Android。
cordova platform add browser
cordova platform add android
cordova platform add ios
添加平台會相應地更新
config.xml
檔案，以反映您的應用程式配置。
現在，我們可以啟動 Android 模拟器并檢視該應用程式的實際運作情況。
為此，您可以運作 cli 指令
cordova emulate android
。如果已經正确配置了您的模拟器，您可以看到預設的應用程式。
當然，也可以使用 cli 指令
cordova run browser
在浏覽器中模拟應用程式。
我們的應用程式基本上什麼都不做。是以我們将使用 JavaScript 向我們的應用程式添加一些 jQuery 和 BootStrap 代碼，并添加照相機插件來測試原生照相機 API 調用。
cordova plugin add cordova-plugin-camera
成功添加該插件并更新 config.xml 檔案後，我們可以提供一些 HTML 和 JavaScript 代碼與照相機進行互動。
| <div class=”container”> <div class=”panel panel-default”> <div class=”panel-heading”>Apache Cordova | Camera</div> <div class=”panel-body”> <p> Once a picture is taken, it would be rendered in the panel below</p> <p> <button type=”button” class=”btn btn-success” id=”cameraButton”> Click here to take a picture </button> </p><div id=”capturedImageDiv” > <img id=”capturedImage” style=”width: 200px; height: 200px”></img> </div> </div> </div> </div> | var app = { // Application Constructor initialize: function() { document.addEventListener(‘deviceready’, this.onDeviceReady.bind(this), false); },// deviceready Event Handler // // Bind any cordova events here. Common events are: // ‘pause’, ‘resume’, etc. onDeviceReady: function() { this.receivedEvent(‘deviceready’); },// Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); console.log(‘Received Event: ‘ + id); console.log(‘camera = ‘+JSON.stringify(navigator.camera)); $(‘#cameraButton’).click(cameraButtonClicked); } };app.initialize();function cameraButtonClicked(){ console.log(‘cameraButtonClicked’); var camera = navigator.camera; console.log(‘camera = ‘+camera); camera.getPicture(function(imageURI){ var image = document.getElementById(‘capturedImage’); image.src = imageURI;}, function(){},{ quality: 50, destinationType: Camera.DestinationType.FILE_URI } ); } |
現在我們可以使用更新後的建構版本再次運作 Android 模拟器，還可以與照相機互動并儲存拍攝的照片。
| | |
要檢視該架構的描述和插件示範，請點選此處通路 Apache Cordova 官方網站。但是，我希望這篇對 Apache Cordova 的概述和快速剖析已經幫助您了解如何開始使用這個優秀的開發工具。