IT工程師數位筆記本

一 準備工作                                                                                                                            

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的話直接在瀏覽器里面的調試會更加快捷.