phonegap開發經驗談之一命令行創建項目和準備工做

一安裝與配置

安裝命令行配置,這個能夠參見網上的.3.0的最好用命令行配置。

你們在安裝android sdk的時候，會發現裏面自帶了一個eclipse，而且繼承了adt，直接用這個就行了。固然你已經有別的版本的eclipse並用了很長時間安裝插件就能夠了。

安裝phonegap 3.x首先要安裝的就是npm並配置環境變量,這樣纔可以保證獲取到phonegap最新的代碼,方便快捷,注意必須在聯網的環境下進行操做.固然若是你熟悉git也能夠從git上直接下載源碼.

安裝android sdk之後，ant也是必須安裝的，這是構建項目必須的，固然jdk也是必須，都必須配置正確。若是不會去百度。

===================下面是例子=================

F:\>phonegap create f:\demo\demo org.demo Demo
[phonegap] created project at f:\demo\demo

F:\>cd demo

F:\demo>cd demo

F:\demo\demo>tree
文件夾 PATH 列表
卷序列號爲 00000200 942D:D5B4
F:.
├─.cordova
│  └─hooks
│      ├─after_build
│      ├─after_compile
│      ├─after_docs
│      ├─after_emulate
│      ├─after_platform_add
│      ├─after_platform_ls
│      ├─after_platform_rm
│      ├─after_plugin_add
│      ├─after_plugin_ls
│      ├─after_plugin_rm
│      ├─after_prepare
│      ├─after_run
│      ├─before_build
│      ├─before_compile
│      ├─before_docs
│      ├─before_emulate
│      ├─before_platform_add
│      ├─before_platform_ls
│      ├─before_platform_rm
│      ├─before_plugin_add
│      ├─before_plugin_ls
│      ├─before_plugin_rm
│      ├─before_prepare
│      └─before_run
├─merges
├─platforms
├─plugins
└─www你們看這個目錄很重要，這個目錄就是整個應用項目的模版app，若是不用ide的話，直接編輯這裏的網頁而且用命令行編譯也是能夠的。不一樣的是用eclipse 　  |　　　編譯的時候在真機上的速度要比命令行快不少。
    ├─css
    ├─img
    ├─js
    ├─res
    │  ├─icon
    │  │  ├─android
    │  │  ├─bada
    │  │  ├─bada-wac
    │  │  ├─blackberry
    │  │  ├─ios
    │  │  ├─tizen
    │  │  ├─webos
    │  │  └─windows-phone
    │  └─screen
    │      ├─android
    │      ├─bada
    │      ├─bada-wac
    │      ├─blackberry
    │      ├─ios
    │      ├─tizen
    │      ├─webos
    │      └─windows-phone
    └─spec
        └─lib
            └─jasmine-1.2.0

===================例子結束==================

你們看上面的目錄結構,就是利用phonegap的cli命令生成的默認結構

配置完成後生成空白的phonegap項目,最好在這裏定義圖標,配置文件名

你們看這個目錄很重要，這個目錄就是整個應用項目的模版app，若是不用ide的話，直接編輯這裏的網頁而且用命令行編譯也是能夠的。不一樣的是用eclipse 編譯的時候在真機上的速度要比命令行快不少。咱們來看看這個目錄.

F:\demo\demo>cd www

F:\demo\demo\www>dir
 驅動器 F 中的卷沒有標籤。
 卷的序列號是 942D-D5B4

 F:\demo\demo\www 的目錄

2014-01-08  09:09    <DIR>          .
2014-01-08  09:09    <DIR>          ..
2014-01-08  09:09             3,625 config.xml
2014-01-08  09:09    <DIR>          css
2014-01-08  09:09            11,401 icon.png
2014-01-08  09:09    <DIR>          img
2014-01-08  09:09             1,927 index.html
2014-01-08  09:09    <DIR>          js
2014-01-08  09:09    <DIR>          res
2014-01-08  09:09    <DIR>          spec
2014-01-08  09:09             2,532 spec.html
               4 個文件         19,485 字節
               7 個目錄 76,825,452,544 可用字節

這裏面的config.xml就是最初的配置文件,這裏面能夠直接修改應用程序在手機裏顯示的名稱.

icon.png其實就是項目的圖標,128*128,系統會根據這個圖標生成在android平臺項目的res目錄下的圖標.注意到這裏爲止咱們只是創建了模版,咱們須要添加咱們須要的平臺,或者你直接build一下android程序都是能夠的.直接build會直接生成android程序

F:\demo\demo>phonegap build  android
[phonegap] detecting Android SDK environment..
[phonegap] using the local environment
[phonegap] adding the Android platform...
[phonegap] compiling Android...
[phonegap] successfully compiled Android app

能夠看到,編譯的時候首先尋找android sdk的環境,因此你必須首先配置好,否則build失敗.咱們再來看目錄

F:\demo\demo>tree
文件夾 PATH 列表
卷序列號爲 00000200 942D:D5B4
F:.
├─.cordova
│  └─hooks
│      ├─after_build
│      ├─after_compile
│      ├─after_docs
│      ├─after_emulate
│      ├─after_platform_add
│      ├─after_platform_ls
│      ├─after_platform_rm
│      ├─after_plugin_add
│      ├─after_plugin_ls
│      ├─after_plugin_rm
│      ├─after_prepare
│      ├─after_run
│      ├─before_build
│      ├─before_compile
│      ├─before_docs
│      ├─before_emulate
│      ├─before_platform_add
│      ├─before_platform_ls
│      ├─before_platform_rm
│      ├─before_plugin_add
│      ├─before_plugin_ls
│      ├─before_plugin_rm
│      ├─before_prepare
│      └─before_run
├─merges
│  └─android
├─platforms
│  └─android
│      ├─assets
│      │  └─www
│      │      ├─css
│      │      ├─img
│      │      ├─js
│      │      ├─res
│      │      │  ├─icon
│      │      │  │  ├─android
│      │      │  │  ├─bada
│      │      │  │  ├─bada-wac
│      │      │  │  ├─blackberry
│      │      │  │  ├─ios
│      │      │  │  ├─tizen
│      │      │  │  ├─webos
│      │      │  │  └─windows-phone
│      │      │  └─screen
│      │      │      ├─android
│      │      │      ├─bada
│      │      │      ├─bada-wac
│      │      │      ├─blackberry
│      │      │      ├─ios
│      │      │      ├─tizen
│      │      │      ├─webos
│      │      │      └─windows-phone
│      │      └─spec
│      │          └─lib
│      │              └─jasmine-1.2.0
│      ├─bin
│      │  ├─classes
│      │  │  └─org
│      │  │      └─demo
│      │  ├─dexedLibs
│      │  └─res
│      │      ├─drawable
│      │      ├─drawable-hdpi
│      │      ├─drawable-ldpi
│      │      ├─drawable-mdpi
│      │      └─drawable-xhdpi
│      ├─cordova
│      │  ├─lib
│      │  └─node_modules
│      │      ├─.bin
│      │      ├─q
│      │      │  └─benchmark
│      │      └─shelljs
│      │          ├─bin
│      │          ├─scripts
│      │          └─src
│      ├─CordovaLib
│      │  ├─bin
│      │  │  ├─classes
│      │  │  │  ├─com
│      │  │  │  │  └─squareup
│      │  │  │  │      └─okhttp
│      │  │  │  │          └─internal
│      │  │  │  │              ├─http
│      │  │  │  │              └─spdy
│      │  │  │  └─org
│      │  │  │      └─apache
│      │  │  │          └─cordova
│      │  │  ├─dexedLibs
│      │  │  └─res
│      │  ├─gen
│      │  │  └─org
│      │  │      └─apache
│      │  │          └─cordova
│      │  ├─libs
│      │  ├─res
│      │  └─src
│      │      ├─com
│      │      │  └─squareup
│      │      │      └─okhttp
│      │      │          └─internal
│      │      │              ├─http
│      │      │              └─spdy
│      │      └─org
│      │          └─apache
│      │              └─cordova
│      ├─gen
│      │  └─org
│      │      └─demo
│      ├─libs
│      ├─platform_www
│      ├─res
│      │  ├─drawable
│      │  ├─drawable-hdpi
│      │  ├─drawable-ldpi
│      │  ├─drawable-mdpi
│      │  ├─drawable-xhdpi
│      │  ├─values
│      │  └─xml
│      └─src
│          └─org
│              └─demo
├─plugins
└─www
    ├─css
    ├─img
    ├─js
    ├─res
    │  ├─icon
    │  │  ├─android
    │  │  ├─bada
    │  │  ├─bada-wac
    │  │  ├─blackberry
    │  │  ├─ios
    │  │  ├─tizen
    │  │  ├─webos
    │  │  └─windows-phone
    │  └─screen
    │      ├─android
    │      ├─bada
    │      ├─bada-wac
    │      ├─blackberry
    │      ├─ios
    │      ├─tizen
    │      ├─webos
    │      └─windows-phone
    └─spec
        └─lib
            └─jasmine-1.2.0

你會注意到綠色的多了不少內容其中最重要的是platform下面的內容,這就是咱們針對具體平臺生成的代碼,這個時候才能夠說用phonegap開發android手機應用完全準備完畢.這裏有不少文件,感興趣的能夠本身去看.

還要注意的是phonegap的3.0分支,全部的api都是插件的形式,用的時候須要臨時添加在命令行,具體能夠參考文檔.建議使用命令行添加和build程序,這樣會自動將添加的插件插入到android代碼的配置文件裏.我用dw編輯一開始的www目錄的文件,而後在命令行裏編譯,eclipse只是爲了運行罷了.

要注意的是在命令行裏編譯後,eclipse可能會報錯,是因爲文件不一樣步的願意,右鍵單擊項目而後刷新就行了.

要注意到不少功能必須在真機上才能測試的,由於phonegap是針對移動平臺的,不少事件瀏覽器是不支持的.

再好比pg的同源策略,跨域加載文件在真機裏也是容許的,可是瀏覽器不支持.

附贈個人path,和開發無關的設置我都去掉了.

F:\demo\demo>path
PATH=F:\nodej
s\;F:\ant\bin;C:\Program Files\Java\jdk1.7.0_45\bin;C:\Program Files\Java\jdk1.7
.0_45\jre\bin;F:\adt\sdk\tools;F:\adt\sdk\platform-tools;F:\adt\sdk\build-tools;
C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Roamin
g\npm

能夠看到java,npm,android sdk和ant都配置了,須要注意的是android adt須要配置三個,分別是:F:\adt\sdk\tools;F:\adt\sdk\platform-tools;F:\adt\sdk\build-tools;

最後是在adt裏面利用已有的代碼創建應用程序.

 

下一期是phonegap中加載web頁面,並對web頁面進行修改