Cordova Phonegap

Cordova和PhoneGap的关系:PhoneGap 被 Adobe 收购了,但是剥离了核心代码贡献给 Apache Software Foundation,Apache 将这个项目命名为Cordova ,也就是说 PhoneGap 是基于 Cordova 的。所以用的时候用cordova就可以了。

一、安装前准备工作

1.下载java JDK 1.6以上版本

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

 

2.下载Android Development Tools

已经包括了Android sdk、eclipse,解压即可使用。

https://developer.android.com/sdk/index.html

网盘:http://pan.baidu.com/s/1dD8viLj

 

3.设置系统变量

Java环境变量配置完以后(也就是java jvac运行成功以后)还需要额外配置的东西如下

系统变量Path后面添加:

F:\adt-bundle-windows-x86_64-20140321\sdk\tools

F:\adt-bundle-windows-x86_64-20140321\sdk\platform-tools

F:\adt-bundle-windows-x86_64-20140321\eclipse\plugins\org.apache.ant_1.8.4.v201303080030\bin

 

4.更新自己的android sdk 到4.4以上版本(API 22),不然会出错

5.注意ant目录不能是中文

6.分别输入java javac ant 看是否配置环境成功

java:

javac:

ant:

 

二、安装node.js

下载地址:http://nodejs.org/

或者http://download.csdn.net/detail/zhouxiaowen111/9318051

 

 三、安装cordova

打开cmd命令,执行:

npm install -g cordova

 

四、创建一个cordova工程

1. cordova create hello com.eleanor.hellos hello

其中:第一个hello 是文件夹的名称

com.eleanor.hellos 是app id

第二个hello 是工程的名称,也是应用的名称

2.进入工程文件夹

cd hello

3.添加平台支持

有选择的添加即可,我这边是添加了android

cordova platform add android

其他平台:

cordova platform add ios
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos
cordova platform add wp7
cordova platform add wp8
cordova platform add windows8

4.添加插件支持

我暂时没添加

主要为系统硬件访问的插件,常见如照相机、媒体访问、设备访问、加速设备、定位设备等。应按需添加

 

基本设备资讯 (设备 API):
$ cordova plugin add org.apache.cordova.device

网路连接和电池事件:

$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status

加速度计、 指南针、 和地理定位:

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation

相机、 媒体重播和捕获:

$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media

访问设备或网路 (档 API) 上的档:

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

通过对话方块或振动发出通知:

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration

连络人:

$ cordova plugin add org.apache.cordova.contacts

全球化:

$ cordova plugin add org.apache.cordova.globalization

闪屏:

$ cordova plugin add org.apache.cordova.splashscreen

打开新的浏览器视窗 (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser

调试主控台:

$ cordova plugin add org.apache.cordova.console

查看当前应用已安装的插件:

$ cordova plugin ls # or ‘plugin list’
[ ‘org.apache.cordova.console’ ]

删除已安装的插件:

$ cordova plugin rm org.apache.cordova.console
$ cordova plugin remove org.apache.cordova.console # same

通过多个参数增加或删除插件:

$ cordova plugin add org.apache.cordova.console org.apache.cordova.device

 

 

 

五、构建应用

cordova build 构建所有平台的应用

cordova build android 构建安卓平台的应用

即将hello/www下的内容,构建到添加的平台内。如android平台,会构建到此目录:

hello\platforms\android\assets\www

六、Eclipse导入

 两个文件,platfomrs下的android 以及 cordovalib文件

七、目录结构说明

(1)目录一览:

myApp/
|– config.xml
|– hooks/
| | |– before_xxx/
| | `– after_xxx/
|– merges/
| | |– android/
| | `– ios/
|– platforms/
| |– android/
| `– ios/
|– plugins/
| |– org.apache.cordova.console/
| `– org.apache.cordova.device/
|– www/
| |– css/
| |– img/
` |– js/
`– index.html

(2)config.xml
cordova的配置文件

(3)hooks 目录
存放自定义 cordova 命令的脚本文件。每个 project 命令都可以定义 before 和 after 的 Hook,比如:before_build、after_build

Hook可以采用任何编程语言来写,Cordova CLI采用的是Node.js,所以一般都是用它来写。

这里提供了3个常用的 Hook 脚本:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

(4)merges目录
存放各个平台特殊的文件,会和www进行合并编译,相同的文件merges下的文件优先。

比如:
引用
merges/
|– ios/
| `– app.js
|– android/
| `– android.js
www/
`– app.js

编译成 iOS 应用的话,包含 merges/ios/app.js;而 Android 应用的话,包含 www/app.js、 merges/android/android.js

(5)platforms 目录
各个平台的原生代码工程,不要手动修改,因为在 build 的时候会被覆盖。

(6)plugins 目录
插件目录(cordova提供的原生API也是以插件的形式提供的)。

(7)www 目录
源代码目录,在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。
其中index.html为应用的入口文件。

 

posted on 2015-12-02 11:21  傲娇草泥喵  阅读(423)  评论(0编辑  收藏  举报