初探Android程序框架PhoneGap文章分類(lèi):移動(dòng)開(kāi)發(fā)phonegap是由溫哥華的一家小公司研發(fā)的多平臺(tái)的移動(dòng)開(kāi)發(fā)框架,支持流行的大多數(shù)移動(dòng)設(shè)備(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone).目前phonegap獲得Apple,IBM,NOKIA,palm等眾多公司的支持.
phonegap的缺點(diǎn): 1.性能有待加強(qiáng),運(yùn)行速度慢,UI反應(yīng)延時(shí) 2.沒(méi)有中文文檔,例子較少
-------------------------------------------非華麗的分割線------------------------------------------------------------- HelloWorld是IT界永恒不變的話題.不知從何時(shí)起,每一門(mén)語(yǔ)音,每一項(xiàng)新技術(shù)的第一個(gè)demo都是HelloWorld. 下面筆者將采用phonegap+jquerymobile開(kāi)發(fā)一個(gè)phonegap的Helloworld.
第一步:下載phonegap,jquerymobile,jquery1.5.1解壓待用.(文章末尾附有官網(wǎng)鏈接)
第二步:新建一個(gè)android項(xiàng)目HelloWorld,在assets目錄下新建文件夾www,這個(gè)文件夾將用來(lái)放置html,JS,CSS等文件.在根目錄下新建libs文件夾,用來(lái)放置phonegap的開(kāi)發(fā)包.
第四步: 將剛剛解壓出來(lái)的phonegap/android下的phonegap.0.9.5.js;jquerymobile目錄下的images,jquery.mobile-1.0a4.1.min.css,jquery.mobile-1.0a4.1.min.js;Jquery目錄下的jqueryjquery-1.5.1.min.js復(fù)制到www文件夾.
第五步:復(fù)制phonegap/android下的phonegap.0.9.5.jar到libs文件夾,并在項(xiàng)目的屬性中將其加入到項(xiàng)目
第六步:修改默認(rèn)的Activity文件main.java
Java代碼
  
public class main extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
第七步:在www文件夾中新建index.html文件. 輸入內(nèi)容
Html代碼
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" type="text/css"
charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//為按鈕ClickMe添加點(diǎn)擊事件
$('#ClickMe').tap(function(){alert('HelloWorld!');});
});
</script>
在<body></body>中添加
Html代碼
<div data-theme="b" data-role="page" id="main"> <div data-role="header" > <h1> HelloWorld </h1> </div> <!-- /header --> <div data-role="content" > <p> 這是我第一個(gè)PhoneGap+JqueryMobile結(jié)合的android程序 </p> <p> <a href="#" id="ClickMe" data-role="button" data-inline="true" 點(diǎn)我</a> </p> </div> <!-- /content --> <div data-role="footer" > <h4> 這個(gè)是頁(yè)腳 </h4> </div> <!-- /header --> </div>
第七步:Run As Android Application 運(yùn)行效果圖如下
OK,至此我們第一個(gè)phonegap+jquerymobile的android程序已經(jīng)完成.在模擬器中運(yùn)行性能很差,真機(jī)運(yùn)行的延時(shí)是可以接受的.
詳細(xì)代碼請(qǐng)參考附件,文章提到的jar,JS,CSS等文件可從附件中復(fù)制或到對(duì)應(yīng)官網(wǎng)下載最新版本
很少寫(xiě)東西,如有錯(cuò)漏請(qǐng)看官指正.
PS： PhoneGap http://www./ jquerymobile http:/// |
|
|
來(lái)自： software1 > 《PhoneGap》
