创建 Apache Cordova 应用

这篇文章介绍了用于 Apache Cordova 的 Visual Studio 工具,是一个预发布的软件。所述功能呈现在预览版中,并可能会发生更改。你可以从 Microsoft 下载中心下载预览版。

使用适用于 Apache Cordova 的 Visual Studio 工具创建的应用通过使用 web 技术如 HTML 和 CSS 使用 Cordova 访问本机 API。 通过降低或去除对本机代码的需求,应用可以跨多个设备工作。

某些任务对于大部分 Cordova 应用是通用的。 这些方法包括:

创建 Cordova 项目

对于使用适用于 Apache Cordova 的 Visual Studio 工具进行开发的介绍和 Visual Studio 中的 Cordova 项目的项目结构的描述,请参见Create Your First Hello World App

选择第三方 JavaScript 框架

通常,在创建 Cordova 应用时,你还需要包括第三方 JavaScript 框架以简化应用程序开发或遵循设计应用的最佳实践。 你可以不局限于一个框架! (也不是必需的。 这些框架不是 Cordova 的一部分。)

第三方 JavaScript 框架可能包括各种功能和设计特性,如:

  • 模型-视图-控制器 (MVC) 设计模式帮助隔离应用程序问题。 AngularJSBackbone 是其中两个流行的例子。

  • UI 控件和样式。 UI 框架(或库)通常包括具体的控件,如网格控件,有时是 CSS 样式表。 有关更多信息,请参见构建 UI。

  • 导航模型。 类似 AngularJS 和开源 WinJS,其它框架提供一个单页面导航模型来帮助启用类似应用的行为。

构建 UI

Cordova 应用可以在除 Windows 和 indows Phone 8.1 以外的所有平台上的 WebView 控件中运行,所以它们看起来更像 web 应用。 当为客户计划 UX 时,重要的是要问几个问题:

  • 你想让你的应用程序在不同的平台上看起来一样吗?

    如果你的目标是为每个平台实现本机外观,开发成本会更高,本机外观可能难以实现。

  • 如果你需要本机外观,你比其它的更面向特定平台了吗?

    一些 UI 框架可能类似于特定平台的外观。 但他们通常提供品牌化经验,并打算与跨平台看起来一样。 一些常用 UI 框架的例子包括 IonicBootstrap

重要的是要遵循特定平台的设计指南,以确保你的应用能通过审查流程。 应用不一定需要像本机一样才能获得应用商店的批准,但它们应该表现得更像应用而不是网页。 有关详细信息。 请参见Get Your Cordova App Approved by the App Stores

如果你的 UI 相对简单或者你当前拥有开发资源,则可以使用跨平台 CSS 的最佳实践(如使用 CSS3 Flexbox 和 @media 查询)创建自己的 UI。 有很多提供此类信息的 web 资源。

如果你要构建自己的 UI,需要记住几件事:

  • 如果你面向 Android 4.4 或更新版本(基于 Chromium 的浏览器)、Windows 或 Windows Phone,最好是支持目前的 CSS 标准和其它 web 技术。 有关支持功能的具体信息,请参阅 caniuse.com

  • 如果面向 iOS 或 Android 4.4 之前的版本,浏览器基于 WebKit。 (Ripple 仿真器使用已安装的 Chrome 版本,表现得更像 Android 4.4。)一些 WebKit 浏览器的行为是不同的。 例如,WebKit 浏览器没有为 vw 和 vh 单元提供一致的支持,这在设计响应 UI 时是有用的。

提示

使用你的项目中的合并项文件夹来处理不能以更通用的方式编码的平台的差异。

关于使用一些跨平台的 UI 技术的示例,请参见 AngularJS 母版详细信息页示例

添加本机功能(插件)

Cordova 提供的最重要的功能之一是支持允许访问本机功能的插件,如地理位置和电池。 使用插件,你可以编程为通用的 JavaScript API。 核心插件通常支持所有主要平台,而第三方插件可能需要更多的调查。 如果插件支持不可用,你可能需要自定义现有插件或自己编写,这将需要本地代码。

有关详细信息,请参阅 管理用 Visual Studio Tools for Apache Cordova 生成的应用的插件

添加连接的服务

如果你的应用程序装置使用 Azure 或 Office365 服务,请参见 将连接的服务添加到用 Visual Studio Tools for Apache Cordova 生成的应用。 Azure 移动服务的核心插件可用于 Visual Studio 中的 配置设计器

关于把 Azure 服务添加到适用于 Apache Cordova(AngularJS 版本)的 Visual Studio 工具的任务列表示例应用程序中的信息,请参见创建 ToDoList 示例应用

添加平台特定资源

要获得从应用商店下载应用程序的批准,特定于平台的资源如启动画面和商店图标是必需的。 你的项目中的 res 文件夹包含这些资源。 你还可以使用 res 文件夹添加自定义配置文件。 有关详细信息,请参阅 配置用 Visual Studio Tools for Apache Cordova 生成的应用

请参见

其他资源

AngularJS 示例

WinJS 示例

Backbone 示例