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页面进行修改
