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