前言
上個月我設計一個基於JQM的webapp作為我的畢業設計
jQuery moible 開發筆記之項目設計
http://www.cnblogs.com/youxilua/archive/2012/01/03/2310963.html
結果…當然是做完了…效果嘛,作為畢業設計還可以,但是實際使用起來實在不給力,例如,窗口的浮動,流量的消耗,還有對於設備配置的依賴(例如,在局域網中HTC 野火跑起來那叫一個慢死…),不過,在一些高端設備運行還可以,例如,小米(我們班還是挺多人買了),iphone,三星的銀河系列…
工欲善其事,必先利其器
我們沒必要學習苦行僧那樣,用記事本來打代碼.目前而言呢,phonegap的IDE工具最好的當然是DW CS 5.5.
不過,我這里使用eclipse作為我的開發IDE,因為之前使用過DW CS 5.5 ,這次就換個IDE工具.
Eclipse 的配置
1,一站式新建項目
phonegap + jqm
http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/
這個插件還是很給力的,已經支持默認支持最新版本的phonegap,jqm,sencha
安裝完以后選擇這個圖標
2,選擇要建何種類型的phoneGap
(1),默認已經支持直接創建最新版本的phoneGap
(2),這個插件支持兩大移動js框架jqm & Sencha Touch,當然..這兩個框架只能二選一了,你不選也行…
(3),我這里選擇我最為熟悉的jQm框架,默認已經支持最新版本了
3,接着,創建android項目即可
接下來就不啰嗦了…
完成以后:項目結構,activity都已經寫好的了..
代碼也已經寫好了.
注意:新建完以后,可能androidmainifest會報錯,你把報錯的那行代碼刪掉即可,你也可以根據那個代碼要求找一個支持xlarge包的android版本(4.0吧)(貌似2.2沒有這玩意),我這里省事直接刪掉算了…
自帶例子簡單介紹
在新建一個page,想使用插件幫你打包好的API你需要以下步驟
1,准備JS文件,滑輪到index.html文件最后幾行;
//這個JS是必須的,調用的是設備的初始化 <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> //以下API自己按照自己的喜好調用和修改吧 <script type="text/javascript" charset="utf-8" src="apis/accelerometer.js"></script> <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script> <script type="text/javascript" charset="utf-8" src="apis/capture.js"></script> <script type="text/javascript" charset="utf-8" src="apis/compass.js"></script> <script type="text/javascript" charset="utf-8" src="apis/connection.js"></script> <script type="text/javascript" charset="utf-8" src="apis/contacts.js"></script> <script type="text/javascript" charset="utf-8" src="apis/events.js"></script> <script type="text/javascript" charset="utf-8" src="apis/file.js"></script> <script type="text/javascript" charset="utf-8" src="apis/geolocation.js"></script> <script type="text/javascript" charset="utf-8" src="apis/media.js"></script> <script type="text/javascript" charset="utf-8" src="apis/notification.js"></script> <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
2,在body上調用init()方法,具體使用參見device.js.
<body onload="init();">
3,順便你寫了…
例子演示
感覺,這個跟這個jqm一起的例子,個人感覺比官方那個好很多…截個圖,結束吧…
順便介紹兩本有關於phonegap的書
http://book.douban.com/subject/6954116/
http://book.douban.com/subject/6915788/
下載?反白可見…不希望外傳…
http://www.kuaipan.cn/file/id_2622545685705289.html
http://www.kuaipan.cn/file/id_2622545685705398.html
下次講講數據庫的調用和攝像頭的本地保存吧…