Content

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

設(shè)置Xcode

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

在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包安裝程序。

該操作會啟動PhoneGap安裝向?qū)?，它將在你的系統(tǒng)中對PhoneGap的安裝過程進(jìn)行引導(dǎo)（參見圖1）。

圖1. PhoneGap安裝程序

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

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

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

PhoneGap安裝程序為Xcode添加一個PhoneGap項目模板，該模板能夠簡化PhoneGap應(yīng)用程序的創(chuàng)建。

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

圖2. Xcode歡迎屏幕

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

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

圖3. 選中一個項目模板

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

3. 在本例中，只需輸入Hello，因為你將建立一個簡單的Hello World應(yīng)用程序（參見圖4）。

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

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

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

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

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

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

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

圖6. 選中項目位置

6. 單擊Create。

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

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

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

圖7. Xcode Run按鈕

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

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

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

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

圖9. 在Xcode中為項目添加文件

11. 單擊Add。

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

圖10. 項目根目錄中的www文件夾

12. 單擊Run以便再次啟動該項目。

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

圖11. iOS仿真器

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

在Xcode中使用PhoneGap

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

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

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

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

圖12. 項目概要屏幕

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

圖13. 選中一個新方案

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

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

圖14. Xcode編輯器

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

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

圖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)建的豐富體驗，請查看 Adobe 開發(fā)人員連接HTML5和CSS3開發(fā)人員中心（Adobe Developer Connection HTML5 and CSS3 developer center）。