phonegap 3.3教程 地理信息api教程

一 准备工作

phonegap3.3的地理信息教程.从零开始,首先要新建一个项目从命令行启动

可以看到这是默认的生成的www目录,在这个目录里是最原始的html文件,编译的时候在根据这里的文件生成android或者其他平台的项目文件.所以我们可以在这里进行一些基本的配置.

1. 修改图标:修改icon.png就可以了
2. 修改应用的名字,在config修改就好,可以添加作者信息.具体参加配置文件,不知道的去看文档

按照phonegap官方的建议,要用命令行方式建立应用.具体的命令参见官网http://docs.phonegap.com/en/3.3.0/guide_cli_index.md.html#The%20Command-Line%20Interface

接下来建立android的项目,官方的建议是添加platform,然后在编译.由于我只进行android开发,直接build一下就可以生成android的项目文件了,这是比较省事的做法.这里要注意的是必须进入到项目的目录f:\diliapi才可以进行编译

可以从中看到的信息,由于我运行phonegap build android命令的时候,没有进入到项目目录,所以提示项目目录找不到.

从build信息可以看出,首先寻找android sdk,所以要在环境变量里对android进行配置.使用本地环境变量设置.

可以看到有一条add android platform命令,自动添加了android平台的项目,然后编译.使用了默认的debug签名keystore文件

这是build命令自动生成的android项目文件,然后我们就可以在安装了adt的eclipse里根据这些代码新建文件.

这里会遇到的问题有:

1. 如果项目报错,等待一会儿,然后右键单击项目文件,直接编译就好了
2. 如果你选择修改diliapi目录下的www目录的文件的话,需要重新build,这个时候需要重复第一步操作,如果弹出提示框,点是,然后右键刷新项目编译

利用eclipse编写android程序在真机进行调试的速度要比用命令行run要快的多,比较节省时间.

二 然后进入正题,开始开发程序

phonegap 从3.x版本呢开始,架构发生了改变,所有的api都是插件的形式,在用的时候添加,监管方文档

http://docs.phonegap.com/en/3.3.0/cordova_geolocation_geolocation.md.html#Geolocation

$ cordova plugin add org.apache.cordova.geolocation    $ cordova plugin ls    ['org.apache.cordova.geolocation']    $ cordova plugin rm org.apache.cordova.geolocation

运行命令以后,会添加插件并且自动更改配置文件,build以后会自动更新android项目里的配置文件

如图所示.这样不用考虑配置文件的更新,命令行模式下就这点儿好.

接下来你有两个选择:

1. 直接修改f:\DiliAPI\www\下的文件,然后每次用命令行build,然后在eclipse里运行到模拟机或者真机
2. 直接在eclipse里面修改,但是如果如果重新修改f:\DiliAPI\www\下的文件并build,在eclipse里做的修改会被重置,所以最好拷贝下

在eclipse里利用已有代码建立android项目的方式请百度.

1. 看到这个项目文件了吧.报错了,但是不要着急,右键刷新下就好了.其实甚至不用刷新,等一会它自己就好了,让代码飞一会儿
2. 而且可以注意到src目录下,geolocation被导入.

建立后的项目.个人比较喜欢在dw编辑html和js文件,按自己的习惯来

调试logcat应用小技巧

代码里的console.log()属于D级信息,会在logcat显示.但是logcat在调试的时候会生成大量的信息,我们可以选择使用过滤功能.

我一般是写作:console.log("## "+"需要输出的信息");

然后利用##作为过滤符

这样会在大量的调试信息中过滤出console打印的信息.提高效率

需要注意到的是,phonegap默认不使用jquery mobile ui,大家可以在dw里面新建一个页面,然后会自动导入需要的css和js文件,如果你需要用jquery mobile ui的话.这个看你个人需要,到目前为止整个框架就搭建起来了,至于弄什么内容就看你自己了

我们可以删除原来的index.html文件,然后自己新建一个就好了.

android项目的html文件是在asset\www目录下的,所以大家修改这里的也可以的.

还有就是如果你的页面仅仅用到了jquery mobile而没有使用phonegap的话直接在浏览器里面的调试会更加快捷.