PhoneGap搭建运行环境（3.2版本）

 

一、

1.准备环境nodejs(http://nodejs.org/download/)

2.ant(http://ant.apache.org/bindownload.cgi)

3.Android SDK工具 下载地址：http://developer.Android.com/sdk/

运行SDK Manager.exe

 

二、环境安装

1. nodejs的安装比较简单，直接在官网上下载msi文件进行安装

 

安装node.js

phonegap3中需要使用命令行环境，早phonegap中叫CLI。而这个在windows中是基于node.js实现的。

安装过程比较简单，只需要去官网下载对应的版本，安装即可。安装完成后，在cmd中输入npm，如果出现一堆数据，那就成功了。

2. ant安装：

将官网上下载下来的文件解压后，配置环境变量

新增环境变量 ANT_HOME ：E:\ant\apache-ant-1.9.2-bin\（目录为ant主目录）

并在Path变量里面附加内容 ：%ANT_HOME%\bin\

3. 确保你的android sdk的tools目录也在Path环境变量中，如没有，需手动加入；

      windows xp下配置JDK环境变量：       1.安装JDK，安装过程中可以自定义安装目录等信息，例如我们选择安装目录为D:/java/jdk1.5.0_08；

　 2.安装完成后，右击“我的电脑”，点击“属性”；

      3.选择“高级”选项卡，点击“环境变量”；

      4.在“系统变量”中，设置3项属性，JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”，不存在则点击“新建”；

      5.JAVA_HOME指明JDK安装路径，就是刚才安装时所选择的路径D:/java/jdk1.5.0_08，此路径下包括lib，bin，jre等文件夹（此变量最好设置，因为以后运行tomcat，eclipse等都需要依*此变量）；

Path使得系统可以在任何路径下识别java命令，设为：

%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin

　   CLASSPATH为java加载类(class or lib)路径，只有类在classpath中，java命令才能识别，设为：

.;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar (要加.表示当前路径)

　　%JAVA_HOME%就是引用前面指定的JAVA_HOME；

2 安装phonegap

在命令行输入npm install -g cordova，然后等着它执行完成。

在cmd中输入cordova -v 然后会输出一些信息，说明安装成功。

3 配置android SDK路径

将下面的两个android SDK 目录配置到环境变量path中。

sdk/platform-tools 
sdk/tools

4 配置Ant

在Apache上下载Ant，并且将Ant的bin目录配置到环境变量path中。

随便在一个目录输入 ant 然后回车，出现以下的内容说明成功。

Buildfile: build.xml does not exist!
Build failed

5 创建一个项目

在cmd中切换到你想创建项目的目录，执行如下的命令。

cordova create hello com.example.hello "Hello World"
cd hello
cordova platform add android

执行完成后就会在对应的目录中创建一个hello的项目。

6 导入Eclipse

要求你的Eclipse已经安装了ADT。

将这个项目导入的时候选择Android Project from Existing Code导入到Eclipse中，这时候就能按照正常的开发流程进行开发了。

 

 

Eclipse 集成PhoneGap插件

点击help——>install new software——>add连接：

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2.91/download/

 

 

__________________________--------------------------------------------------------------------------------------------------

 

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" />

   在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 phonegap@2.9.0-rc1-0.12.2

 

 

参考：

http://www.cocoachina.com/applenews/devnews/2013/0724/6665.html

http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide

http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html#The%20Command-line%20Interface