Apache Cordova:一个跨平台移动应用程序开发的很好选择

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 的概述和快速剖析已经帮助您了解如何开始使用这个优秀的开发工具。