初探Android程序框架PhoneGap - 耗子的博客 - ITeye技術(shù)網(wǎng)站

software1 2011-05-16

展開全文

初探Android程序框架PhoneGap

文章分類:移動開發(fā)

phonegap是由溫哥華的一家小公司研發(fā)的多平臺的移動開發(fā)框架,支持流行的大多數(shù)移動設(shè)備(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone).目前phonegap獲得Apple,IBM,NOKIA,palm等眾多公司的支持.

phonegap的優(yōu)點:
1.兼容性,完全做到了written once,run everywhere.
2.標(biāo)準(zhǔn)化.phonegap使用W3C標(biāo)準(zhǔn),可用html5+css3+JqueryMobile快速開發(fā)各平臺的app
3.開發(fā)成本低
4.完全自由免費.phonegap采用MIT,BSD許可證.

phonegap的缺點:

1.性能有待加強(qiáng),運(yùn)行速度慢,UI反應(yīng)延時

2.沒有中文文檔,例子較少

-------------------------------------------非華麗的分割線-------------------------------------------------------------

HelloWorld是IT界永恒不變的話題.不知從何時起,每一門語音,每一項新技術(shù)的第一個demo都是HelloWorld.

下面筆者將采用phonegap+jquerymobile開發(fā)一個phonegap的Helloworld.

第一步:下載phonegap,jquerymobile,jquery1.5.1解壓待用.(文章末尾附有官網(wǎng)鏈接)

第二步:新建一個android項目HelloWorld,在assets目錄下新建文件夾www,這個文件夾將用來放置html,JS,CSS等文件.在根目錄下新建libs文件夾,用來放置phonegap的開發(fā)包.

第四步: 將剛剛解壓出來的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文件夾,并在項目的屬性中將其加入到項目

第六步:修改默認(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");
}
}

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添加點擊事件
$('#ClickMe').tap(function(){alert('HelloWorld!');});
});
</script>

<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添加點擊事件
$('#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>
<div data-role="content" >
<p>
這是我第一個PhoneGap+JqueryMobile結(jié)合的android程序
</p>
<p>
<a href="#" id="ClickMe" data-role="button" data-inline="true" 點我</a>
</p>
</div>
<div data-role="footer" >
<h4>
這個是頁腳
</h4>
</div>
</div>

<div data-theme="b" data-role="page" id="main">
<div data-role="header" >
<h1>
HelloWorld
</h1>
</div>
<!-- /header -->
<div data-role="content" >
<p>
這是我第一個PhoneGap+JqueryMobile結(jié)合的android程序
</p>
<p>
<a href="#" id="ClickMe" data-role="button" data-inline="true" 點我</a>
</p>
</div>
<!-- /content -->
<div data-role="footer" >
<h4>
這個是頁腳
</h4>
</div>
<!-- /header -->
</div>

第七步:Run As Android Application

運(yùn)行效果圖如下