PhoneGap Xcode iOS入门教程

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

AD：

Content

• 设置Xcode
• 下载和安装PhoneGap
• 在Xcode中创建项目
• 在Xcode中使用PhoneGap
• 下一步阅读方向

设置Xcode

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

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

下载和安装PhoneGap

一旦你成功地完成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. PhoneGap安装程序

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

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

在Xcode中创建项目

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

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

图2. Xcode欢迎屏幕

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

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

图3. 选中一个项目模板

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

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

图4. 设置项目名称以及其它选项

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

图5. 在Apple Provisioning Portal中指定包标识（bundle identifier）

如果你不确定在此处输入什么，或如果你不希望立即在设备上进行部署或发布该应用程序，那么你可以输入任何你希望的内容，或保留空白。 你可以稍后通过编辑在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）。

图6. 选中项目位置

1. 单击Create。

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

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

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

图7. Xcode Run按钮

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

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

图8. 准备为项目添加文件

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

图9. 在Xcode中为项目添加文件

1. 单击Add。

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

图10. 项目根目录中的www文件夹

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

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

图11. iOS仿真器

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

在Xcode中使用PhoneGap

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

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

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

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

图12. 项目概要屏幕

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

图13. 选中一个新方案

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

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

图14. Xcode编辑器

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

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

图15. 在Xcode中编辑并排放置的代码

下一步阅读方向

当你在Xcode中建立PhoneGap之后，你可以使用PhoneGap为iOS建立一些正式的应用程序。 记住，你需要使用HTML、CSS和JavaScript为用户界面创建PhoneGap应用程序。 这允许你通过使用传统的web开发技巧，方便地创建外观精美的应用程序。 如需了解更多使用TML、CSS和JavaScript创建的丰富体验，请查看 Adobe 开发人员连接HTML5和CSS3开发人员中心（Adobe Developer Connection HTML5 and CSS3 developer center）。