[轉]初探 PhoneGap 框架在 Android 上的表現

原文地址：http://topmanopensource.iteye.com/blog/1486929

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

phonegap的優勢:

1.兼容性,徹底作到了written once,run everywhere.
2.標準化.phonegap使用W3C標準,可用html5+css3+JqueryMobile快速開發各平臺的app
3.開發成本低
4.徹底自由免費.phonegap採用MIT,BSD許可證.

phonegap的缺點:

1.性能有待增強,運行速度慢,UI反應延時
2.沒有中文文檔,例子較少

 

爲何須要PhoneGap?

移動技術的發展對於開發人員來講是個悲劇，開發應用需顧及到不一樣平臺的框架和開發語言，如iPhone、Android、Windows Mobile等。

PhoneGap基於標準的Web技術，在Web應用和設備之間搭建一個通訊的橋樑，封裝移動設備的平臺差別，統一使用JavaScript接口訪問設備本地API，提供跨平臺解決方案。

PhoneGap是一個標準的開源框架，用PhoneGap開發移動應用是免費的，不管是商業或是開源。

PhoneGap能作什麼?

一、基於Web技術開發移動設備客戶端應用

用您熟悉的JavaScript、HTML技術，或者結合移動Web UI框架jQuery Mobile、Sencha Touch 開發跨平臺移動客戶端。

二、用PhoneGap訪問設備本地API

提供跨平臺設備訪問能力，如下列出訪問設備部分功能，本系列專題在之後文章中詳解使用方法。

ACCELEROMETER(重力感應)

CAMERA(攝像機)

COMPASS(指南針)

CONTACTS(通信錄)

FILE(文件)

GEOLOCATION(地理定位)

MEDIA(媒體)

NETWORK(網絡)

NOTIFICATION (通知)

STORAGE(Sqlite數據庫存儲)

三、發佈您的程序到不一樣移動平臺

Phongap Build 提供在線打包Web應用到各移動平臺客戶端的能力，下一篇文章實例介紹將本社區開源項目Sencha Touch 2 DEMO打包成Android平臺APK文件的方法。下圖是PhoneGap Build在線打包完成，而且提供下載的界面：

PhoneGap如何工做?

PhoneGap架構擁有強大的跨平臺訪問設備能力，可是其工做原理並不神祕，下面以iPhone和Android平臺爲例進行分析。

iPhone和Android平臺共同點是都有內置的WebView組件，其具有兩個特性：

一、WebView組件實質是移動設備的內置瀏覽器

WebView這個內置瀏覽器特性是Web能被打包成本地客戶端的基礎，可方便的用HTML五、CSS3頁面佈局，這是移動Web技術的優點相對於原生開發。

二、WebView提供Web和設備本地API雙向通訊的能力

PhoneGap針對不一樣平臺的WebView作了擴展和封裝，使WebView這個組件變成可訪問設備本地API的強大瀏覽器，因此開發人員在PhoneGap框架下可經過JavaScript訪問設備本地API。

明白以上兩個特性，參照下面PhoneGap與設備本地API通訊圖，一個成熟的PhoneGap技術客戶端運行情況以下：

應用運行在WebView組件上 —》 經過PhoneGap在各平臺的擴展 —》 最終訪問設備本地資源

 

 

 

 

 

 

phonegap優缺點評估

        日前，phonegap框架熱度如火如荼。一項技術固然會有其優缺點，咱們是選用phonegap仍是選擇Native APP，要先分析二者的利弊，再根據具體應用選擇。

    phonegap優勢：

1.      可跨平臺。

phonegap做爲跨平臺框架，其實並別writtenonce, run everywhere，各移動平臺的差別仍是較大，phonegap框架幫咱們解決了差別性，javascript與平臺系統的鏈接由phonegap框架完成。成爲鏈接移動終端的適配器，或者說中間件。它的原理以下圖：

 

PhoneGap經過調用JavaSCript 調用API庫實現和各個平臺的SDK進行無差異的交互. 以達到調用不一樣平臺手機上攝像頭，文件系統,重力感應.GPS定位等功能。

 

2.       易用性

        phonegap開發人員無需直接操做平臺資源。對平臺資源的操做完成由phonegap框架完成。開發人員只須要用 javascript調用phonegap  API就能夠完成對平臺資源操做。因爲phonegap框架限制，對平臺資源操做是有必定限制的。

        phonegap開發人員能夠從web開發人員轉入，目前來講web開發人員較多，成本也較低，轉入phonegap開發後，能夠下降移動應用產品的開發成本。這樣，移動應用數量將直線提高。

3.       提供硬件訪問控制

      比起傳統的Web程序，PhoneGap提供了一些列的JS 的類，能夠直接訪問硬件。好比加速，相機，指南針，GPS，文件訪問等，可讓你用JS方便地調用系統的硬件。以彌補傳統Web程序的一塊錯誤。

4.       可利用成熟javascript框架

        web的發展，誕生了許多javascript框架。著名的有Ext js、jQuery。隨着移動應用的需求愈來愈大，jQuery出現了jQuery mobile版本。它的體積小，爲移動應用量身定製。使用javascript框架也下降了開發難度，使得移動應用更美觀。

5.       方便的安裝和使用

        PhoneGap的架構很複雜，但對於大多數開發者來講，並不須要瞭解phonegap內部，只用很簡單的配置就能夠搭好環境。只用專一寫好本身的Web頁面，拷貝進去就能夠了。

phonegap不足之處

1.       運行速度慢

        PhoneGap集成多了個平臺.程序的載入和UI界面的反應都比原生的程序慢，UI反應延時——這是個致命傷 .它實際上仍是在展現Web頁面，因此載入、頁面刷新等確定是須要必定時間的。 這在用戶體驗上來講PhoneGAp依然沒法替代原生應用程序。

        另外，html、javascript、css都運行在各平臺內置瀏覽器webkit之上，受到webkit處理速度影響。目前來講運行速度比較慢，性能較差。

2.       不適合部分程序

        若是你的程序須要3D功能，或者對界面刷新有較高的要求，好比相似於遊戲的程序如今來講還只是用原生的語言會比較好。PhoneGap支持API還有待在各個平臺逐步完善

3.       調用平臺資源差

     phonegap應用程序對平臺資源的使用依賴於phonegap框架自己，因爲phonegap是第三方框架，作不到100%調用平臺資源，只有依靠phonegap的升級知足調用平臺資源的需求。

        好比說，如今版本未能支持視頻解碼與播放等

4.       內存消耗大

        有測試代表，用phonegap於android java開發同一個應用。運行phonegap應用內存消耗遠大於原生態androidjava應用。對於頻繁操做，釋放內存較慢，從而致使內存消耗量飆升。

5.       調試難度大

        目前phonegap能夠在控制檯輸出簡單的JS調試日誌，可是並不方便。調試js只能選擇firefox  firebug調試。

Android應用類型	Html5 (phonegap)	Android java
功能實現	Html + jQuery基礎庫	ListView組件
文件大小	159KB	23KB（只用了系統的原生界面）
內存佔用	45.37MB(RSS)	27.02MB(RSS)
數據通訊	Ajax	Apache http Java功能包
啓動速度	打開相同訂閱源2.7秒	打開相同訂閱源2.3秒
操做響應速度	正常操做速度流暢，頻繁操做響應會變慢	操做速度流暢
穩定性	在Monkey測試注入大約4萬個事件時，整個應用已經處於空白無響應狀態。有鏈接超時狀況發生。手動頻繁操做會引發，響應速度變慢，webkit的WebView不能很好釋放內存，甚至會引發應用的crash。	能較好處理Activity切換延時等待。運行較爲流暢。Monkey測試時書籤列表頁切換時有時候會出現黑色背景，而後再載入列表，比正常速度稍慢。可以比較好的釋放內存，沒有出現過應用crash的狀況。
資源佔用	對於頻繁操做時，內存釋放不夠理想，致使內存佔用上升。	內存佔用相對比較穩定。
開發成本	運用html + css + javascript開發，適合前端人員開發。因爲webkit在不一樣的終端機發行版本不同，因此須要針對不一樣的機型進行適配。同時對於不一樣屏幕大小在適配上也只能經過Javascript進行控制實現。	適合有Java開發經驗的程序員，能夠充分利用Android提供的組件進行開發。可是開發學習成本較高。
開發難度	目前phonegap只使用一個WebView，開發時須要使用OPOA的模式，對代碼的組織方式及開發方式有較高要求。同時介於手機的資源有限，對如何管理和分配內存提出了要求。目前phonegap能夠在控制檯輸出簡單的JS調試日誌，可是並不方便。	須要有Java開發經驗，同時對Android開發體系有較深刻的瞭解。
多人協做	OPOA模式並不利於多人協做並行開發，只能經過基礎的javascript的設計模式來解決多人協做的問題。	比較方便支持多人協做並行開發。
其它問題	1.內存優化：webapp由於是基於瀏覽器的，而瀏覽器自身是進行了相應的優化的，因此在圖片顯示上很不錯。      原生app若是在一頁中顯示比較多的圖片的時候，必須比較細緻完善的進行內存優化工做，不然極易出現由於圖片資源過大而引發的崩潰問題。 2.圖片縮放裁切 webapp通常狀況下經過js和css來進行縮放裁切。在進行圖片動態縮放的時候，頁面顯示狀況不是很正常（抖動，跳躍）。最好的辦法是後端服務器對圖片處理後再發送給手機端。 原生app能夠直接經過java來對圖片進行處理。 3.佈局 原生app能夠利用android提供的特殊技術方案，來自動適應多種分辨率的屏幕。如9png和 多drawable目錄。 至關簡單方面。 可是在交互方面，原生app的開發量會比較大。 webapp就比較杯具一些了，須要開發者比較多的關注。 能夠經過js來動態的獲取屏幕尺寸進行資源調整和加載（開發幾套不一樣的ui，而後根據分辨率js動態加載），這個會花費比較多的時間。 4.調試 webapp js調試不太方便，特別是調用外部應用的時候。若是是本應用內部，能夠經過firebug進行調試。

 

 

Phonegap 總述

         phonegap的目標就是快速開發移動應用實現written once, run everywhere跨平臺。phonegap必定程度上下降了移動開發的門檻，特別是ios開發。傳統web開發人員不須要學習object-c、 android java就能夠開發普通的移動應用。

        相似於phonegap這樣的框架的出現，並不能取代Native APP原生態應用。phonegap有它的不足之處，運行速度較慢、操做平臺資源不靈活、操做移動設備不方便，這些都依賴者phonegap框架自己的升級與發展。不過值得高興的是adobe公司收購了phonegap開發商，增長了phonegap的後臺實力。

        在用戶體驗方面。phonegap運行速度相對慢，頁面動畫切換有點卡，這影響着用戶體驗。這些緣由可否解決，這取結於移動平臺的webkit的性能優化和對html、css、javascript的支持程度。

        在硬件支持與內存方面。一個應用用兩種方式實現，native app消耗內存較低，要求硬件支持較低。phonegap消耗內存較大，內存釋放效率較低，於是要求的硬件支持相比之下就高了。

 

下面筆者將採用phonegap+jquerymobile開發一個phonegap的Helloworld.

項目結構以下：

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

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

第四步: 將剛剛解壓出來的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複製到www文件夾.

第五步:複製phonegap/android下的phonegap.0.9.5.jar到libs文件夾,並在項目的屬性中將其加入到項目

第六步:修改默認的Activity文件main.java

package com.easyway.phonegap;

import android.os.Bundle;

import com.phonegap.DroidGap;
/**
 * 備註繼承自PhoneGap的DroidGap
 *
 * @Title:
 * @Description: 實現TODO
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2012-4-15
 * @author  longgangbai
 * @version 1.0
 */
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文件.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>HelloWorld</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <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!');
                    }
                );
            });
            /*
            $(document).ready(function(){
                //爲按鈕ClickMe添加點擊事件
                $.ajax({
                    type:"POST",
                    url: "http://127.0.0.1/test/",
                    dataType:'JSON',
                    beforeSend:function(){
                    },
                    success: function(){
                        $('#test1').text = "json";
                    }
                });
            });
            */
        </script>
    </head>

    <body>
        <div data-theme="b" data-role="page" id="main">
            <div data-role="header" >
                <h1>
                    HelloWorld
                </h1>
            </div>
            <!-- /header -->

            <div data-role="content" data-transition="pop">
                <p>
                    這是我第一個PhoneGap+JqueryMobile結合的android程序
                </p>
                <p>
                    <a href="#" id="ClickMe" data-role="button" data-inline="true" class="Bsimhei">點我</a>
                </p>

                <p>
                    <a href="#" id="getInfo" data-role="button" data-theme="b" data-inline="true" class="Bsimhei">獲取信息</a>
                </p>
            </div>
            <!-- /content -->

            <div data-role="footer">
                <h4>
                    這個是頁腳
                </h4>
            </div>
            <!-- /header -->
        </div>
    </body>
</html>

 

第七步:Run As Android Application

運行效果圖以下

OK,至此咱們第一個phonegap+jquerymobile的android程序已經完成.在模擬器中運行性能不好,真機運行的延時是能夠接受的.

 

 

注：目前PhoneGap 0.9.3用Android 2.3以上版本會出錯，因此Build Target請選 Android 2.2如下的版本。

◆在新建項目的根目錄下，建立兩個目錄

 /libs

 /assets/www

◆解壓PhoneGap文件夾，複製phonegap.js文件到/assets/www 目錄下，複製phonegap.jar文件到libs目錄下

◆須要對Eclipse下項目的App.java文件(src文件夾內)進行一些配置(如圖所示)

修改類的繼承 將Activity 修改成 DroidGap

將setContentView() 這一行修改成super.loadUrl("file:///android_asset/www/index.html");

添加 import com.phonegap.*;

有可能在這裏會遇到一個錯誤，顯示Eclipse找不到phonegap-0.9.2.jar ，右鍵點擊/libs文件夾，Build Paths(構建路徑)/ > Configure Build Paths(配置構建路徑) 在library(庫)欄向工程中添加phonegap-0.9.4.jar ，可能須要按一次F5刷新。