Content

• 設(shè)置Xcode
• 下載和安裝PhoneGap
• 在Xcode中創(chuàng)建項(xiàng)目
• 在Xcode中使用PhoneGap
• 下一步閱讀方向

設(shè)置Xcode

為PhoneGap應(yīng)用程序設(shè)置Xcode的***個(gè)步驟是從Apple網(wǎng)站上下載并安裝Xcode IDE。 你可以從 Apple開發(fā)人員網(wǎng)站（Apple developer site）上 下載Xcode。 在下載Xcode之前，你必須以開發(fā)人員的身份在Apple上進(jìn)行注冊(cè)。 在你注冊(cè)之后，你就能夠免費(fèi)訪問Xcode、iOS設(shè)備仿真器和Apple開發(fā)人員文檔。 如果你希望將你的應(yīng)用程序部署至實(shí)際設(shè)備，或通過iTune商店發(fā)布你的應(yīng)用程序，那么你必須以iOS開發(fā)人員的身份在Apple上進(jìn)行注冊(cè)，并交納與之 相關(guān)的年費(fèi)。

在Xcode下載完成之后，你只需按照安裝向?qū)瓿砂惭b過程即可。

下載和安裝PhoneGap

一旦你成功地完成Xcode的安裝，接下來的一步則是下載和安裝PhoneGap。

1. 用你的瀏覽器訪問 honeGap下載頁面（PhoneGap download page） （http://phonegap.com/download），并單擊橙色Download鏈接進(jìn)行下載。

注： 下面所示的步驟適用于PhoneGap 1.4.1，然而，該過程應(yīng)該適用于或類似于所有的PhoneGap版本。

2. 解壓縮ZIP文件內(nèi)容。
3. 瀏覽至已解壓縮文件的 libs/ios/ 文件夾，并雙擊PhoneGap-1.4.1.pkg包安裝程序。

該操作會(huì)啟動(dòng)PhoneGap安裝向?qū)В鼘⒃谀愕南到y(tǒng)中對(duì)PhoneGap的安裝過程進(jìn)行引導(dǎo)（參見圖1）。

圖1. PhoneGap安裝程序

4. 按照安裝程序提供的安裝說明進(jìn)行安裝，直到你看見“Thanks for installing PhoneGap 1.4.1!”。

當(dāng)你看見這個(gè)提示時(shí)，PhoneGap安裝已經(jīng)完成。 現(xiàn)在，你可以在Xcode中創(chuàng)建你的***個(gè)PhoneGap項(xiàng)目。

在Xcode中創(chuàng)建項(xiàng)目

PhoneGap安裝程序?yàn)閄code添加一個(gè)PhoneGap項(xiàng)目模板，該模板能夠簡(jiǎn)化PhoneGap應(yīng)用程序的創(chuàng)建。

1. 首先，單擊Xcode歡迎屏幕上的Create A New Xcode Project（參見圖2）。 此外，你也可以選中File > New > New Project來創(chuàng)建新的PhoneGap項(xiàng)目。

圖2. Xcode歡迎屏幕

創(chuàng)建新的Xcode項(xiàng)目的***個(gè)步驟是選中一個(gè)項(xiàng)目模板。

2. 在iOS > Application下找到并選中PhoneGap-based Application模板，然后單擊Next（參見圖3）。

圖3. 選中一個(gè)項(xiàng)目模板

在選中項(xiàng)目模板之后，你需要對(duì)你的項(xiàng)目進(jìn)行命名。 你可以為它起一個(gè)能夠表明你將要建立什么項(xiàng)目的名稱。

3. 在本例中，只需輸入Hello，因?yàn)槟銓⒔⒁粋€(gè)簡(jiǎn)單的Hello World應(yīng)用程序（參見圖4）。

圖4. 設(shè)置項(xiàng)目名稱以及其它選項(xiàng)

此外，在New Project Options屏幕上，你還需要輸入公司標(biāo)識(shí)（company identifier）。 公司標(biāo)識(shí)（company identifier）是與產(chǎn)品名稱相關(guān)的前綴，用來為你的應(yīng)用程序創(chuàng)建獨(dú)特的包標(biāo)識(shí)（bundle identifier）。 在Apple Provisioning Portal中，包標(biāo)識(shí)（bundle identifier）應(yīng)該與你為獨(dú)特應(yīng)用程序所創(chuàng)建的App ID相匹配（參見圖5）。

圖5. 在Apple Provisioning Portal中指定包標(biāo)識(shí)（bundle identifier）

如果你不確定在此處輸入什么，或如果你不希望立即在設(shè)備上進(jìn)行部署或發(fā)布該應(yīng)用程序，那么你可以輸入任何你希望的內(nèi)容，或保留空白。 你可以稍后通過編輯在Xcode項(xiàng)目概要屏幕中的Identifier字段或手動(dòng)編輯你的項(xiàng)目的Info.plist文件來改變包標(biāo)識(shí)（bundle identifier）。

注：在項(xiàng)目選項(xiàng)屏幕上，你也能找到打開Automated Reference Counting (ARC)的選項(xiàng)。 如果你不希望在你的PhoneGap應(yīng)用程序中編寫任何本地代碼，那么你可以忽略該選項(xiàng)。 如果你需要編寫PhoneGap本地插件或本地代碼，那么你只需考慮ARC即可。 PhoneGap本地插件允許你編寫屬于自己的本地代碼和JavaScript API，以便對(duì)PhoneGap容器的能力進(jìn)行擴(kuò)展。

無論ARC是否啟用，PhoneGap項(xiàng)目均能運(yùn)行。 如果啟用ARC，那么你不必在任何本地代碼中使用保留和釋放指令來管理內(nèi)存分配。 Xcode LLVM編譯器會(huì)自動(dòng)地為你生成適當(dāng)?shù)谋Ａ艉歪尫胖噶睢?如果未啟用ARC，那么你必須手動(dòng)地管理內(nèi)存。 記住，ARC僅適用于本地代碼，而不適用于HTML或JavaScript代碼。

4. 單擊Next。
5. 在你的文件系統(tǒng)中選中一個(gè)文件夾，而你的PhoneGap項(xiàng)目將駐留在該文件系統(tǒng)中（參見圖6）。

圖6. 選中項(xiàng)目位置

6. 單擊Create。

你的PhoneGap項(xiàng)目將在Xcode中進(jìn)行創(chuàng)建。 但是，在你的項(xiàng)目完成并運(yùn)行前，還有一些步驟需要你完成。

用來為你的PhoneGap項(xiàng)目創(chuàng)建界面的所有HTML和JavaScript均需包含在一個(gè)www文件夾中。 起初，該www文件夾在你的PhoneGap項(xiàng)目中并不存在。 為了創(chuàng)建該文件夾，首先你必須運(yùn)行相應(yīng)的應(yīng)用程序。

7. 在窗口左上角單擊Run運(yùn)行該應(yīng)用程序（參見圖7）。 此外，你也可以選中Product > Run。

圖7. Xcode Run按鈕

Xcode會(huì)嘗試在iOS仿真器中啟動(dòng)PhoneGap應(yīng)用程序。 對(duì)于***次啟動(dòng)，你將看到錯(cuò)誤信息“ERROR: Start Page at 'www/index.html' was not found”。 別擔(dān)心，這很正常！ 盡管如此，在***個(gè)步驟期間，已創(chuàng)建了www文件夾。 在將它添加到你的項(xiàng)目之后，你就不會(huì)再遇到該錯(cuò)誤。

8. 為了將www文件夾添加至你的項(xiàng)目，按住Ctrl鍵并且單擊項(xiàng)目根目錄，然后選中Add Files To "Hello"（參見圖8）。

圖8. 準(zhǔn)備為項(xiàng)目添加文件

9. 在打開的對(duì)話框中，選中新創(chuàng)建項(xiàng)目中的www文件夾。 你需要確保選中實(shí)際的www文件夾，而不是父文件夾或該文件夾中的相關(guān)內(nèi)容。
10. 選中Create Folder References For Any Added Folders（參見圖9）。 如果你未選中該選項(xiàng)，那么你的項(xiàng)目將出現(xiàn)錯(cuò)誤。

圖9. 在Xcode中為項(xiàng)目添加文件

11. 單擊Add。

現(xiàn)在，在你的項(xiàng)目根目錄之下，你應(yīng)該能夠看到www文件夾（參見圖10）。

圖10. 項(xiàng)目根目錄中的www文件夾

12. 單擊Run以便再次啟動(dòng)該項(xiàng)目。

至此，你應(yīng)該已正確配置你的項(xiàng)目，并且應(yīng)該能夠在iOS仿真器中啟動(dòng)它。 如果你沒有改變www文件夾中的任何HTML文件，那么當(dāng)在iOS仿真器中運(yùn)行你的應(yīng)用程序時(shí)，你將在其中看到默認(rèn)的PhoneGap啟動(dòng)頁面（參見圖11）。

圖11. iOS仿真器

如果你看見該仿真器，那么現(xiàn)在你可以使用PhoneGap在Xcode中開始開發(fā)iOS應(yīng)用程序。

在Xcode中使用PhoneGap

在正確地設(shè)置你的PhoneGap環(huán)境之后，回顧某些Xcode和PhoneGap基礎(chǔ)知識(shí)將幫助你充分利用這一開發(fā)環(huán)境。

一般來說， Xcode非常易于操作。 在屏幕的左側(cè)，你將看到項(xiàng)目層級(jí)，而在屏幕的中心，你會(huì)看到主內(nèi)容區(qū)域。 當(dāng)你在左側(cè)選中文件時(shí)，相應(yīng)的內(nèi)容將顯示在主編輯區(qū)。

下面是一個(gè)很多人不了解的簡(jiǎn)單技巧：在項(xiàng)目層級(jí)中單擊文件則在同一窗口中顯示該文件的內(nèi)容；而雙擊文件則在新的窗口中打開該文件。

如果你選中項(xiàng)目根目錄，那么你將看到該項(xiàng)目的概要屏幕。 從該屏幕中，你可以在其它選項(xiàng)中輕松地設(shè)置包標(biāo)識(shí)（bundle identifier）、應(yīng)用程序版本、目標(biāo)設(shè)備、圖標(biāo)、啟動(dòng)畫面以及支持方向（參見圖12）。 該屏幕對(duì)配置部署你的應(yīng)用程序很有幫助。

圖12. 項(xiàng)目概要屏幕

在Xcode窗口頂部，靠近Run按鈕附近，有一個(gè)Scheme菜單，它能夠讓你改變項(xiàng)目編譯方案以及指定目標(biāo)設(shè)備或仿真器。 如需指定一個(gè)特定目標(biāo)設(shè)備或改變iOS Simulator目標(biāo)，只需單擊相應(yīng)的項(xiàng)目名稱，然后選中一個(gè)可選設(shè)備或仿真器目標(biāo)（參見圖13）。 當(dāng)下次運(yùn)行該應(yīng)用程序時(shí)，它將被部署至新的已選目標(biāo)。

圖13. 選中一個(gè)新方案

請(qǐng)牢記PhoneGap應(yīng)用程序的整個(gè)界面均使用HTML和JavaScript進(jìn)行開發(fā)。 在www文件夾中，你需要維護(hù)在界面中使用的所有HTML組件。 如果你希望從遠(yuǎn)程位置添加額外的文件，那么你需要在PhoneGap.plist文件中將該位置添加到白名單中，否則，任何外部的請(qǐng)求將視為安全異常而被 阻止。

在默認(rèn)情形下，Xcode的內(nèi)容區(qū)域?qū)@示基于在項(xiàng)目層級(jí)中所選中文件的源代碼（參見圖14）。

圖14. Xcode編輯器

如果你更喜歡并排地打開和編輯多個(gè)文件，不用擔(dān)心。 這一操作是可能的，盡管現(xiàn)在還不能立即知道如何進(jìn)行這一操作。

為了能夠編輯并排打開的文件，單擊位于Xcode窗口右上角的Show The Assistant Editor按鈕（參見圖15）。 一旦第二個(gè)編輯器實(shí)例處于可見狀態(tài)，你便可以將項(xiàng)目層級(jí)左側(cè)的文件拖至新的編輯器窗口中。 當(dāng)你希望同時(shí)查看單獨(dú)的HTML和JavaScript文件，或你希望同時(shí)查看本地插件和它的JavaScript界面時(shí)，上述操作特別有用。

圖15. 在Xcode中編輯并排放置的代碼

下一步閱讀方向

當(dāng)你在Xcode中建立PhoneGap之后，你可以使用PhoneGap為iOS建立一些正式的應(yīng)用程序。 記住，你需要使用HTML、CSS和JavaScript為用戶界面創(chuàng)建PhoneGap應(yīng)用程序。 這允許你通過使用傳統(tǒng)的web開發(fā)技巧，方便地創(chuàng)建外觀精美的應(yīng)用程序。 如需了解更多使用TML、CSS和JavaScript創(chuàng)建的豐富體驗(yàn)，請(qǐng)查看 Adobe 開發(fā)人員連接HTML5和CSS3開發(fā)人員中心（Adobe Developer Connection HTML5 and CSS3 developer center）。