使用Cordova CLI构建和运行

[原文发表地址]:Build and Run using Cordova CLI

[原文发表时间]:11/17/2014

随着Apache Cordova的诞生,Web开发人员可以通过使用HTML,CSS和JavaScript的跨平台移动应用来实现最大化的代码复用。有关Apache Cordova如何工作的详细信息,请阅读本博客

为了建立这样一个跨平台多设备应用程序,Visual Studio使用Cordova命令行界面(CLI),一款Cordova实用工具。CLI允许Visual Studio一次构建多个平台项目,抽象出许多低级的shell脚本功能。CLI将一套共同的 web 资源复制到每个移动平台的子目录中,针对每个项目,更改必需的配置,然后运行生成脚本来生成应用程序的二进制文件。CLI还提供了一个通用的接口,通过这个接口,你可以在你的应用程序中使用插件。我们来看看,当构建这样的应用程序时,Visual Studio是如何人使用Cordova CLI的。

VS如何与Cordova CLI结合来构建多设备混合应用程序?

当你在Visual Studio中创建新的Cordova项目时,你会看到如下图所示左边的布局。为了在Visual Studio项目结构中利用 Cordova CLI工具,Visual Studio使用一个被称为vs-mda的CLI预处理器。vs-mda之后的目标是预处理这个Visual Studio工程(下图左边),之后生成一个Cordova CLI工程(下图右边),然后使用Cordova构建命令建立一个本地平台的应用程序,使应用程序最终工作在Cordova项目上。

clip_image001

我们的预处理器(vs-mda)是一个JS脚本节点,这些脚本是一系列Cordova CLI命令集合在一起的字符串组成,作为构建一部分:

1. 在 bld\ <config>文件下创建一个Cordova项目。(Cordova创建命令)

2. 添加目标平台(对于 android, cordova平台,添加android系统)

3. 准备目标平台(拷贝文件,诸如www/merges,更新config.xml文件,更新android包名称,应用代码签名证书,等等)

4. 添加/更新插件。还要确认根据需要运行的插件添加/移除命令逻辑:

a. 添加Cordova 插件

<VS Solution>\<VS Project>\bld\Debug\plugins\org.apache.cordova.battery-status

b.如果config.xml中有一个插件参数,那么这些参数也被传递。例如,如果你在安装了一个Facebook的插件:

添加Cordova 插件

<VS Solution>\<VS Project>\bld\Debug\plugins\phonegap-facebook-plugin --variable APP_ID="123456789" --variable APP_NAME="myApplication"

5.最后,如果这只是一个构建,构建Cordova的构建命令就是用于构建目标本地平台的应用程序(对于android,Cordova运行android系统)

6.另外,如果这个部署命令在VS上运行,等效于下面的CLI在运行(对于android,Cordova运行android系统)

7.如果启用了调试,VS 也附加了调试器后运行上面的命令。

如下所示,像其它Visual Studio工程一样,你可以通过工程的BUILD菜单或者debug 工具的运行命令来触发构建命令。运行这个工程,它会生成此平台特定的程序包,可以用于部署和测试。

clip_image003

需要提到的是,Cordova构建本机应用程序,在其编译步骤中,它需要已经安装了SDK的目标平台。

因此,

  • 编译android平台的应用程序,需要安装android SDK包(这是作为延伸的一部分安装的)
  • 对于windows程序,需要windows SDK与之相关联的MS-Build 生成目标
  • 对于构建iOS软件包,需要一台具有XCode和安装了XCode命令行的Mac

正如上述,要能够构建为iOS平台,iOS的SDK必须安装在系统上,因此iOS应用程序不能建立在Windows上。因此要构建适用于iOS平台的应用,我们提供了一个远程生成代理vs-mda-remote,如果你在Mac上使用Visual Studio内置的Parallels,这个代理就可以运行在远程Mac机器或本地机上。对于构建iOS,VS-MDA准备CLI项目,正是因为对于任何平台,它会为其建立本地的,然后转移到Mac上的VS-MDA-远程编译和打包传输内容。

完整的构建过程可以表示为:

clip_image005

如何运行多设备混合应用程序?

本机应用程序建成后,Visual Studio中应用不同的技术来运行/模拟在不同平台上的应用程序。

例如,就android来说,CLI‘Cordova 模拟安卓’命令使用安卓调试桥将应用程序部署在模拟器正在运行的实例上,该实例是用AVD(安卓虚拟设备)管理器配置生成的。如何配置安卓设备或模拟器,请参考这里。在将来的版本中,我们打算加强相互作用,使VS 允许更灵活的选择您已经配置了本地的 Android 模拟器和允许设备连接到您的主机。

为了在iOS上运行应用程序,VS使用ios-sim启动远程Mac机器上的模拟器。如果要在设备上运行应用程序,VS构建,接着将应用程序添加到iTunes,最终从windows上部署该应用程序到您的设备上。在CTP3上,我们还支持直接部署,启动和调试应用程序在您的设备上,该设备能连接到远程Mac构建代理。

我们还为您提供一个选项,启动在 Apache Ripple 模拟器中的应用程序之前将其部署到您的设备上。通过Ripple ,可以使用传统的Web开发人员的工作流程来构建应用程序,甚至还可以模拟常见的Cordova插件,比如摄像头。从那里,您可以继续进入本地设备和模拟器,添加一些更先进的功能,并完成和完善每一个目标设备上的应用程序。

如果您已经安装了工具,并正在积极的使用它,谢谢大家!如果没有安装,安装Visual Studio 2015 Preview并且勾选“Tools for Apache Cordova”选项,或者安装Visual Studio 2013 Update 4Visual Studio Tools for Apache Cordova CTP 3。我们优先改进的地方主要是基于您的反馈,因此,不要感到害羞,您可以通过 UserVoice, Twitter, StackOverflow, and email 联系到我们。