基于HTML5新特性和移動開發(fā)框架PhoneGap構(gòu)建本地Android應(yīng)用課件

1、基于HTML5新特性和移動開發(fā)框架PhoneGap構(gòu)建原生Android應(yīng)用 李凡2014-1-24內(nèi)容結(jié)構(gòu)HTML5話題展開的維度至少有以下幾個：新增結(jié)構(gòu)元素方向；Canvas實現(xiàn)2D繪制方向；Video和Audio方向；Web存儲方向；離線程序緩存方向；WebGL對HTML5的3D繪制支持方向；Websocket方向；Webkit內(nèi)核方向等。每一個方向都可以縱向展開。本PPT的展開思路是：HTML5的新增特性介紹-實例詳述Web存儲特性-實例詳述離線應(yīng)用開發(fā)-通過PhoneGap框架將Web應(yīng)用原生化復(fù)活的HTML超文本標(biāo)記語言（HTML）的開發(fā)到 1999 年 HTML 4 就停止了。萬

2、維網(wǎng)聯(lián)盟（W3C）把重點轉(zhuǎn)向?qū)?HTML 的底層語法從標(biāo)準(zhǔn)通用標(biāo)記語言（SGML）改為可擴展標(biāo)記語言（XML），以及可縮放向量圖型（SVG）、XForms 和 MathML 這些全新的標(biāo)記語言。瀏覽器廠商則把精力放到選項卡和富站點摘要（RSS）閱讀器這類瀏覽器特性上。Web設(shè)計人員開始學(xué)習(xí)使用異步 JavaScript + XML（Ajax），在現(xiàn)有的框架下通過層疊樣式表（CSS）和 JavaScript語言建立自己的應(yīng)用程序。在接下來的八年中，HTML本身沒有任何變化。2007年三家重要的瀏覽器廠商 Apple、Opera 和 Mozilla Foundation聯(lián)合成立了WHATWG,We

3、b Hypertext Application Technology Working Group來開發(fā)傳統(tǒng) HTML 的新版本。最近，W3C 也注意到了這些活動，也啟動了自己的新一代 HTML 項目，雙方的成員有很多是相同的。這兩個項目最終合并成HTML 5 工作組包括：AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, 以及數(shù)百個其他的供應(yīng)商。雖然很多細(xì)節(jié)還在爭論之中，但下一版本 HTML 的大體輪廓已經(jīng)清楚了。 復(fù)活的HTMLHTML的下一代版本通常稱為HTML5。HTML5=Web Applications1.0=集各種技

4、術(shù)（特別是規(guī)范）于一體，形成了一個囊括 HTML、JavaScript 和層疊樣式表（CSS）在內(nèi)的功能強大的 API。從某些方面看，HTML5 就是下一個 Java。在 20 世紀(jì) 19 年代后期，Java 語言大受歡迎，主要是因為其編寫一次，到處運行 的功能使開發(fā)人員免于具體選擇（或移植到）Windows、Mac 或 Linux。HTML5 允許您編寫一次，在任何（現(xiàn)代）瀏覽器中運行，因此您無需在 iOS、Android 和 Chrome 之間做出選擇。 但是HTML5不會取代Java。Java 技術(shù)為服務(wù)器端編程提供豐富的生態(tài)系統(tǒng)。HTML5中新增標(biāo)簽元素HTML5是未來的Web的一部分

5、。它的新元素會產(chǎn)生更干凈更簡單的代碼，讓頁面更容易理解。盡管目前并非所有瀏覽器都支持這些元素，隨著時間的推移，支持會逐漸完善。瀏覽器會忽略不認(rèn)識的HTML元素，這意味著老式瀏覽器的用戶仍然能夠閱讀 HTML5頁面，他們的瀏覽方式與以前一樣?，F(xiàn)代瀏覽器的用戶可以獲得更好的用戶體驗，但是沒有人會由于 HTML5新元素而妨礙瀏覽。新增元素標(biāo)識簡要說明結(jié)構(gòu)section這可以是書中的一章或一節(jié)header頁面上顯示的頁眉footer頁腳nav指向其他頁面的一組鏈接articleblog、雜志、文章匯編等中的一篇文章語義性的塊元素aside代表說明、提示、邊欄、引用、附加注釋等figure代表一個塊級圖

6、像，還可以包含說明dialog表示幾個人之間的對話。HTML 5 dt 元素可以表示講話者，HTML 5 dd 元素可以表示講話內(nèi)容語義性內(nèi)聯(lián)元素m表示文本被 “加上標(biāo)志”，但是不一定要強調(diào)?？梢园阉胂癯蓵型怀鲲@示的一節(jié)time可以幫助瀏覽器和其他程序識別出 HTML 頁面中的時間。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是，每個 time 元素都應(yīng)該有一個 datetime 屬性，其中包含更適合機器識別的時間值meter表示指定范圍內(nèi)的數(shù)字值。例如，可以用它表示薪水、投票百分比或考試分?jǐn)?shù)progress表示一個正在進(jìn)行的過程的狀態(tài)，就像圖形用戶界面（GUI）應(yīng)用程序中的進(jìn)度條內(nèi)嵌的媒體v

7、ideo 用來嵌入任意視頻格式對于以哪種格式和解碼器作為首選，仍然有爭議。audio 能夠播放聲音文件或者音頻流交互（HTML 5 也被稱為 Web Applications 1.0。為了實現(xiàn)這個目標(biāo)，增加了幾個為 Web 頁面提供交互體驗的新元素）details表示在默認(rèn)情況下可能不顯示的詳細(xì)信息?？蛇x的 legend 元素可以提供詳細(xì)信息的摘要。details 元素的用途之一是提供腳注和尾注datagrid提供一個網(wǎng)格控件?？梢杂盟@示樹、列表和表格，用戶和腳本可以更新這些界面元素menumenu 包含 command 元素，每個 command 元素引發(fā)一個操作command HTML5

8、亮點特性-視頻在個人電腦或者公司網(wǎng)站放置一個 Flash 視頻通常需要對 Adobe ActionScript和專有工具有一個很強的理解，用來編碼視頻和創(chuàng)建播放器控件。一個 Flash 對象的嵌入代碼已存在很多年了，但是像清單 所示的代碼，就算您研究很長時間，也不能讓它簡單多少。然而HTML5簡潔的實現(xiàn)了視頻的播放。 HTML5亮點特性-音頻直到現(xiàn)在，仍然不存在一項旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。今天，大多數(shù)音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5 規(guī)定了一種通過 audio 元素來包含音頻的標(biāo)準(zhǔn)方法。audio 元素能夠播放聲音文件或者音頻流。如

9、何工作如需在 HTML5 中播放音頻，一個示例：/tiy/t.asp?f=html5_audio_allHTML5亮點特性-Web 存儲HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage - 沒有時間限制的數(shù)據(jù)存儲sessionStorage - 針對一個 session 的數(shù)據(jù)存儲之前，這些存儲都是由 cookie 完成的。但是cookie不適合大量數(shù)據(jù)的存儲，因為它們由每個對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。在 HTML5 中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對

10、于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。localStorage 方法localStorage 方法存儲的數(shù)據(jù)沒有時間限制。如何創(chuàng)建和訪問 localStorage：/tiy/t.asp?f=html5_webstorage_local_pagecountHTML5亮點特性-Web 存儲sessionStorage 方法sessionStorage 方法針對一個 session 進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。如何創(chuàng)建并訪問一個 sessionStorage：/tiy/t.asp?f=h

11、tml5_webstorage_session_pagecount其他HTML5規(guī)范新特性Web workersWeb Workers 定義了一套API，能夠允許腳本運行于后臺，進(jìn)行類似于線程化的操作。Web 套接字Web Socket 定義了一套API, 允許網(wǎng)頁能夠使用Web Socket協(xié)議來和遠(yuǎn)程主機進(jìn)行雙工通信。WebGLWebGL是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染W(wǎng)eb SQL Databa

12、se提供給開發(fā)者一個簡單而強大的JavaScript數(shù)據(jù)庫API，可以在一個本地SQLite數(shù)據(jù)庫中持久保存數(shù)據(jù)。基于Web SQL Database構(gòu)建應(yīng)用對于 Web 應(yīng)用的存儲，通常使用Cookie，Cookie 用于彌補 HTTP協(xié)議的無狀態(tài)性，服務(wù)器可以使用 Cookie 中包含的信息來判斷 HTTP 傳輸中的狀態(tài)。但 Cookie 有自己固有的缺點：它的大小受限，大多數(shù)瀏覽器對 Cookie 大小限制為 4K；Cookie 機制可以在瀏覽器中被禁用；Cookie 需要在客戶端和服務(wù)器端來回地傳送，繁瑣且消耗帶寬；存在安全風(fēng)險，Cookie 是以明文存放，可能被惡意客戶修改。對于 H

13、TML5，也許很有用的就是它新推出的“Web Storage”（Web 存儲）API，它包括 localStorage 和 sessionStorage，對簡單的鍵值對（比如應(yīng)用程序設(shè)置）或簡單對象（如應(yīng)用程序狀態(tài)）進(jìn)行存儲，使用本地和會話存儲能夠很好地完成，對于存儲 少量的數(shù)據(jù)非常有用，但是對大量的結(jié)構(gòu)化數(shù)據(jù)進(jìn)行處理時，它就力所不及了，（瀏覽器的限制大概在2.5M左右）而這正是 HTML5 的“Web SQL Database” API 接口的應(yīng)用所在。基于 Web SQL Database 構(gòu)建應(yīng)用Web SQL Database API 實際上并不包含在 HTML5 規(guī)范之中。它是一個獨

14、立的規(guī)范，它引入了一套使用 SQL 操作客戶端數(shù)據(jù)庫的 API。但一般提到它，還是會說是HTML5的特性。最新版本的 Chrome，Safari 和 Opera 瀏覽器都支持 Web SQL Database。Web SQL Database的細(xì)則中提供給開發(fā)者一個簡單而強大的JavaScript數(shù)據(jù)庫API，使得可以在一個本地SQLite數(shù)據(jù)庫中持久保存數(shù)據(jù)?；?Web SQL Database 構(gòu)建應(yīng)用建立表格并插入數(shù)據(jù)db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique

15、, log);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (1, “TCL);tx.executeSql(INSERT INTO LOGS (id, log) VALUES (2, “TMer); msg = Log message created and row inserted.; document.querySelector(#status).innerHTML = msg; );通過CREATE語句可以在 mydb 數(shù)據(jù)庫中建立一個 LOGS 表格。并插入兩條記錄：TCL、Tmer?；?Web SQL Database 構(gòu)建應(yīng)用 D

16、ate: 2011.11.22 Page 2代碼清單：運行效果：基于 Web SQL Database 構(gòu)建應(yīng)用查詢數(shù)據(jù)和將查詢結(jié)果顯示如果要讀取已經(jīng)存在的記錄，我們使用一個回調(diào)函數(shù)捕獲結(jié)果。 db.transaction(function (tx) tx.executeSql(SELECT * FROM LOGS, , function (tx, results) var len = results.rows.length, i; msg = Found rows: + len + ; document.querySelector(#status).innerHTML += msg; for

17、 (i = 0; i len; i+) msg = + results.rows.item(i).log + ; document.querySelector(#status).innerHTML += msg; , null); );基于 Web SQL Database 構(gòu)建應(yīng)用代碼清單：運行效果：需要注意的是，如果不是絕對需要，不要使用 Web SQL Database，因為它會讓我們的代碼更加復(fù)雜（匿名內(nèi)部類的內(nèi)部函數(shù)，回調(diào)函數(shù)等等）對大多數(shù)情況下，本地存儲或會話存儲就能夠完成相應(yīng)的任務(wù)，尤其是你能夠保持對象狀態(tài)持久化的情況。使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用在移動應(yīng)用程序中

18、使用 Web 開發(fā)的趨勢逐漸增強。然而，間歇性網(wǎng)絡(luò)可用性對于使用 Web 技術(shù)作為云基礎(chǔ)架構(gòu)一部分是一個巨大障礙。傳統(tǒng)的 Web 應(yīng)用程序沒有網(wǎng)絡(luò)就無法工作。解決方案之一是使用 HTML5 標(biāo)準(zhǔn)的兩個特性：離線 Web 應(yīng)用程序客戶端數(shù)據(jù)存儲用戶可在移動設(shè)備上使用云功能，使用部署在本地數(shù)據(jù)庫上的應(yīng)用程序來工作，當(dāng)再次上線時與云的其他部分共享數(shù)據(jù)。使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用離線Web應(yīng)用的核心元素：使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用層疊樣式表 層疊樣式表（CSS）描述 HTML 頁面如何提交。對于這一階段擴展，只使用 HTML 元素的默認(rèn)提交行為。 對于移動設(shè)備，有各

19、種 JavaScript/CSS庫和框架來發(fā)布與 Web 應(yīng)用程序接近的用戶體驗（例如，用于 iPhone 的 iUi，跨平臺的JQueryMobile）數(shù)據(jù)庫 HTML5 標(biāo)準(zhǔn)引入本地數(shù)據(jù)庫存儲。瀏覽器提供嵌入式數(shù)據(jù)庫，即 SQLite，它可以通過處理 SQL查詢從JavaScript訪問。應(yīng)用程序模型的業(yè)務(wù)數(shù)據(jù)存儲在這里。清單 清單文件（Manifest）是離線 Web 應(yīng)用程序的強制性部署描述符組件。它只是簡單列舉需要加載的文件。 使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用離線工作原理：HTML5有一個特性叫Offline Application Cache（離線程序緩存），它的主要組

20、成部分是一個在Web服務(wù)器上托管的cache manifest file（緩存列表文件），當(dāng)用戶導(dǎo)航網(wǎng)絡(luò)程序時，瀏覽器會將所有需要展示的（HTML，CSS，JavaScript、圖片等）都下載下來并存儲到本地，下次用戶再訪問時，瀏覽器識別URL將文件從本地緩存中拿出來展示，而非從網(wǎng)絡(luò)直接下載數(shù)據(jù)。一個Manifest文件只是存放在Web服務(wù)器上的一個簡單文本文件其中包含了用戶設(shè)備為了實現(xiàn)必要功能必須下載保存的文件列表。使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用下一步，在demo.manifest中添加如下幾行：CACHE MANIFESTIndex.htmlLogo.jpgScripts/d

21、emo.jsStyles/screen.cssManifest文件創(chuàng)建之后，在index.html文件中的html標(biāo)簽加入manifest屬性來將創(chuàng)建好的文件關(guān)聯(lián)起來：離線程序緩存已經(jīng)進(jìn)入工作狀態(tài)，用戶瀏覽/index.html時，頁面和相關(guān)資源會正常的通過網(wǎng)絡(luò)加載，而在后臺，所有在manifest中列出的文件就會被下載到本地，一旦下載完成，用戶刷新界面，再次訪問的就是本地文件。以此實現(xiàn)斷開網(wǎng)絡(luò)連接繼續(xù)訪問網(wǎng)絡(luò)應(yīng)用。使用 HTML5 創(chuàng)建移動離線 Web 應(yīng)用當(dāng)網(wǎng)絡(luò)程序作了修改，用戶如何得到更新？當(dāng)用戶可以通過Internet訪問程序URL地址時，瀏覽器會檢查網(wǎng)站端的manifest文件，看其

22、是否和本地版本對應(yīng)。如果遠(yuǎn)程的版本已經(jīng)有新的改動，瀏覽器會在后臺下載所有manifest中列出的文件并將其存放在一個臨時緩存中。對本地manifest和遠(yuǎn)程manifest的比較是對文件內(nèi)容逐個字節(jié)的比較（包括注釋和空白行）。如果在下載過程中發(fā)生了錯誤，被下載到臨時緩存中的部分會被自動丟棄，之前的版本仍然起作用。如果下載成功，下次啟動程序時，用戶會使用新的版本?；?PhoneGap 框架的 Mobile 應(yīng)用 Date: 2011.11.22 Page 2網(wǎng)絡(luò)應(yīng)用程序與原生應(yīng)用程序的對比什么是網(wǎng)絡(luò)應(yīng)用程序一個針對智能手機優(yōu)化過的Web站點用戶界面是用網(wǎng)絡(luò)標(biāo)準(zhǔn)技術(shù)建立的能夠通過一個URL訪問到

23、不需要安裝到手機不從Android AppStore里下載也不是用Java編寫的。什么是原生應(yīng)用程序程序被安裝在Android手機上能夠使用手機硬件功能（揚聲器、攝像頭、加速度傳感器）用Java編寫的從AppStore中下載基于 PhoneGap 框架的 Mobile 應(yīng)用不同的應(yīng)用程序針對不同的需求，根據(jù)需求場景考慮采用哪種方式實現(xiàn)。優(yōu)勢劣勢原生應(yīng)用數(shù)百萬的付費用戶點擊既得；程序可以使用硬件所有新奇功能應(yīng)用程序只能在Android手機上運行；必須用Java開發(fā)；開發(fā)周期長（開發(fā)、編譯、部署、迭代）網(wǎng)絡(luò)應(yīng)用使用現(xiàn)有的Web設(shè)計和開發(fā)技術(shù)；應(yīng)用程序運行在任何有Web瀏覽器的設(shè)備上；可以實時修復(fù)B

24、ug；開發(fā)周期短應(yīng)用程序無法使用手機硬件的所有功能；復(fù)雜用戶界面效果難以實現(xiàn)；若收費，需推出支付系統(tǒng)HTML5的新特性以及PhoneGap框架能夠使得網(wǎng)絡(luò)應(yīng)用“離線”使用，把網(wǎng)絡(luò)應(yīng)用程序制作包裝成Android平臺原生應(yīng)用。網(wǎng)絡(luò)應(yīng)用和原生應(yīng)用優(yōu)劣對比基于 PhoneGap 框架的 Mobile 應(yīng)用至此，網(wǎng)絡(luò)程序想在已經(jīng)可以做很多原生應(yīng)用做的事情了，例如本地存儲數(shù)據(jù)、在離線狀態(tài)下工作，然而，它仍然有兩件事情沒辦法做：沒有辦法訪問設(shè)備特性和硬件（如地理位置信息、加速度傳感器、聲音和震動）沒有辦法將應(yīng)用提交到Android應(yīng)用程序市場上。通過PhoneGap框架，可以實現(xiàn)上述目標(biāo)。PhoneGap

25、 是一款基于 HTML5 的開源的手機應(yīng)用開發(fā)框架，它允許用戶僅僅通過 Web（HTML、JavaScript）技術(shù)就可以訪問移動設(shè)備的本地應(yīng)用、API 以及應(yīng)用程序庫等。PhoneGap 提供了一系列豐富的 API 供開發(fā)者調(diào)用，這些 API 抽象和簡化了移動設(shè)備本身提供的復(fù)雜的 API，使開發(fā)新的手機應(yīng)用和調(diào)用已有的手機功能更簡單方便。另外，PhoneGap 真正實現(xiàn)了“written once, run everywhere”, 并且它采用了 W3C 標(biāo)準(zhǔn)，能和 jQuery Mobile 結(jié)合在一起使用?；?PhoneGap 框架的 Mobile 應(yīng)用PhoneGap 特性目前，Ph

26、oneGap 已實現(xiàn)對 iPhone/iPad、Android、Symbian、Palm、黑莓各版本絕大部分功能的支持?；?PhoneGap 框架的 Mobile 應(yīng)用PhoneGap API 簡介Accelerometer Accelerometer 是一個設(shè)備移動感應(yīng)器，它能夠檢測到設(shè)備相對于原來位置的移動，并用三維坐標(biāo) x，y，z 表示。該 API 提供三個方法：accelerometer.getCurrentAcceleration：得到用 x,y,z 值表示的當(dāng)前設(shè)備的移動加速度。accelerometer.watchAcceleration：以特定的時間間隔得到用 x,y,z 值

27、表示的當(dāng)前設(shè)備的移動加速度。accelerometer.clearWatch：取消對設(shè)備移動加速度的監(jiān)控。Storage Storage 提供了訪問移動設(shè)備的存儲設(shè)備的 API?；?PhoneGap 框架的 Mobile 應(yīng)用PhoneGap API 簡介Camera Camera 提供了訪問和操作移動設(shè)備的默認(rèn)攝像頭的 API，包括用攝像頭動態(tài)攝取圖片或從移動設(shè)備的相冊中獲取圖片。camera.getPicture(): 該方法通過配置不同的參數(shù)實現(xiàn)動態(tài)用攝像頭獲取圖片或從已有的相冊中獲取圖片，返回參數(shù)也可以根據(jù)設(shè)置不同的參數(shù)返回圖片的二進(jìn)制數(shù)據(jù)或者圖片的路徑。Compass Compas

28、s 提供了獲取移動設(shè)備指向的 API。compass.getCurrentHeading： 獲取當(dāng)前移動設(shè)備的指向。compass.watchHeading：以特定的時間間隔獲取當(dāng)前設(shè)備的指向。compass.clearWatch：取消對當(dāng)前設(shè)備指向的監(jiān)控?；?PhoneGap 框架的 Mobile 應(yīng)用PhoneGap API 簡介Contacts Contacts 提供了訪問和操作移動設(shè)備通訊錄數(shù)據(jù)庫的 API，包括獲取聯(lián)系人列表（支持過濾條件），增加，刪除，編輯通訊錄聯(lián)系人等。contacts.create： 創(chuàng)建一個新的聯(lián)系人。contacts.find： 查找聯(lián)系人。Device

29、Device 提供了訪問當(dāng)前移動設(shè)備參數(shù)的 API，包括設(shè)備名、設(shè)備系統(tǒng)版本、設(shè)備平臺等。File File 提供了訪問和操作移動設(shè)備文件系統(tǒng)的 API，其中 FileReader 和 FileWriter 提供了對設(shè)備文件的讀寫 API?；?PhoneGap 框架的 Mobile 應(yīng)用PhoneGap API 簡介GeoLocation GeoLocation 提供了訪問移動設(shè)備的 GPS 感應(yīng)器的 API。Media Media 提供了訪問和操作移動設(shè)備語音文件的 API，包括播放、停止、錄音等。NetWork Network 提供了訪問移動設(shè)備移動網(wǎng)絡(luò)和無線網(wǎng)絡(luò)設(shè)置的 API。Noti

30、fication Notification 提供了一組 API 來模擬移動設(shè)備的一些可視（對話框）、可聽（提示音）、可感覺（震動）的功能。notification.alert: 彈出警告或者對話框。notification.confirm：彈出確認(rèn)框。notification.beep：播放設(shè)備的提示音。notification.vibrate：使設(shè)備震動一段時間?；?PhoneGap 框架的 Mobile 應(yīng)用搭建 PhoneGap 開發(fā)化境PhoneGap 支持開發(fā)適用于 iPhone、Android、Palm 等不同平臺的應(yīng)用，對不同的平臺開發(fā)環(huán)境也有所不同，以 Android 為例搭

31、建開發(fā)環(huán)境和創(chuàng)建應(yīng)用。在搭建環(huán)境之前，需要先下載一些必須的工具和 SDK，并進(jìn)行安裝。Eclipse3.4+。Android SDK。ADT Plugin for Eclipse。PhoneGap。安裝好 Eclipse、Android SDK 和 ADT 插件之后，還需要做一些簡單的配置才可以創(chuàng)建項目。例如Android SDK 的路徑、Eclipse 里配置 AVD等。基于 PhoneGap 框架的 Mobile 應(yīng)用創(chuàng)建一個簡單的 PhoneGap 應(yīng)用Step1，創(chuàng)建Android工程；Step2，將phonegap-1.2.0.js腳本拷貝至工程assets/www目錄基于 Phon

32、eGap 框架的 Mobile 應(yīng)用Step3，將phonegap-1.2.0.jar拷貝至工程libs目錄基于 PhoneGap 框架的 Mobile 應(yīng)用Step4，拷貝xml到工程目錄res下基于 PhoneGap 框架的 Mobile 應(yīng)用Step5，修改主Activity源文件。（見注釋）基于 PhoneGap 框架的 Mobile 應(yīng)用Step6，修改manifest文件，見注釋。Step7，創(chuàng)建html文件，用來顯示主界面。基于 PhoneGap 框架的 Mobile 應(yīng)用Step8，編譯、運行基于 PhoneGap 框架的 Mobile 應(yīng)用PhoneGap工作原理PhoneG

33、ap UI框架在移動應(yīng)用開發(fā)中的位置下圖清楚的描述了PhoneGap在移動應(yīng)用開發(fā)中的位置，原有的基于WEB技術(shù)開發(fā)的應(yīng)用是不能直接運行在移動設(shè)備上、不能訪問設(shè)備硬件資源，他們之間有Gap。PhoneGap就是用于填補兩者之間的“差距”。通過PhoneGap，可以將WEB應(yīng)用生成本地安裝包（例如Android APK），直接安裝在目標(biāo)設(shè)備或在AppStore中發(fā)布。基于 PhoneGap 框架的 Mobile 應(yīng)用PhoneGap工作原理PhoneGap運行機制（以Android為例）PhoneGap對各個移動平臺的SDK進(jìn)行了再次封裝。以Android平臺為例，PhoneGap的封裝和改造的基類是WebView。所以，基于PhoneGap開發(fā)必須有配套的SDK支持?；?PhoneGap 框架的 Mobile 應(yīng)用基于 PhoneGap 框