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