天天看點

phoneGap3.0安裝步驟(以windows下的android環境為例)

環境:

   WIN系統,JDK,Android,Eclipse,Ant,Git,PhoneGap3.x (Cordova)

1. 安裝JRE,設定JAVA_HOME,比如JAVA_HOME=C:\program\Java\jre6\bin。

2. Cordova支援Android 2.2, 2.3, and 4.x.

  下載下傳安裝SDK: http://developer.android.com/sdk/index.html

  安裝Android SDK,比如安裝在c:\android-sdk\,需要把c:\android-sdk\tools和platform-tools添加到系統PATH環境變量中。

   要不出後面第8步出錯誤:

   [Error: The command `android` failed. Make sure you have the latest Android SDK

   installed, and the `android` command (inside the tools/ folder) added to your pa

   th. Output: 'android'  ... ...

   ]

3. 安裝Eclipse,要能支援Android項目。http://www.eclipse.org/downloads/

4. 安裝ant,并将ant.bat所在目錄加到path環境變量,如c:\apache-ant\bin\,http://ant.apache.org  .

5. 安裝Node.js,安裝成功後,可在指令行輸入指令:node 或 npm .   http://nodejs.org/  。

(注:以下所有指令都在nodejs指令行視窗中輸入的)

6. 安裝PhoneGap工具集: 打開指令行,運作:npm install -g phonegap

7. 把盤符轉到想要建立項目的目錄,比如 c:\。

8.  建立App,運作:phonegap create hello com.vmeitime.hello HelloWorld

   将在c:\hello下建立名為HelloWorld的項目,HTML5檔案在C:\hello\www目錄裡。

   第一個參數hello表示項目檔案夾名,在此檔案夾下會生成www子目錄作為首頁面存入目錄,包括有css,js和img資源。 其中config.xml包括了重要的資源描述和項目配置資訊.

   第2個參數是可選的,com.vmeitime.hello表示項目包名; 第3個參數:HelloWord表示顯示的文本;

   也可用-i 和-n 指令選項:

       c:\> phonegap create hello -n HelloWorld -i com.vmeitime.hello

       c:\> phonegap create hello --name HelloWorld --id com.vmeitime.hello

   當然,指令執行後,以上資訊也可在後續開發中修改comfig.xml中的相應值。

9.  後續操作都要在建立的項目目錄下進行:cd hello

10. 運作build指令,輸入不同平台辨別,生成不同平台下的相應檔案。如下以android裝置為例:

       c:\hello> phonegap build android

   要檢視詳細(verbose)執行過程,可增加指令參數-V :

       c:\hello> phonegap -V build android

   之後可以看到C:\hello\platforms\android裡出現Android項目。

11. 在子產品器或移動裝置上測試App: c:\hello>phonegap install android

   也可用參數e專門指定運作在子產品器上: c:\hello>phonegap -e install android

12. build和運作(相當于上面build和install兩步驟操作):c:\hello>phonegap run android

    也可用參數e專門指定運作在子產品器上:c:\hello>phonegap -e run android

13. 打開Eclispe,導入項目C:\hello\platforms\android,HelloWorld。

14. 可能項目有一些錯誤,把Android Project Build Target設定為最高等級的API Level一般就能解決。

15. 然後就可以用Eclipse啟動項目了。

16. 可以用指令phonegap emulate android在模拟器裡啟動項目,不過感覺比Eclipse麻煩,總是啟動一個新的模拟器。

     用這個方法還要注意Android虛拟裝置的版本,似乎至少是API Level 10,因為自動生成的AndroidManifest.xml裡:

     <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="17" />

17. 可以用指令phonegap run android在真實裝置上運作App。

18. 添加插件(需要先安裝git工具 https://help.github.com/articles/set-up-git):

   PhoneGap 3.0 最需要關注的是完全的插件體系結構,所有的功能特性包括攝像頭等都是使用插件方式提供。也就是說建立項目後很多功能是無法使用的,你必須将其對應的插件添加到項目中。

   例如在 cordova 中添加插件的方法是:

       cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

   而通過 phonegap 指令行工具的方法是:

       phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

   這意味着在開始 PhoneGap 項目時你要先考慮項目需要什麼功能,然後通過指令行來添加這些功能。

1). 添加的插件都将放在C:\hello\plugins目錄下.

2). 同時會在所有平台下的config.xml檔案中增加feature插件配置,如:C:\hello\platforms\<平台>\res\xml\config.xml)

3). 增加相應的插件java檔案:C:\hello\platforms\android\src

4). 增加相應的插件js檔案:C:\hello\platforms\android\assets\www\plugins

下面是完整的插件清單,我直接拷貝過來,可能會有變化:

   Basic device information (Device API):

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

   Network Connection and Battery Events:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

   Accelerometer, Compass, and Geolocation:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

   Camera, Media playback and Capture:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

   Access files on device or network (File API):

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

   Notification via dialog box or vibration:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

   Contacts:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

   Globalization:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

   Splashscreen:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

   Open new browser windows (InAppBrowser):

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

   Debug console:

       $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

   檢視目前已安裝的插件: $ phonegap local plugin list

   删除指定的插件: $ phonegap local plugin remove org.apache.cordova.core.console

19 自定義各平台資源(merges):

   在www/merges/目錄下建立各平台不同的資源檔案,如css,js,圖檔等,引用相應的檔案路徑時,不需要寫各平台路徑。如:

   在www/index.html檔案中添加自定義的css檔案overrides.css如下:

       <link rel="stylesheet" type="text/css" href="css/overrides.css" target="_blank" rel="external nofollow" />

   在www/merges/android/目錄下建立針對于android平台的overrides.css,(如果是ios,由是www/merges/ios/overrides.css檔案。)

   overrides.css檔案中添加如下内容,覆寫www/css/index.css檔案中預設的12px文字大小樣式:

       body { font-size:14px; }

   這樣,在android平台下,顯示的檔案是14px,其他平台下顯示的文字是12px;

   也可添加各平台自定義的圖檔資源,如 merges/ios/img/back_button.png, 在www/index.html頁面引用的寫法是img/back_button.png.

20. 遠端編譯:

   預設情況下,是編譯本地安裝SDK環境的相應平台,生成目标在platforms。 但也可通過遠端編譯本地沒有安裝SDK(或已安裝SDK)的相應平台。也可遠端測試。

1). 首先,你要在PhoneGap Build網站(https://build.phonegap.com/) 上新增賬號,并使用login指令登入操作。

   $ phonegap remote login -u [email protected] -p mYpASSw0RD

   $ phonegap remote login --username [email protected] --password mYpASSw0RD

    使用loginout指令登出phonegap build.

       $ phonegap remote logout

   2). 遠端編譯:$ phonegap remote build ios

   3). 要使用插件,你必須先添加插件到本地,然後再遠端編譯。如:

   $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

   $ phonegap remote build ios

4) $ phonegap remote install ios

   # ...or...

   $ phonegap remote run ios

5) 預設情況下是local本地編譯,如下兩指令是一樣效果:

   $ phonegap local build ios

   $ phonegap build ios

21. 更新phonegap到最新版本指令:c:\> npm update -g phonegap

22. 檢視phonegap版本指令:

   $ phonegap version

   $ phonegap -v

23. 檢視phonegap詳細資訊指令:

   $ npm info phonegap

24。安裝指定版本的phonegap指令:

   c:\> npm install -g [email protected]

轉自:http://www.vmeitime.com/post/2013-08-14/phonegap3install

繼續閱讀