Phoegap（cordova）开发跨平台app之HelloWorld

PhoneGap（cordova）的hellworld程序

1           安装JDK 配置环境变量：

2           安装android-sdk 配置环境变量：

set Path=E:\android-sdk\platform-tools;E:\android-sdk\tools;

3           安装Git.exe配置环境变量

set Path=E:\Program Files\Git\cmd

4           安装Apache-ant-???-bin.zip 配置环境变量

set Path=C:\apache-ant\bin;

5           安装Eclipse

6           安装phonegap

下载nodejs

npm install –g phonegap（在线安装）

 

 

HelloWord程序的建立：

       1     新建一个文件夹    存放android程序 例如:pg

2     cd pg      如若要切换到E盘，直接E:回车即可

              Phonegap create  photos（文件夹名） com.itcast(包名)  项目名

              Cd photos

Phonegap build android        这一步会在photos文件夹下的platforms里创建一个android文件夹，这个就是我们的android项目，有其他平台的sdk，也可以创建其他平台的项目，相应的也会生成其他的项目的文件夹

3     assets的www文件夹里放的是网页

              Bin  编译后生成的内容

              Ccordova PhoneGap的库文件

              Gen 静态的资源文件

              Libs

              Platform_www .js文件

              Res 资源文件 里面有一个xml文件夹里下面有个config.xml文件

                                          注意配置：<access origin="*" />

                     待会如果要使用系统的一些硬件功能，应该在里面配置相应

                     的插件（后面会介绍）

 

              Src  源代码

              AndroidManifest.xml 系统级别的配置文件 配置权限很关键

 

4     将我们创建的项目在eclipse里打开（如果发现有乱码问题，请点击project——>properties下的编码设置）

              新建Project platforms里的就是android项目 打开

              Eclipse会自动加载这些插件run 提示要选择的部署的设备

              如果发现在eclipse里无法打开www文件夹和Res里的config.xml文件请选择files

              里的属性的Resource里的resource filters设置其属性为空

 

5         在vs里打开www网站     进行编辑 编辑完成后保存

 

 

6     eclipse f5刷新

 

7     使用phonegap 引用phonegap.Js文件

 

8     在phoegap3.0后所有的插件都是要自己下的

              因为插件是需要配置权限的，用一个插件就需要开启一个权限

              因此需要那个插件就自己配置这个插件

              配置插件的两种方法：

1           直接在网上找到所有的插件包自己配置，较复杂，这里不建议使用该方法

 

2           在自己建立的phonegap项目的目录下，执行命令，注意这些命令的执行一定要联网，phonegap会自动帮我们在项目里配置好相应的文件

Basic device information (Device API):

phonegap plugin add org.apache.cordova.device

 

Network Connection and Battery Events:

phonegap plugin add org.apache.cordova.network-information

phonegap plugin add org.apache.cordova.battery-status

 

Accelerometer, Compass, and Geolocation:

phonegap plugin add org.apache.cordova.device-motion

phonegap plugin add org.apache.cordova.device-orientation

phonegap plugin add org.apache.cordova.geolocation

 

Camera, Media playback and Capture:

phonegap plugin add org.apache.cordova.camera

phonegap plugin add org.apache.cordova.media-capture

phonegap plugin add org.apache.cordova.media

 

Access files on device or network (File API):

phonegap plugin add org.apache.cordova.file

phonegap plugin add org.apache.cordova.file-transfer

 

Notification via dialog box or vibration:

phonegap plugin add org.apache.cordova.dialogs

phonegap plugin add org.apache.cordova.vibration

 

Contacts:

phonegap plugin add org.apache.cordova.contacts

 

Globalization:

phonegap plugin add org.apache.cordova.globalization

 

Splashscreen:

phonegap plugin add org.apache.cordova.splashscreen

 

Open new browser windows (InAppBrowser):

phonegap plugin add org.apache.cordova.inappbrowser

 

Debug console:

phonegap plugin add org.apache.cordova.console

 

 

       9     开发完成后的打包：

              注意事项一定要是的最外层的www文件夹与android项目里的assests文件夹下的

              www文件夹里的内容相同

 

       10   dos切换到phonegap项目，执行phonegap build android 在android项目的ant-build

              文件夹下会有相应的android apk