使用PhoneGap CLI開發應用程式

注意

Adobe建議針對需要單頁應用程式架構用戶端轉譯（例如React）的專案使用SPA編輯器。 了解更多.

只要您已設定開發環境，您就能在任何指定時間，以開發人員身分，在裝置或模擬器中執行應用程式。

若要執行下列範例，您需要使用Xcode執行OSx(Mac)，或使用安裝Android SDK的Mac/Win/Linux系統。

Bootstrap您的開發環境

安裝PhoneGap CLI

若為iOS:要開發iPhone和iPad，你需要蘋果的Xcode IDE。

對於Android:要開發iPhone和iPad，你需要谷歌的Android Stuido IDE。

下載源

成功布建開發環境後，請從「AEM應用程式建置方塊」下載來源：

  • 按一下PhoneGap Build圖磚下拉式>形圖。

chlimage_1-45

  • 按一下「下載源」。
  • 從「下載來源」強制回應視窗中選取所需的來源。

chlimage_1-46

注意

開發來源包含應用程式的最新狀態，但包含未分段的變更。 使用測試來源來建立要提交至應用程式商店廠商的發行候選項目。

如果您從未預備應用程式，選取測試將觸發預備工作流程(提示：這會在AppStore和Google PlayStore提供的PhoneGap Enterprise Viewer應用程式中顯示為分段應用程式)。

  • 按一下「下載」 ，並將ZIP儲存至您的電腦。
  • 將下載的zip檔案解壓縮至您的工作區。

建立並載入應用程式（從來源）

PhoneGap CLI可以建立平台項目、編譯源，並以單一命令部署應用程式。

注意

您可以分別執行所有這些步驟，請參閱PhoneGap CLI檔案。

  1. 請確定您已安裝PhoneGap CLI，請參閱上文。
  2. 在主控台（或終端機）視窗中，導覽至擷取之來源的根目錄。
  3. 輸入以下命令：
phonegap run android

// -- or -- //

phonegap run ios
注意

如果您目前有問題，請回到基本概念，了解疑難問題 —

  1. 建立新資料夾（mkdir測試）
  2. 導覽至此新資料夾（光碟測試）
  3. 執行'phonegap create helloWorld'
  4. 導航到helloWorld(cd helloWorld)
  5. 執行'phonegap run android（或以ios取代android，如上所述）。
  6. 模擬器會開啟，執行您新建立的PhoneGap應用程式，說「設備就緒」（如果JavaScript至原生的橋接器可運作）。

這將驗證您的PhoneGap CLI開發環境是否正常運作。

使用Safari和IOS調試調試Javascript

您可以使用Safari的開發人員工具來除錯應用程式的JavaScripts，如同使用Web應用程式的方式。

啟用Safari開發人員工具

若要啟用開發人員工具：

  • 開啟Safari的偏好設定

    • 在功能表列中按一下「Safari」
    • 按一下「首選項」

  • 按一下「首選項」(Preference)窗口中的「高級」(Advanced)

chlimage_1-47

  • 勾選「在功能表列中顯示開發功能表」
  • 關閉「首選項」窗口

將Safari連線至iOS

您可以將Safari連線至iOS裝置或模擬器。

  • 在控制台視窗中，導覽至擷取之來源的根目錄。
  • 輸入下列命令，在裝置或模擬器上啟動您的應用程式。
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • 開啟Safari
  • 按一下功能表列中的「開發」
  • 選取iOS模擬器子功能表
  • 按一下home.html

chlimage_1-48

使用Safari的Web檢查器調試JavaScript

可以在源中的任意位置設定斷點。 當您與模擬器或裝置互動時，應用程式的執行將停止在這些中斷點。 您可以逐步執行，並檢查變數中的值。

  • 在「Web檢查器」窗口中按一下「資源」
  • 導航源樹，然後按一下所需的源檔案
  • 按一下相鄰的行號以添加斷點
  • 與裝置或模擬器互動

chlimage_1-49

  • 使用控制按鈕來繼續執行、逐步執行、逐步執行和退出方法：

注意

若要查看變數的值，請在目前方法中暫留滑鼠。

後續步驟

了解使用PhoneGap CLI開發應用程式後，請參閱存取裝置功能。

本頁內容