设置Xcode
为PhoneGap应用程序设置Xcode的第一个步骤是从Apple网站上下载并安装Xcode IDE。 你可以从 Apple开发人员网站（Apple developer site）上 下载Xcode。 在下载Xcode之前，你必须以开发人员的身份在Apple上进行注册。 在你注册之后，你就能够免费访问Xcode、iOS设备仿真器和Apple开发人员文档。 如果你希望将你的应用程序部署至实际设备，或通过iTune商店发布你的应用程序，那么你必须以iOS开发人员的身份在Apple上进行注册，并交纳与之 相关的年费。
在Xcode下载完成之后，你只需按照安装向导完成安装过程即可。
下载和安装PhoneGap
一旦你成功地完成Xcode的安装，接下来的一步则是下载和安装PhoneGap。
- 用你的浏览器访问 honeGap下载页面（PhoneGap download page） （http://phonegap.com/download），并单击橙色Download链接进行下载。
注： 下面所示的步骤适用于PhoneGap 1.4.1，然而，该过程应该适用于或类似于所有的PhoneGap版本。
- 解压缩ZIP文件内容。
- 浏览至已解压缩文件的 libs/ios/ 文件夹，并双击PhoneGap-1.4.1.pkg包安装程序。
该操作会启动PhoneGap安装向导，它将在你的系统中对PhoneGap的安装过程进行引导（参见图1）。
图1. PhoneGap安装程序
- 按照安装程序提供的安装说明进行安装，直到你看见“Thanks for installing PhoneGap 1.4.1!”。
当你看见这个提示时，PhoneGap安装已经完成。 现在，你可以在Xcode中创建你的第一个PhoneGap项目。
在Xcode中创建项目
PhoneGap安装程序为Xcode添加一个PhoneGap项目模板，该模板能够简化PhoneGap应用程序的创建。
- 首先，单击Xcode欢迎屏幕上的Create A New Xcode Project（参见图2）。 此外，你也可以选中File > New > New Project来创建新的PhoneGap项目。
图2. Xcode欢迎屏幕
创建新的Xcode项目的第一个步骤是选中一个项目模板。
- 在iOS > Application下找到并选中PhoneGap-based Application模板，然后单击Next（参见图3）。
图3. 选中一个项目模板
在选中项目模板之后，你需要对你的项目进行命名。 你可以为它起一个能够表明你将要建立什么项目的名称。
- 在本例中，只需输入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代码。
- 单击Next。
- 在你的文件系统中选中一个文件夹，而你的PhoneGap项目将驻留在该文件系统中（参见图6）。
图6. 选中项目位置
- 单击Create。
你的PhoneGap项目将在Xcode中进行创建。 但是，在你的项目完成并运行前，还有一些步骤需要你完成。
用来为你的PhoneGap项目创建界面的所有HTML和JavaScript均需包含在一个www文件夹中。 起初，该www文件夹在你的PhoneGap项目中并不存在。 为了创建该文件夹，首先你必须运行相应的应用程序。
- 在窗口左上角单击Run运行该应用程序（参见图7）。 此外，你也可以选中Product > Run。
图7. Xcode Run按钮
Xcode会尝试在iOS仿真器中启动PhoneGap应用程序。 对于第一次启动，你将看到错误信息“ERROR: Start Page at 'www/index.html' was not found”。 别担心，这很正常！ 尽管如此，在第一个步骤期间，已创建了www文件夹。 在将它添加到你的项目之后，你就不会再遇到该错误。
- 为了将www文件夹添加至你的项目，按住Ctrl键并且单击项目根目录，然后选中Add Files To "Hello"（参见图8）。
图8. 准备为项目添加文件
- 在打开的对话框中，选中新创建项目中的www文件夹。 你需要确保选中实际的www文件夹，而不是父文件夹或该文件夹中的相关内容。
- 选中Create Folder References For Any Added Folders（参见图9）。 如果你未选中该选项，那么你的项目将出现错误。
图9. 在Xcode中为项目添加文件
- 单击Add。
现在，在你的项目根目录之下，你应该能够看到www文件夹（参见图10）。
图10. 项目根目录中的www文件夹
- 单击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）。
转载地址 http://mobile.51cto.com/web-334924.htm
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
