Cordova Phonegap

Cordova和PhoneGap的關係：PhoneGap 被 Adobe 收購了，可是剝離了核心代碼貢獻給 Apache Software Foundation，Apache 將這個項目命名爲Cordova ，也就是說 PhoneGap 是基於 Cordova 的。因此用的時候用cordova就能夠了。

1、安裝前準備工做

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：

 

2、安裝node.js

下載地址：http://nodejs.org/

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

 

 3、安裝cordova

打開cmd命令，執行：

npm install -g cordova

 

4、建立一個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

 

 

 

5、構建應用

cordova build 構建全部平臺的應用

cordova build android 構建安卓平臺的應用

即將hello/www下的內容，構建到添加的平臺內。如android平臺，會構建到此目錄：

hello\platforms\android\assets\www

6、Eclipse導入

 兩個文件，platfomrs下的android 以及 cordovalib文件

7、目錄結構說明

（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爲應用的入口文件。