Xcode iOS PhoneGap入门

本文介绍了利用Xcode建立PhoneGap应用程序环境和工作流程所需的步骤，该应用程序的目标是iOS设备。 Xcode是由Apple提供用来开发OS X和iOS应用程序的集成开发环境（IDE）。 其中，iOS是Apple的iPhone、iPad和iPod触摸设备的移动操作系统。 PhoneGap是开源的应用程序平台，它能够让你使用HTML和JavaScript创建本地安装的移动应用程序。

为PhoneGap应用程序设置Xcode的第一个步骤是从Apple网站上下载并安装Xcode IDE。 你可以从 Apple开发人员网站（Apple developer site）上下载Xcode。 在下载Xcode之前，你必须以开发人员的身份在Apple上进行注册。 在你注册之后，你就能够免费访问Xcode、iOS设备仿真器和Apple开发人员文档。 如果你希望将你的应用程序部署至实际设备，或通过iTune商店发布你的应用程序，那么你必须以iOS开发人员的身份在Apple上进行注册，并交纳与之相关的年费。

在Xcode下载完成之后，你只需按照安装向导完成安装过程即可。

一旦你成功地完成Xcode的安装，接下来的一步则是下载和安装PhoneGap。

1. 用你的浏览器访问 honeGap下载页面（PhoneGap download page）（http://phonegap.com/download），并单击橙色Download链接进行下载。

注： 下面所示的步骤适用于PhoneGap 1.4.1，然而，该过程应该适用于或类似于所有的PhoneGap版本。

1. 解压缩ZIP文件内容。
2. 浏览至已解压缩文件的 libs/ios/ 文件夹，并双击PhoneGap-1.4.1.pkg包安装程序。

该操作会启动PhoneGap安装向导，它将在你的系统中对PhoneGap的安装过程进行引导（参见图1）。

1. 按照安装程序提供的安装说明进行安装，直到你看见“Thanks for installing PhoneGap 1.4.1!”。

当你看见这个提示时，PhoneGap安装已经完成。 现在，你可以在Xcode中创建你的第一个PhoneGap项目。

PhoneGap安装程序为Xcode添加一个PhoneGap项目模板，该模板能够简化PhoneGap应用程序的创建。

1. 首先，单击Xcode欢迎屏幕上的Create A New Xcode Project（参见图2）。 此外，你也可以选中File > New > New Project来创建新的PhoneGap项目。

创建新的Xcode项目的第一个步骤是选中一个项目模板。

1. 在iOS > Application下找到并选中PhoneGap-based Application模板，然后单击Next（参见图3）。

在选中项目模板之后，你需要对你的项目进行命名。 你可以为它起一个能够表明你将要建立什么项目的名称。

1. 在本例中，只需输入Hello，因为你将建立一个简单的Hello World应用程序（参见图4）。

此外，在New Project Options屏幕上，你还需要输入公司标识（company identifier）。 公司标识（company identifier）是与产品名称相关的前缀，用来为你的应用程序创建独特的包标识（bundle identifier）。 在Apple Provisioning Portal中，包标识（bundle identifier）应该与你为独特应用程序所创建的App ID相匹配（参见图5）。

如果你不确定在此处输入什么，或如果你不希望立即在设备上进行部署或发布该应用程序，那么你可以输入任何你希望的内容，或保留空白。 你可以稍后通过编辑在Xcode项目概要屏幕中的Identifier字段或手动编辑你的项目的Info.plist文件来改变包标识（bundle identifier）。

注：在项目选项屏幕上，你也能找到打开Automated Reference Counting (ARC)的选项。 如果你不希望在你的PhoneGap应用程序中编写任何本地代码，那么你可以忽略该选项。 如果你需要编写PhoneGap本地插件或本地代码，那么你只需考虑ARC即可。 PhoneGap本地插件允许你编写属于自己的本地代码和JavaScript API，以便对PhoneGap容器的能力进行扩展。

无论ARC是否启用，PhoneGap项目均能运行。 如果启用ARC，那么你不必在任何本地代码中使用保留和释放指令来管理内存分配。 Xcode LLVM编译器会自动地为你生成适当的保留和释放指令。 如果未启用ARC，那么你必须手动地管理内存。 记住，ARC仅适用于本地代码，而不适用于HTML或JavaScript代码。

1. 单击Next。
2. 在你的文件系统中选中一个文件夹，而你的PhoneGap项目将驻留在该文件系统中（参见图6）。

1. 单击Create。

你的PhoneGap项目将在Xcode中进行创建。 但是，在你的项目完成并运行前，还有一些步骤需要你完成。

用来为你的PhoneGap项目创建界面的所有HTML和JavaScript均需包含在一个www文件夹中。 起初，该www文件夹在你的PhoneGap项目中并不存在。 为了创建该文件夹，首先你必须运行相应的应用程序。

1. 在窗口左上角单击Run运行该应用程序（参见图7）。 此外，你也可以选中Product > Run。

Xcode会尝试在iOS仿真器中启动PhoneGap应用程序。 对于第一次启动，你将看到错误信息“ERROR: Start Page at 'www/index.html' was not found”。 别担心，这很正常！ 尽管如此，在第一个步骤期间，已创建了www文件夹。 在将它添加到你的项目之后，你就不会再遇到该错误。

1. 为了将www文件夹添加至你的项目，按住Ctrl键并且单击项目根目录，然后选中Add Files To "Hello"（参见图8）。

1. 在打开的对话框中，选中新创建项目中的www文件夹。 你需要确保选中实际的www文件夹，而不是父文件夹或该文件夹中的相关内容。
2. 选中Create Folder References For Any Added Folders（参见图9）。 如果你未选中该选项，那么你的项目将出现错误。

1. 单击Add。

现在，在你的项目根目录之下，你应该能够看到www文件夹（参见图10）。

1. 单击Run以便再次启动该项目。

至此，你应该已正确配置你的项目，并且应该能够在iOS仿真器中启动它。 如果你没有改变www文件夹中的任何HTML文件，那么当在iOS仿真器中运行你的应用程序时，你将在其中看到默认的PhoneGap启动页面（参见图11）。

如果你看见该仿真器，那么现在你可以使用PhoneGap在Xcode中开始开发iOS应用程序。

在正确地设置你的PhoneGap环境之后，回顾某些Xcode和PhoneGap基础知识将帮助你充分利用这一开发环境。

一般来说， Xcode非常易于操作。 在屏幕的左侧，你将看到项目层级，而在屏幕的中心，你会看到主内容区域。 当你在左侧选中文件时，相应的内容将显示在主编辑区。

下面是一个很多人不了解的简单技巧：在项目层级中单击文件则在同一窗口中显示该文件的内容；而双击文件则在新的窗口中打开该文件。

如果你选中项目根目录，那么你将看到该项目的概要屏幕。 从该屏幕中，你可以在其它选项中轻松地设置包标识（bundle identifier）、应用程序版本、目标设备、图标、启动画面以及支持方向（参见图12）。 该屏幕对配置部署你的应用程序很有帮助。

在Xcode窗口顶部，靠近Run按钮附近，有一个Scheme菜单，它能够让你改变项目编译方案以及指定目标设备或仿真器。 如需指定一个特定目标设备或改变iOS Simulator目标，只需单击相应的项目名称，然后选中一个可选设备或仿真器目标（参见图13）。 当下次运行该应用程序时，它将被部署至新的已选目标。

请牢记PhoneGap应用程序的整个界面均使用HTML和JavaScript进行开发。 在www文件夹中，你需要维护在界面中使用的所有HTML组件。 如果你希望从远程位置添加额外的文件，那么你需要在PhoneGap.plist文件中将该位置添加到白名单中，否则，任何外部的请求将视为安全异常而被阻止。

在默认情形下，Xcode的内容区域将显示基于在项目层级中所选中文件的源代码（参见图14）。

如果你更喜欢并排地打开和编辑多个文件，不用担心。 这一操作是可能的，尽管现在还不能立即知道如何进行这一操作。

为了能够编辑并排打开的文件，单击位于Xcode窗口右上角的Show The Assistant Editor按钮（参见图15）。 一旦第二个编辑器实例处于可见状态，你便可以将项目层级左侧的文件拖至新的编辑器窗口中。 当你希望同时查看单独的HTML和JavaScript文件，或你希望同时查看本地插件和它的JavaScript界面时，上述操作特别有用。