一安裝與配置
安裝命令行配置,這個可以參見網上的.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頁面進行修改
文章列表
留言列表
