首頁 > 其他

跨平台開發：初探PhoneGap移動開發架構

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

隨著Google的Android手機和蘋果的iPhone手機的逐漸普及，越來越多開發人員加入到行動裝置 App開發的大軍當中。目前移動終端中的冠亞軍Android，應用是基於Java語言基礎上進行開發的；而蘋果公司的iPhone則是基於C語言開發的。如果開發人員編寫的應用需要同時在不同的行動裝置上啟動並執行話，則必須要掌握多種開發語言，這已經成為Team Dev的一大難題，在51CTO專訪國內著名移動軟體尚郵的首席架構師時也提到過跨平台軟體開發的困難。而為了進一步簡化行動裝置 App的編程，很多公司推出解決方案，Adobe推出的“AIR for Android”，使Flash為Android開發本地應用成為可能。而Nitobi公司推也出了一套開源的行動裝置 App解決方案PhoneGap。

PhoneGap是一款開源的手機應用開發平台，它僅僅只用HTML和JavaScript語言就可以製作出能在多個行動裝置上啟動並執行應用。PhoneGap將行動裝置本身提供的複雜的API進行了抽象和簡化，提供了一系列豐富的API供開發人員調用，只要你會HTML和Javascript或者Java語言，就可以利用PhoneGap提供的API去調用各種功能，PhoneGap就能讓你可以製作出在各種手機平台上啟動並執行應用，這對行動裝置 App開發人員來說無疑是個福音。 目前，PhoneGap已實現對iPhone/ipad、Android、Symbian,Palm、黑莓各版本絕大部分功能的支援,其中官方文檔中對其支援的詳細說明如所示：

在本文中，將以一個簡單的能在Android平台上啟動並執行HelloWorld的樣本，講解如何安裝PhoneGap的開發架構並配合Eclipse進行開發的過程。

基於Android SDK安裝PhoneGap架構

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

無論是開發基於哪種平台的行動裝置 App，首先要到PhoneGap的官方網站下載

PhoneGap包（）。目前最新的版本是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

◆JDK 1.5以上

◆Android 的Eclipse開發外掛程式ADT

◆Ruby 1.9.1，建議到官網直接下載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中,如：

 
    
  
  1. c:/ruby/bin;c:/jdk15/bin;d:/ant/bin;d:/androidsdk/tools  
    2. 
  
  2.  
    3.

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

在完成上面的這些工作後，我們接下來就通過PhoneGap架構的腳手架功能，快速產生一個android的原型程式。

 

通過PhoneGap產生基於Android的原型程式

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

 
    
  
  1. ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"  
    2. 
  
  2.  
    3.

上述參數說明如下：

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

d:/androidsdk,注意這裡不要寫成“/”,應該是“/”作為分隔字元。

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

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

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

PATH:這裡指通過PhoneGap產生的項目原型工程的目錄位置，注意的是，該目錄位置不能指定為eclipse的workspace工作空間內。

下面是一個例子：

 
    
  
  1. ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www  
    2. 
  
  2. “d:/HelloWorldGap”  
    3. 
  
  3.  
    4.

運行上述命令後，會發現在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產生的程式碼，寫入如下代碼：

 
    
  
  1. <!DOCTYPE HTML>    
    2. 
  
  2. <html>    
    3. 
  
  3.     <head>    
    4. 
  
  4.     <meta name="viewport" content="width=320; user-scalable=no" />      <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
    5. 
  
  5.     <title>PhoneGap Android App</title>    
    6. 
  
  6.              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
    7. 
  
  7.            <script type="text/javascript" charset="utf-8">    
    8. 
  
  8.                       var showMessageBox = function() {     
    9. 
  
  9.               navigator.notification.alert("Hello World of PhoneGap");     
    10. 
  
  10.                       }     
    11. 
  
  11.                         function init(){     
    12. 
  
  12.             document.addEventListener("deviceready", showMessageBox, true);                    
    13. 
  
  13.                       }     
    14. 
  
  14.   </script>    
    15. 
  
  15.   </head>    
    16. 
  
  16. <body onload="init();"  >    
    17. 
  
  17.   </body>    
    18. 
  
  18. </html>    
    19. 
  
  19.  
    20.

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

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

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

 

改進HelloWorld程式

接下來我們改進下這個程式，實現的功能是我們可以在文字框裡輸入名字，然後點確定按鈕後，彈出提示視窗顯示Hello+你輸入的名字。修改程式碼如下：

 
    
  
  1. <!DOCTYPE HTML>    
    2. 
  
  2.     
    3. 
  
  3. <html>    
    4. 
  
  4.     
    5. 
  
  5.   <head>    
    6. 
  
  6.     
    7. 
  
  7.     <meta name="viewport" content="width=320; user-scalable=no" />    
    8. 
  
  8.     
    9. 
  
  9.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
    10. 
  
  10.     
    11. 
  
  11.     <title>PhoneGap</title>    
    12. 
  
  12.     
    13. 
  
  13.               <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
    14. 
  
  14.     
    15. 
  
  15.               <script type="text/javascript" charset="utf-8">    
    16. 
  
  16.     
    17. 
  
  17.               var displayHello = function() {     
    18. 
  
  18.     
    19. 
  
  19.                         var name =      document.getElementById("firstname").value;     
    20. 
  
  20.     
    21. 
  
  21.                         navigator.notification.alert("name" + name);     
    22. 
  
  22.     
    23. 
  
  23.             }     
    24. 
  
  24.     
    25. 
  
  25.    </script>    
    26. 
  
  26.     
    27. 
  
  27.   </head>    
    28. 
  
  28.     
    29. 
  
  29.   <body onload="init();" id="bdy" >    
    30. 
  
  30.     
    31. 
  
  31.             <div id="txt">    
    32. 
  
  32.     
    33. 
  
  33.             <input   type="text" name="firstname" id="firstname" />    
    34. 
  
  34.     
    35. 
  
  35.             </div>    
    36. 
  
  36.     
    37. 
  
  37.             <div id ="btn">    
    38. 
  
  38.     
    39. 
  
  39.     <a href="#" class="btn" onclick="displayHello();">Say Hello</a>    
    40. 
  
  40.     
    41. 
  
  41.             </div>    
    42. 
  
  42.     
    43. 
  
  43.         </div>    
    44. 
  
  44.     
    45. 
  
  45.   </body>    
    46. 
  
  46.     
    47. 
  
  47. </html>   
    48. 
  
  48.    
    49.

如果你懂得HTML和Javascript的話，上面的程式實在容易理解。其中我們添加了一個名為firstname的文字框，並且在按鈕的onclick事件中調用的displayHello()方法中通過document.getElementById的Javascript方法獲得了使用者輸入的名字，然後同樣用navigator.notification.alert的方法輸出結果，輸入的介面和輸出的結果如所示：

總結

通過PhoneGap這套開源架構對開發行動裝置SDK的封裝，我們今後在開發行動裝置 App時，只需要調用PhoneGap封裝好的API，結合已有的Java、HTML、CSS和Javascript技術，就可以很方便地進行開發了，更多的資料請查看PhoneGap的協助文檔。

瞭解Android開發更多內容請看

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More