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

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

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

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

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

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

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

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

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

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

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

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

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

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

14、立的規(guī)范，它引入了一套使用 SQL 操作客戶端數(shù)據(jù)庫(kù)的 API。但一般提到它，還是會(huì)說(shuō)是HTML5的特性。最新版本的 Chrome，Safari 和 Opera 瀏覽器都支持 Web SQL Database。Web SQL Database的細(xì)則中提供給開發(fā)者一個(gè)簡(jiǎn)單而強(qiáng)大的JavaScript數(shù)據(jù)庫(kù)API，使得可以在一個(gè)本地SQLite數(shù)據(jù)庫(kù)中持久保存數(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; );通過(guò)CREATE語(yǔ)句可以在 mydb 數(shù)據(jù)庫(kù)中建立一個(gè) LOGS 表格。并插入兩條記錄：TCL、Tmer。基于 Web SQL Database 構(gòu)建應(yīng)用 D

16、ate: 2011.11.22 Page 2代碼清單：運(yùn)行效果：基于 Web SQL Database 構(gòu)建應(yīng)用查詢數(shù)據(jù)和將查詢結(jié)果顯示如果要讀取已經(jīng)存在的記錄，我們使用一個(gè)回調(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)用代碼清單：運(yùn)行效果：需要注意的是，如果不是絕對(duì)需要，不要使用 Web SQL Database，因?yàn)樗鼤?huì)讓我們的代碼更加復(fù)雜（匿名內(nèi)部類的內(nèi)部函數(shù)，回調(diào)函數(shù)等等）對(duì)大多數(shù)情況下，本地存儲(chǔ)或會(huì)話存儲(chǔ)就能夠完成相應(yīng)的任務(wù)，尤其是你能夠保持對(duì)象狀態(tài)持久化的情況。使用 HTML5 創(chuàng)建移動(dòng)離線 Web 應(yīng)用在移動(dòng)應(yīng)用程序中

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

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

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

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

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

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

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

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

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

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

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

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

30、fication Notification 提供了一組 API 來(lái)模擬移動(dòng)設(shè)備的一些可視（對(duì)話框）、可聽（提示音）、可感覺（震動(dòng)）的功能。notification.alert: 彈出警告或者對(duì)話框。notification.confirm：彈出確認(rèn)框。notification.beep：播放設(shè)備的提示音。notification.vibrate：使設(shè)備震動(dòng)一段時(shí)間。基于 PhoneGap 框架的 Mobile 應(yīng)用搭建 PhoneGap 開發(fā)化境PhoneGap 支持開發(fā)適用于 iPhone、Android、Palm 等不同平臺(tái)的應(yīng)用，對(duì)不同的平臺(tái)開發(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 插件之后，還需要做一些簡(jiǎn)單的配置才可以創(chuàng)建項(xiàng)目。例如Android SDK 的路徑、Eclipse 里配置 AVD等?；?PhoneGap 框架的 Mobile 應(yīng)用創(chuàng)建一個(gè)簡(jiǎn)單的 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文件，用來(lái)顯示主界面。基于 PhoneGap 框架的 Mobile 應(yīng)用Step8，編譯、運(yùn)行基于 PhoneGap 框架的 Mobile 應(yīng)用PhoneGap工作原理PhoneG

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