[PhoneGap]開發環境搭建與簡單應用

時間 2019-11-13

標籤 phonegap 開發環境搭建簡單應用简体版

原文原文鏈接

目前，隨着Google的Android手機和蘋果的iphone手機的逐漸普及，愈來愈多開發者加入到移動應用開發的大軍當中。其中，Android應用是基於Java語言基礎上進行開發的，而蘋果公司的iphone則是基於C語言開發的。若是開發者編寫的應用須要同時在不一樣的移動設備上運行的話，則必需要掌握多種開發語言。而爲了進一步簡化移動應用的編程，Nitobi公司推出了一套開源的移動應用解決方案PhoneGap( http://www.phonegap.com)。

　　PhoneGap是一款開源的手機應用開發平臺，它僅僅只用HTML和JavaScript語言就能夠製做出能在多個移動設備上運行的應用。PhoneGap將移動設備自己提供的複雜的API進行了抽象和簡化，提供了一系列豐富的API供開發者調用，只要你會HTML和Javascript或者Java語言，就能夠利用PhoneGap提供的API去調用各類功能，PhoneGap就能讓你能夠製做出在各類手機平臺上運行的應用，這對移動應用開發者來講無疑是個福音。目前，PhoneGap已實現對iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支持,其中官方文檔中對其支持的詳細說明以下圖所示：

　在本文中，將以一個簡單的能在Android平臺上運行的HelloWorld的示例，講解如何安裝PhoneGap的開發框架並配合Eclipse進行開發的過程。

　　基於Android SDK安裝PhoneGap框架

　　首先，要明白一點，就是要利用PhoneGap框架開發移動應用時，也是必須在開發環境上安裝對應移動設備應用的SDK的。好比你要開發一個運行在Android上的應用，則必須安裝 Android的SDK包，開發iphone應用，就要安裝iphone sdk。本文將介紹如何安裝基於Android SDK下安裝PhoneGap。

　　不管是開發基於哪一種平臺的移動應用，首先要到PhoneGap的官方網站下載

　　PhoneGap包，地址是： http://www.phonegap.com/download，目前最新的版本是0.9.1,下載以後，解壓縮後，會發現以下圖所示的若干個文件夾

　這裏，因爲咱們是構建Android應用，所以只有phonegap-android對咱們是有用的。

　　因爲PhoneGap是經過Ruby語言以及所開發的目標移動設備的SDK一塊兒搭配工做的，所以除了下載PhoneGap外，開發者還必須安裝以下的軟件(以Android爲例)

　　Android SDK,建議安裝最新的版本，好比Android 2.1或者2.2

　　Eclipse IDE

　　Apache Ant 1.8.1 ( http://ant.apache.org)

　　JDK 1.5以上

　　Android 的Eclipse開發插件ADT( http://developer.android.com/sdk/eclipse-adt.html)

　　Ruby 1.9.1，建議到 http://rubyinstaller.org/直接下載1.9.1的版本直接安裝。

　　此外，咱們還要對windows下的運行環境變量進行設置。首先咱們到控制面板-系統-環境變量中，增長以下幾個系統環境變量。

　　JAVA_HOME:指向所安裝的JDK的目錄，好比c:\jdk15

　　ANT_HOME:指向所安裝的Apache_ANT目錄，好比d:\ant

　　ANDROID_HOME;指向所安裝的Android SDK目錄，好比d:\androidsdk

　　對Path進行設置,分別將ruby,jdk,android sdk,ant加入到原有的path中,如：

　　c:\ruby\bin;c:\jdk15\bin;d:\ant\bin;d:\androidsdk\tools

　　其中，下載Ruby 1.9.1的Windows版本後，直接選擇安裝到指定目錄便可。

　　在完成上面的這些工做後，咱們接下來就經過PhoneGap框架的腳手架功能，快速生成一個android的原型程序。

經過PhoneGap生成基於Android的原型程序

　　1 進入PhoneGap-Android目錄，並進入MS-DOS方式，在命令行下，按以下格式執行該命令：

　　ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"

　　上述參數說明以下：

　　其中android_sdk_path指定了android sdk的安裝位置，好比：

　　d:/androidsdk,注意這裏不要寫成「\」,應該是「/」做爲分隔符。

　　Name：要生成的android應用的名字。

　　Package_name:生成的android應用中源代碼中的包名，注意必須至少有一層的包關係，即com.XXXX的形式。

　　WWW：這裏指應用中存放HTML,Javascipt,CSS的位置目錄名稱。

　　PATH:這裏指經過PhoneGap生成的項目原型工程的目錄位置，注意的是，該目錄位置不能指定爲eclipse的workspace工做空間內。

　　下面是一個例子：

　　ruby bin/droidgap 「d:/androidsdk」 HelloWorldGap com.phonegap www

　　「d:/HelloWorldGap」

　　運行上述命令後，會發如今D盤會生成一個HelloWolrdGap的工程目錄，phonegap已經爲咱們生成了項目的框架了。

　　將工程導入到ECLIPSE中

　　若是安裝了Android for eclipse的插件ADT後，咱們能夠將PhoneGap生成的工程導入到Eclipse中去。首先咱們打開Eclipse,新建一個Android Project，以下圖

其中輸入Project name的名稱爲HelloGapAndroid，其中在Create project from existing source中選擇上文中用PhoneGap生成的項目的目錄。以後在Eclipse中則會看到以下結構的

能夠看到其中assets下的www目錄存放了工程中須要用到的HTML、Javascript和CSS文件。此外，還要確認工程的lib目錄下面，存在phonegap.jar文件。

　　接下來咱們試着運行下這個工程，會在模擬器中看到以下效果：

　運行的結果是顯示了PhoneGap中默認顯示的index.html頁面，其中演示了其中的一些功能，你們能夠嘗試去試驗一下。

　　編寫HelloWorld程序

　　接下來，咱們來在此基礎上編寫HelloWorld程序。咱們切換到index.html中去，在代碼模式下，刪除原來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>

複製代碼javascript

能夠看到，這實際上是普通的HTML和Javascript代碼。首先在onload觸發的方法init中，經過Javascript的回調方法中調用了phonegap封裝好的事件

　　deviceready，這個事件含義是當設備在將其應用程序加載完畢後觸發的。在引入phonegap提供的API時，必須經過的方式引入進行調用。在這裏的回調函數showMessageBox中，就調用了phonegap封裝好的方法 navigator.notification.alert，這個方法其實是

　　顯示了一個帶文本的提示框，運行結果以下圖：

改進HelloWorld程序

　　接下來咱們改進下這個程序，實現的功能是咱們能夠在文本框裏輸入名字，而後點肯定按鈕後，彈出提示窗口顯示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="#" onclick="displayHello();">Say Hello</a>
</div>
</div>
</body>
</html>

複製代碼html

若是你懂得HTML和Javascript的話，上面的程序實在容易理解。其中咱們添加了一個名爲firstname的文本框，而且在按鈕的onclick事件中調用的displayHello()方法中經過document.getElementById的Javascript方法得到了用戶輸入的名字，而後一樣用navigator.notification.alert的方法輸出結果，輸入的界面和輸出的結果以下圖所示：

總結

　　經過PhoneGap這套開源框架對開發移動設備SDK的封裝，咱們從此在開發移動應用時，只須要調用PhoneGap封裝好的API，結合已有的Java、HTML、CSS和Javascript技術，就能夠很方便地進行開發了，更多的資料請查看PhoneGap的幫助文檔。