原文發(fā)表在:http://publish.itpub.net/a2010/1008/1111/000001111212.shtml
目前，隨著Google的Android手機(jī)和蘋果的iphone手機(jī)的逐漸普及，越來(lái)越多開(kāi)發(fā)者加入到移動(dòng)應(yīng)用開(kāi)發(fā)的大軍當(dāng)中。其中，Android應(yīng)用是基于Java語(yǔ)言基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，而蘋果公司的iphone則是基于C語(yǔ)言開(kāi)發(fā)的。如果開(kāi)發(fā)者編寫的應(yīng)用需要同時(shí)在不同的移動(dòng)設(shè)備上運(yùn)行的話，則必須要掌握多種開(kāi)發(fā)語(yǔ)言。而為了進(jìn)一步簡(jiǎn)化移動(dòng)應(yīng)用的編程，Nitobi公司推出了一套開(kāi)源的移動(dòng)應(yīng)用解決方案PhoneGap(http://www.phonegap.com)。
PhoneGap是一款開(kāi)源的手機(jī)應(yīng)用開(kāi)發(fā)平臺(tái)，它僅僅只用HTML和JavaScript語(yǔ)言就可以制作出能在多個(gè)移動(dòng)設(shè)備上運(yùn)行的應(yīng)用。PhoneGap將移動(dòng)設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡(jiǎn)化，提供了一系列豐富的API供開(kāi)發(fā)者調(diào)用，只要你會(huì)HTML和Javascript或者Java語(yǔ)言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機(jī)平臺(tái)上運(yùn)行的應(yīng)用，這對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)者來(lái)說(shuō)無(wú)疑是個(gè)福音。 目前，PhoneGap已實(shí)現(xiàn)對(duì)iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對(duì)其支持的詳細(xì)說(shuō)明如下圖所示：
在本文中，將以一個(gè)簡(jiǎn)單的能在Android平臺(tái)上運(yùn)行的HelloWorld的示例，講解如何安裝PhoneGap的開(kāi)發(fā)框架并配合Eclipse進(jìn)行開(kāi)發(fā)的過(guò)程。
基于Android SDK安裝PhoneGap框架
首先，要明白一點(diǎn)，就是要利用PhoneGap框架開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，也是必須在開(kāi)發(fā)環(huán)境上安裝對(duì)應(yīng)移動(dòng)設(shè)備應(yīng)用的SDK的。比如你要開(kāi)發(fā)一個(gè)運(yùn)行在Android上的應(yīng)用，則必須安裝 Android的SDK包，開(kāi)發(fā)iphone應(yīng)用，就要安裝iphone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。
無(wú)論是開(kāi)發(fā)基于哪種平臺(tái)的移動(dòng)應(yīng)用，首先要到PhoneGap的官方網(wǎng)站下載
PhoneGap包，地址是：http://www.phonegap.com/download，目前最新的版本是0.9.1,下載之后，解壓縮后，會(huì)發(fā)現(xiàn)如下圖所示的若干個(gè)文件夾
這里，由于我們是構(gòu)建Android應(yīng)用，因此只有phonegap-android對(duì)我們是有用的。
由于PhoneGap是通過(guò)Ruby語(yǔ)言以及所開(kāi)發(fā)的目標(biāo)移動(dòng)設(shè)備的SDK一起搭配工作的，因此除了下載PhoneGap外，開(kāi)發(fā)者還必須安裝如下的軟件(以Android為例)
Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2
Eclipse IDE
Apache Ant 1.8.1 (http://ant.apache.org)
JDK 1.5以上
Android 的Eclipse開(kāi)發(fā)插件ADT(http://developer.android.com/sdk/eclipse-adt.html)
Ruby 1.9.1，建議到http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。
此外，我們還要對(duì)windows下的運(yùn)行環(huán)境變量進(jìn)行設(shè)置。首先我們到控制面板-系統(tǒng)-環(huán)境變量中，增加如下幾個(gè)系統(tǒng)環(huán)境變量。
JAVA_HOME:指向所安裝的JDK的目錄，比如c:\jdk15
ANT_HOME:指向所安裝的Apache_ANT目錄，比如d:\ant
ANDROID_HOME;指向所安裝的Android SDK目錄，比如d:\androidsdk
對(duì)Path進(jìn)行設(shè)置,分別將ruby,jdk,android sdk,ant加入到原有的path中,如：
c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools
其中，下載Ruby 1.9.1的Windows版本后，直接選擇安裝到指定目錄即可。
在完成上面的這些工作后，我們接下來(lái)就通過(guò)PhoneGap框架的腳手架功能，快速生成一個(gè)android的原型程序。
通過(guò)PhoneGap生成基于Android的原型程序
1 進(jìn)入PhoneGap-Android目錄，并進(jìn)入MS-DOS方式，在命令行下，按如下格式執(zhí)行該命令：
ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
上述參數(shù)說(shuō)明如下：
其中android_sdk_path指定了android sdk的安裝位置，比如：
d:/androidsdk,注意這里不要寫成“\”,應(yīng)該是“/”作為分隔符。
Name：要生成的android應(yīng)用的名字。
Package_name:生成的android應(yīng)用中源代碼中的包名，注意必須至少有一層的包關(guān)系，即com.XXXX的形式。
WWW：這里指應(yīng)用中存放HTML,Javascipt,CSS的位置目錄名稱。
PATH:這里指通過(guò)PhoneGap生成的項(xiàng)目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內(nèi)。
下面是一個(gè)例子：
ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
“d:/HelloWorldGap”
運(yùn)行上述命令后，會(huì)發(fā)現(xiàn)在D盤會(huì)生成一個(gè)HelloWolrdGap的工程目錄，phonegap已經(jīng)為我們生成了項(xiàng)目的框架了。
將工程導(dǎo)入到ECLIPSE中
如果安裝了Android for eclipse的插件ADT后，我們可以將PhoneGap生成的工程導(dǎo)入到Eclipse中去。首先我們打開(kāi)Eclipse,新建一個(gè)Android Project，如下圖
其中輸入Project name的名稱為HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項(xiàng)目的目錄。之后在Eclipse中則會(huì)看到如下結(jié)構(gòu)的
可以看到其中assets下的www目錄存放了工程中需要用到的HTML、Javascript和CSS文件。此外，還要確認(rèn)工程的lib目錄下面，存在phonegap.jar文件。
接下來(lái)我們?cè)囍\(yùn)行下這個(gè)工程，會(huì)在模擬器中看到如下效果：
運(yùn)行的結(jié)果是顯示了PhoneGap中默認(rèn)顯示的index.html頁(yè)面，其中演示了其中的一些功能，大家可以嘗試去試驗(yàn)一下。
編寫HelloWorld程序
接下來(lái)，我們來(lái)在此基礎(chǔ)上編寫HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來(lái)phonegap生成的代碼，寫入如下代碼：
<!DOCTYPE HTML>?
<html>?
??? <head>?
??? <meta name="viewport" content="width=320; user-scalable=no" />????? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
??? <title>PhoneGap Android App</title>?
???????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?????????? <script type="text/javascript" charset="utf-8">?
????????????????????? var showMessageBox = function() {??
????????????? navigator.notification.alert("Hello World of PhoneGap");??
????????????????????? }??
??????????????????????? function init(){??
??????????? document.addEventListener("deviceready", showMessageBox, true);?????????????????
????????????????????? }??
? </script>?
? </head>?
<body onload="init();"? >?
? </body>?
</html>?
可以看到，這其實(shí)是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過(guò)Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件
deviceready，這個(gè)事件含義是當(dāng)設(shè)備在將其應(yīng)用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時(shí)，必須通過(guò) 的方式引入進(jìn)行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個(gè)方法實(shí)際上是
顯示了一個(gè)帶文本的提示框，運(yùn)行結(jié)果如下圖：
改進(jìn)HelloWorld程序
接下來(lái)我們改進(jìn)下這個(gè)程序，實(shí)現(xiàn)的功能是我們可以在文本框里輸入名字，然后點(diǎn)確定按鈕后，彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼如下：
<!DOCTYPE HTML>?
?
<html>?
?
? <head>?
?
??? <meta name="viewport" content="width=320; user-scalable=no" />?
?
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
?
??? <title>PhoneGap</title>?
?
????????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?
????????????? <script type="text/javascript" charset="utf-8">?
?
????????????? var displayHello = function() {??
?
??????????????????????? var name =????? document.getElementById("firstname").value;??
?
??????????????????????? navigator.notification.alert("name" + name);??
?
??????????? }??
?
?? </script>?
?
? </head>?
?
? <body onload="init();" id="bdy" >?
?
??????????? <div id="txt">?
?
??????????? <input?? type="text" name="firstname" id="firstname" />?
?
??????????? </div>?
?
??????????? <div id ="btn">?
?
??? <a href="#" class="btn" onclick="displayHello();">Say Hello</a>?
?
??????????? </div>?
?
??????? </div>?
?
? </body>?
?
</html>
如果你懂得HTML和Javascript的話，上面的程序?qū)嵲谌菀桌斫狻Ｆ渲形覀兲砑恿艘粋€(gè)名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過(guò)document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：
總結(jié)
通過(guò)PhoneGap這套開(kāi)源框架對(duì)開(kāi)發(fā)移動(dòng)設(shè)備SDK的封裝，我們今后在開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術(shù)，就可以很方便地進(jìn)行開(kāi)發(fā)了，更多的資料請(qǐng)查看PhoneGap的幫助文檔。
目前，隨著Google的Android手機(jī)和蘋果的iphone手機(jī)的逐漸普及，越來(lái)越多開(kāi)發(fā)者加入到移動(dòng)應(yīng)用開(kāi)發(fā)的大軍當(dāng)中。其中，Android應(yīng)用是基于Java語(yǔ)言基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，而蘋果公司的iphone則是基于C語(yǔ)言開(kāi)發(fā)的。如果開(kāi)發(fā)者編寫的應(yīng)用需要同時(shí)在不同的移動(dòng)設(shè)備上運(yùn)行的話，則必須要掌握多種開(kāi)發(fā)語(yǔ)言。而為了進(jìn)一步簡(jiǎn)化移動(dòng)應(yīng)用的編程，Nitobi公司推出了一套開(kāi)源的移動(dòng)應(yīng)用解決方案PhoneGap(http://www.phonegap.com)。
PhoneGap是一款開(kāi)源的手機(jī)應(yīng)用開(kāi)發(fā)平臺(tái)，它僅僅只用HTML和JavaScript語(yǔ)言就可以制作出能在多個(gè)移動(dòng)設(shè)備上運(yùn)行的應(yīng)用。PhoneGap將移動(dòng)設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡(jiǎn)化，提供了一系列豐富的API供開(kāi)發(fā)者調(diào)用，只要你會(huì)HTML和Javascript或者Java語(yǔ)言，就可以利用PhoneGap提供的API去調(diào)用各種功能，PhoneGap就能讓你可以制作出在各種手機(jī)平臺(tái)上運(yùn)行的應(yīng)用，這對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)者來(lái)說(shuō)無(wú)疑是個(gè)福音。 目前，PhoneGap已實(shí)現(xiàn)對(duì)iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對(duì)其支持的詳細(xì)說(shuō)明如下圖所示：
在本文中，將以一個(gè)簡(jiǎn)單的能在Android平臺(tái)上運(yùn)行的HelloWorld的示例，講解如何安裝PhoneGap的開(kāi)發(fā)框架并配合Eclipse進(jìn)行開(kāi)發(fā)的過(guò)程。
基于Android SDK安裝PhoneGap框架
首先，要明白一點(diǎn)，就是要利用PhoneGap框架開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，也是必須在開(kāi)發(fā)環(huán)境上安裝對(duì)應(yīng)移動(dòng)設(shè)備應(yīng)用的SDK的。比如你要開(kāi)發(fā)一個(gè)運(yùn)行在Android上的應(yīng)用，則必須安裝 Android的SDK包，開(kāi)發(fā)iphone應(yīng)用，就要安裝iphone sdk。本文將介紹如何安裝基于Android SDK下安裝PhoneGap。
無(wú)論是開(kāi)發(fā)基于哪種平臺(tái)的移動(dòng)應(yīng)用，首先要到PhoneGap的官方網(wǎng)站下載
PhoneGap包，地址是：http://www.phonegap.com/download，目前最新的版本是0.9.1,下載之后，解壓縮后，會(huì)發(fā)現(xiàn)如下圖所示的若干個(gè)文件夾
這里，由于我們是構(gòu)建Android應(yīng)用，因此只有phonegap-android對(duì)我們是有用的。
由于PhoneGap是通過(guò)Ruby語(yǔ)言以及所開(kāi)發(fā)的目標(biāo)移動(dòng)設(shè)備的SDK一起搭配工作的，因此除了下載PhoneGap外，開(kāi)發(fā)者還必須安裝如下的軟件(以Android為例)
Android SDK,建議安裝最新的版本，比如Android 2.1或者2.2
Eclipse IDE
Apache Ant 1.8.1 (http://ant.apache.org)
JDK 1.5以上
Android 的Eclipse開(kāi)發(fā)插件ADT(http://developer.android.com/sdk/eclipse-adt.html)
Ruby 1.9.1，建議到http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。
此外，我們還要對(duì)windows下的運(yùn)行環(huán)境變量進(jìn)行設(shè)置。首先我們到控制面板-系統(tǒng)-環(huán)境變量中，增加如下幾個(gè)系統(tǒng)環(huán)境變量。
JAVA_HOME:指向所安裝的JDK的目錄，比如c:\jdk15
ANT_HOME:指向所安裝的Apache_ANT目錄，比如d:\ant
ANDROID_HOME;指向所安裝的Android SDK目錄，比如d:\androidsdk
對(duì)Path進(jìn)行設(shè)置,分別將ruby,jdk,android sdk,ant加入到原有的path中,如：
c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools
其中，下載Ruby 1.9.1的Windows版本后，直接選擇安裝到指定目錄即可。
在完成上面的這些工作后，我們接下來(lái)就通過(guò)PhoneGap框架的腳手架功能，快速生成一個(gè)android的原型程序。
通過(guò)PhoneGap生成基于Android的原型程序
1 進(jìn)入PhoneGap-Android目錄，并進(jìn)入MS-DOS方式，在命令行下，按如下格式執(zhí)行該命令：
ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"
上述參數(shù)說(shuō)明如下：
其中android_sdk_path指定了android sdk的安裝位置，比如：
d:/androidsdk,注意這里不要寫成“\”,應(yīng)該是“/”作為分隔符。
Name：要生成的android應(yīng)用的名字。
Package_name:生成的android應(yīng)用中源代碼中的包名，注意必須至少有一層的包關(guān)系，即com.XXXX的形式。
WWW：這里指應(yīng)用中存放HTML,Javascipt,CSS的位置目錄名稱。
PATH:這里指通過(guò)PhoneGap生成的項(xiàng)目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內(nèi)。
下面是一個(gè)例子：
ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www
“d:/HelloWorldGap”
運(yùn)行上述命令后，會(huì)發(fā)現(xiàn)在D盤會(huì)生成一個(gè)HelloWolrdGap的工程目錄，phonegap已經(jīng)為我們生成了項(xiàng)目的框架了。
將工程導(dǎo)入到ECLIPSE中
如果安裝了Android for eclipse的插件ADT后，我們可以將PhoneGap生成的工程導(dǎo)入到Eclipse中去。首先我們打開(kāi)Eclipse,新建一個(gè)Android Project，如下圖
其中輸入Project name的名稱為HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項(xiàng)目的目錄。之后在Eclipse中則會(huì)看到如下結(jié)構(gòu)的
可以看到其中assets下的www目錄存放了工程中需要用到的HTML、Javascript和CSS文件。此外，還要確認(rèn)工程的lib目錄下面，存在phonegap.jar文件。
接下來(lái)我們?cè)囍\(yùn)行下這個(gè)工程，會(huì)在模擬器中看到如下效果：
運(yùn)行的結(jié)果是顯示了PhoneGap中默認(rèn)顯示的index.html頁(yè)面，其中演示了其中的一些功能，大家可以嘗試去試驗(yàn)一下。
編寫HelloWorld程序
接下來(lái)，我們來(lái)在此基礎(chǔ)上編寫HelloWorld程序。我們切換到index.html中去，在代碼模式下，刪除原來(lái)phonegap生成的代碼，寫入如下代碼：
<!DOCTYPE HTML>?
<html>?
??? <head>?
??? <meta name="viewport" content="width=320; user-scalable=no" />????? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
??? <title>PhoneGap Android App</title>?
???????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?????????? <script type="text/javascript" charset="utf-8">?
????????????????????? var showMessageBox = function() {??
????????????? navigator.notification.alert("Hello World of PhoneGap");??
????????????????????? }??
??????????????????????? function init(){??
??????????? document.addEventListener("deviceready", showMessageBox, true);?????????????????
????????????????????? }??
? </script>?
? </head>?
<body onload="init();"? >?
? </body>?
</html>?
可以看到，這其實(shí)是普通的HTML和Javascript代碼。首先在onload觸發(fā)的方法init中，通過(guò)Javascript的回調(diào)方法中調(diào)用了phonegap封裝好的事件
deviceready，這個(gè)事件含義是當(dāng)設(shè)備在將其應(yīng)用程序加載完畢后觸發(fā)的。在引入phonegap提供的API時(shí)，必須通過(guò) 的方式引入進(jìn)行調(diào)用。在這里的回調(diào)函數(shù)showMessageBox中，就調(diào)用了phonegap封裝好的方法 navigator.notification.alert，這個(gè)方法實(shí)際上是
顯示了一個(gè)帶文本的提示框，運(yùn)行結(jié)果如下圖：
改進(jìn)HelloWorld程序
接下來(lái)我們改進(jìn)下這個(gè)程序，實(shí)現(xiàn)的功能是我們可以在文本框里輸入名字，然后點(diǎn)確定按鈕后，彈出提示窗口顯示Hello+你輸入的名字。修改程序代碼如下：
<!DOCTYPE HTML>?
?
<html>?
?
? <head>?
?
??? <meta name="viewport" content="width=320; user-scalable=no" />?
?
??? <meta http-equiv="Content-type" content="text/html; charset=utf-8">?
?
??? <title>PhoneGap</title>?
?
????????????? <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>?????????
?
????????????? <script type="text/javascript" charset="utf-8">?
?
????????????? var displayHello = function() {??
?
??????????????????????? var name =????? document.getElementById("firstname").value;??
?
??????????????????????? navigator.notification.alert("name" + name);??
?
??????????? }??
?
?? </script>?
?
? </head>?
?
? <body onload="init();" id="bdy" >?
?
??????????? <div id="txt">?
?
??????????? <input?? type="text" name="firstname" id="firstname" />?
?
??????????? </div>?
?
??????????? <div id ="btn">?
?
??? <a href="#" class="btn" onclick="displayHello();">Say Hello</a>?
?
??????????? </div>?
?
??????? </div>?
?
? </body>?
?
</html>
如果你懂得HTML和Javascript的話，上面的程序?qū)嵲谌菀桌斫狻Ｆ渲形覀兲砑恿艘粋€(gè)名為firstname的文本框，并且在按鈕的onclick事件中調(diào)用的displayHello()方法中通過(guò)document.getElementById的Javascript方法獲得了用戶輸入的名字，然后同樣用navigator.notification.alert的方法輸出結(jié)果，輸入的界面和輸出的結(jié)果如下圖所示：
總結(jié)
通過(guò)PhoneGap這套開(kāi)源框架對(duì)開(kāi)發(fā)移動(dòng)設(shè)備SDK的封裝，我們今后在開(kāi)發(fā)移動(dòng)應(yīng)用時(shí)，只需要調(diào)用PhoneGap封裝好的API，結(jié)合已有的Java、HTML、CSS和Javascript技術(shù)，就可以很方便地進(jìn)行開(kāi)發(fā)了，更多的資料請(qǐng)查看PhoneGap的幫助文檔。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
