使用 Cordova+Visual Studio 创建跨平台移动应用（1）

1简介

本章节是关于Visual Studio Tools for Apache Cordova的，目前此产品只发布了预览版。Visual Studio for Apache Cordova帮助熟悉Visual Studio用户的.Net程序员能够使用这个宇宙最强的开发IDE通过编写Html、CSS、Javascipt来创建iOS、Android和Windows的本地应用程序。

1.1概述

使用Visual Studio for Apache Cordova你可以为iOS、Android和Windows 创建跨平台的应用。目前Visual Studio for Apache Cordova是一个只支持Visual Studio 2013 Update 4 或 Visual Studio 2015 Preview的扩展。目前支持以下平台。

• Android 2.3.3 and later (4.4+ provides the best developer experience)
• iOS 6, 7, and 8
• Windows 8 and 8.1
• Windows Phone 8 and 8.1

1.2功能

你可以使用你在Web开发（HTML, CSS, and JavaScript）上的丰富技能来编写应用程序代码，只用编写一套代码但又可以同时运行在iOS、Android和Windows这些平台上。Apache Cordova是一个为开发者提供本地硬件（摄像头、GPS定位、条形码扫描等）API的开源项目，这不同于在浏览器里面访问体验，你将为每个平台都创建一个可以在App Store里面下载的本地应用。

1.3开发

1.3.1编写代码

诸如智能感知、语法高亮显示，这些功能都可以在编码的时候体验到。

1.3.2调试与分析

你不需要为不同的平台选择不同的工具，只需要创建breakpoints，你就能在Visual Studio中进行iOS、Android和Windows Store这样不同的调试任务。

1.3.3预览与测试

无论你是想用iOS、Android或Windows 模拟器，或是新开发的Visual Studio Emulator for Android，或是你的手机、平板，本工具提供的调试器和启动菜单都能够帮你简单的确认你的应用程序外观和功能。

1.3.4示例程序

这里有一些示例程序，你或许想看看Apache Cordova能做什么。

• AngularJS Sample
• BackboneJS Sample
• WinJS Sample

2安装

本章节是关于安装Visual Studio Tools for Apache Cordova的，文中出现的大多数软件你都可以从Microsoft Download Center找到你想要的下载链接。

2.1基本安装

2.1.1必要环境

• 操作系统：Windows 7, Windows 8, Windows 8.1, or Windows Server 2012 R2.

重要：

Win7目前只能开发Android、iOS应用，不能开发Windows或Windows Phone应用.

• Visual Studio 2013 Update 4 (Professional, Ultimate, Premium, Community) 以及以下功能组件:
  • Tools for Maintaining Store apps for Windows 8
  • Windows Phone 8.0 SDK

你可以在一个已安装的Visual Studio 2013 Update 4上增加这些组件。打开控制面板，选择程序和功能子项。在软件列表中找到Visual Studio 2013，右键选择更改。在弹出的Visual Studio安装窗口中选择修改。在功能清单中，选择下图所示的功能。.

如需要为特定的平台生成应用程序，你还需要以下一些额外的软件环境。

• Android模拟器需要电脑上安装 Intel HAXM driver. 参考Run Your Apache Cordova App on Android.
• Windows Phone模拟器电脑安装Hyper-V. 参考Hyper-V System Requirements.
• iOS和iOS模拟器需要一个能运行Xcode 6的Mac电脑. 参考Install Tools to Build for iOS.

2.2.2下载软件

前往Microsoft Download Center下载Visual Studio Tools for Apache Cordova扩展，参考后面的文章来安装配置此扩展。

重要：

如果安装过CTP for Visual Studio Tools for Apache Cordova的历史版本，请现在控制面板的程序与功能中卸载历史版本.

在Visual Studio 2015 Preview中Visual Studio Tools for Apache Cordova已经作为一个可选项包含在安装包内。

2.2.3安装配置

在使用Visual Studio 2013 Update 4安装之前，你先要安装一个补丁Windows Management Framework 3.0。然后在安装软件之前，还要安装以下所示的第三方软件，因为要支持很多平台，以下软件但多数是开源软件。

• Joyent Node.js，使Visual Studio能够集成Apache Cordova Command Line Interface (CLI)和Apache Ripple 模拟器.
• Git CLI ，如果需要特殊的Cordova插件，则可以使用Git URIs手动安装.
• Google Chrome，运行能调试、预览iOS、Android的Apache Ripple模拟器.
• Apache Ant 1.8.0 or later，生成Android应用程序.
• Oracle Java JDK 7 ，生成Android应用程序.
• Android SDK ，生成Android应用程序和Ripple.
• SQLite for Windows Runtime， is required to add SQL connectivity to Windows apps (for the WebSQL Polyfill plugin).
• Apple iTunes 在使用电脑连接iOS设备部署开发的应用程序时需要用到.

安装扩展和依赖程序

你可以通过安装Visual Studio Tools for Apache Cordova扩展的来联网自动安装以上的扩展和依赖程序。也可以通过修改System Path来手动安装这些第三方软件（请参考手动安装配置）。

重启电脑

注：仅当以上组件都正确安装了后才能重启电脑。

更新

打开Visual Studio, 选择Tools=>Extensions and Updates=>Updates.如果存在Visual Studio Tools for Apache Cordova的更新,请安装更新.

注意：

在你首次安装此工具并生成首个应用程序时Visual Studio需要联网下载Cordova tools，这会耗费一些时间，你可以在输出窗口中查看进度与状态.

安装iOS依赖

如果你想在iOS模拟器或者iOS设备上运行你的应用程序，你需要在Mac电脑上安装一个远程代理（Remote Agent），参考Install Tools to Build for iOS.

2.2.4手动安装配置

如果你在前面没有选择安装全部扩展，你可以在安装本工具后手动安装这些扩展。

警告：

安装以上扩展除了Java，没有顺序要求，你必须在安装Android SDK前配置好Java.

• Joyent Node.js

推荐安装 x86 版本的 Node.js.

• Google Chrome
• Git Command Line Tools

当安装Git command line tools时，选择增加Git到系统路径下这一项"adds Git to your command prompt path".

警告：

Git command line tools默认安装1.9.3版本，如果安装1.9.0版本会导致错误.

• Apache Ant
  • 下载并解压缩Ant到本地路径下C:/ant-1.x.x
  • 在环境变量中增加"ANT_HOME"并指向文件夹.
  • 在环境变量的System Path中增加：%ANT_HOME%\bin
• Oracle Java 7
  • 在环境变量增加JAVA_HOME值为C:/Program Files/Java/jdk1.7.0_55
  • 在环境变量的System Path中增加：%JAVA_HOME%\bin
• Android SDK with the following SDK packages:
  • Android SDK Tools (latest version)
  • Android SDK Platform-tools (latest version)
  • Android SDK Build-tools (latest version)
  • Android 4.4.x (API level 19) with the following packages:
    • SDK Platform
    • ARM EABI v7a System Image
    • Intel x86 Atom System Image
    • Google APIs (x86 System Image)
    • Google APIs (ARM System Image)

请参考下图所示的packages，使用Android SDK Manager来安装。

在环境变量中增加ADT_HOME 指向SDK安装文件夹.

在System Path中增加 %ADT_HOME%\tools;%ADT_HOME%\platform-tools

提示：

请将Android SDK安装在默认位置C:\Program Files (x86)\Android\android-sdk.

• Apple iTunes (x86, x64)
• SQLite
• WebSocket4Net (required if you're developing your app on Windows 7)
  • 在CodePlex 下载WebSocket4Net(0.9).Binaries.zip.
  • 打开下载的压缩文件, 将net45\Release\WebSocket4Net.dll复制到%ProgramFiles(x86)%\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\WebClient\Diagnostics\ToolWindows文件夹中

Android SDK Manager安装

在下载上文提到的插件时可能遇到GFW的封锁，此时打开SDK Manager的后台进行，配置改用http模式，并更改hosts文件，添加Google的正确解析地址。

建议使用前百度搜索一下下文的域名对应的解析地址：

203.208.46.146 www.google.com

74.125.235.226 developer.android.com

203.208.46.146 dl.google.com

203.208.46.146 dl-ssl.google.com

2.2.5安装iOS工具

安装iOS工具需要一些额外的步骤，请参考Install Tools for Build to iOS。

2.2.6设置系统环境变量

Visual Studio会自动在系统配置中发现安装的第三方软件，请在系统环境变量中检查以下配置：

• ADT_HOME 指向Android 安装路径.
• ANT_HOME 指向Ant 文件夹.
• GIT_HOME 指向Git 安装路径.
• JAVA_HOME指向Java安装路径.

Visual Studio在生成和运行应用程序时需要这些环境变量. 你可以通过Visual Studio的选项设置对话框去修复这些环境变量. 你也许会因为以下原因想要重载默认的配置:

• 在你进行上述配置后，如Visual Studio无法验证文件路径，将会在输出窗口显示错误信息提示.
• 你安装了软件的多个版本，但是你只想使用特定的版本.
• 你想要你的全局环境变量与Visual Studio的环境不同.

修改Visual Studio的环境变量

• 打开Visual Studio的menu bar, choose Tools, Options.
• 在Options对话框, 选择Tools for Apache Cordova, 然后选择Environment Variable Overrides.
• 开始修改:
• 在check box上打钩，然后就能修改地址了.
• 如果设置的路径信息有错误, Visual Studio将会随之提示错误，并显示在界面上.
• 如果你想恢复默认的设置，取消check box的钩钩，或者Reset to Default.
• 当你做了修改以后记得点OK按钮来保存新的配置.

2.2.7手动更新Cordova的版本

Visual Studio需要特定版本的Apache Cordova. 目前正在开发选择Cordova版本的功能，遗憾的是现在所有项目都只能用同一个版本的Cordova，并需要为这个特定的Cordova版本在系统中打补丁。.

警告：

给Visual Studio安装Cordova补丁不受官方支持. 请确认自己是高级用户（高手？），那么我想你能够处理下面这些操作，以及随之产生的意外.

名称解释

vs-mda	Visual Studio Tools for Apache Cordova
vs-mda-remote	安装在Mac上的远程调试发布iOS的工具

升级Visual Studio支持不同版本的Cordova

• 在安装Visual Studio Tools for Cordova完成之后创建一个空的Cordova项目.
• 打开命令行工具，输入以下命令:

cd %appdata%\npm\node_modules\vs-mda\

如果你是手动安装的Node.js, vs-mda可能被安装在一个不同的路径下. 具体情况请看上面命令的执行输出信息.

• 在命令行工具中，输入以下命令:

npm install cordova@version --save

version是参数表示Cordova CLI版本号，例如4.1.0.

如果你已经Cordova安装到其他位置了，你可以输入"cordova --version"命令来查看已安装的Cordova版本信息.

重要：

请确定你执行前面命令的时候，加"-g"（Globle Switch）参数.

• 打开Visual Studio项目运行清理解决方案，这样新版本就能生效了.

回滚到一个特定的Cordova版本

• 打开命令提示行并输入:

npm uninstall -g vs-mda

Visual Studio将会在下次生成项目时，自动重新安装vs-mda.或者, 在C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions下搜索vs-mda文件，找到并修改package.json关联到你想要用的version上. 当修改package.json完成后, 在相同目录下执行以下命令:

npm install -g vs-mda

为确保Mac电脑上能正确生成iOS应用, vs-mda-remote必须与Visual Studio用相同的Cordova版本. 具体步骤请参考Install Tools to Build for iOS.

在Mac上更新vs-mda-remote支持不同版本的Cordova

• 打开Mac上的命令行程序，并输入以下命令:

cd /usr/local/lib/node_modules/vs-mda-remote

如果安装vs-mda-remote时没有选择globally (-g)那么可能得找找了.

• Type this command:

sudo npm install cordova@version --save

请确定version参数要与已安装的Cordova CLI保持一致. 例如, 4.1.0.

重要：

请确定前面所有命令都是为Every One安装的-g globe switch.

如果你已经Cordova安装到其他位置了，你可以输入"cordova --version"命令来查看已安装的Cordova版本信息.

打开Visual Studio项目运行清理解决方案，这样新版本就能生效了.

在Mac上回滚vs-mda-remote到特定的版本

• Open the Terminal app on your Mac and type:

sudo npm uninstall -g vs-mda-remote

• Type the following command:

sudo npm install -g vs-mda-remote --save

3附件

菜单	模块	下载地址	说明
简介	Visual Studio Tools for Apache Cordova	http://www.visualstudio.com/en-us/explore/dn841948#Fragment_Overview	英文原文，资源下载学习页
	Apache Cordova	http://cordova.apache.org/	开源项目介绍
	Visual Studio Tools for Apache Cordova公告	http://go.microsoft.com/fwlink/?LinkID=518763	更新说明的博客
	Visual Studio Emulator for Android	http://go.microsoft.com/fwlink/?LinkID=518404	介绍
	AngularJS Sample	http://go.microsoft.com/fwlink/?LinkID=398516	示例源码
	BackboneJS Sample	http://go.microsoft.com/fwlink/?LinkID=398517	示例源码
	WinJS Sample	http://go.microsoft.com/fwlink/?LinkID=398518	示例源码