01.html5+phonegap跨平臺移動應用開發

 1、html5+PhoneGap基礎知識 （1）html5介紹

HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，如今仍處於發展階段，但大部分瀏覽器已經支持某些 HTML5 技術。HTML 5有兩大特色：首先，強化了 Web 網頁的表現性能。其次，追加了本地數據庫等 Web 應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它但願可以減小瀏覽器對於須要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，而且提供更多能有效加強網絡應用的標準集 開發中選擇html5理由： 一、兼容性，老版本的瀏覽器上也能夠運行（不是很靠譜） 二、實用性，簡化了標籤，細分了功能，增長了移動互聯網元素 三、革命性，HTML再也不是簡單的標籤語言，增長了API、渲染等 html5有哪些特色： 1.微數據與微格式等方面的支持 ， 2.本地存儲，離線應用 3.API調用，地圖，位置，LBS等 4.鏈接通信，後臺線程， 5.多媒體 ， 6.三維、圖形及特效， 7.CSS3 （2）PhoneGap介紹 1. PhoneGap是什麼

PhoneGap是一個用基於HTML，CSS和JavaScript的，建立移動跨平臺移動應用程序的快速開發框架。它使開發者可以利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——

包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap擁有豐富的插件，能夠以此擴展無限的功能。PhoneGap是免費的，可是它須要特定平臺提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等，也能夠和DW5.5配套開發。使用PhoneGap只比爲每一個平臺分別創建應用程序好一點點，由於雖然基本代碼是同樣的，可是你仍然須要爲每一個平臺分別編譯應用程序。 PhoneGap針對不一樣平臺的WebView作了擴展和封裝，使WebView這個組件變成可訪問設備本地API的強大瀏覽器，因此開發人員在PhoneGap框架下可經過JavaScript訪問設備本地API。 WebView是什麼（WebView組件實質是移動設備的內置瀏覽器 WebView這個內置瀏覽器特性是Web能被打包成本地客戶端的基礎，可方便的用HTML五、CSS3頁面佈局，這是移動Web技術的優點相對於原生開發）

2. PhoneGap的優點 (1)可跨平臺：PhoneGap是惟一的一個支持7個平臺的開源移動框架（PhoneGap包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap擁有豐富的插件，能夠以此擴展無限的功能，幾乎Native App能完成的功能他都能完成）。它的優點是無以倫比的：開發成本低——據估算，至多Native App的五分之一！ （2）易用性，基於標準的Web開發技術 (html + css +js) （3）提供硬件訪問控制（api） （4）可利用成熟javascript框架（JqueryMobile SenchaTouch） （5）方便的安裝和使用 3. PhoneGap的不足 (1) PhoneGap應用程序的運行是寄託於移動設備上各平臺的內置瀏覽器webkit的，受到webkit處理速度影響，以及各個平臺的硬件與軟件的性能制約，其程序運行的速度會比原生的程序稍微慢點，可是筆者認爲，這些問題在1-2年內都會解決，由於如今的硬件的發展速度太快了。 (2)還有一些底層的功能須要插件來實現好比（推送功能）

(3)平臺差別化不一樣，PhoneGap應用程序在全部平臺上運行界面看起來都同樣。即便這個應用程序與原生應用很相像，但對於習慣了iOS與 Android 平臺的用戶來講，會以爲不習慣，他們仍是會很快看出差別。 經過綜合比較PhoneGap的優勢與不足，咱們認爲，若是你想快速實現通常的移動WebApp或者普通的2D遊戲，那麼能夠採用PhoneGap技術。若是你想要實現須要大量CPU計算的應用或者3D遊戲，或者對用戶體驗及界面有極致的追求，考慮目前的硬件條件和開發成本，使用原生開發來實現比較適合。 4．PhoneGap前景 2011年10月4日Adobe宣佈收購了建立了HTML5 移動應用框架PhoneGap 和PhoneGap Build的新創公司Nitobi Software。這使得phonegap有了堅強的後盾，phonegap的發展前景也是一片光明。與此同時，PhoneGap的開源框架已經被累積下載60萬次，藉助PhoneGap平臺，已有數千應用程序創建在iOS，android以及其它操做系統之上。 2、Web App, Native APP,Hybird App介紹 （1）Web App 這個主要是採用統一的標準的HTML,JavaScript.CSS等web技術開發. 用戶無需下載，經過不一樣平臺的瀏覽器訪問來實現跨平臺，同時能夠經過瀏覽器支持充分使用HTML5特性，缺點是這些基於瀏覽器的應用沒法調用系統API來實現一些高級功能，也不適合高性能要求的場合. （2）Native APP 就是所謂的原生應用.指的是用平臺特定的開發語言所開發的應用.使用它們的優勢是能夠徹底利用系統的API和平臺特性，在性能上也是最好的。缺點是因爲開發技術不一樣，若是你要覆蓋多個平臺，則要針對每一個平臺獨立開發,無跨平臺特性. （3）Hybird App 則是爲了彌補如上二者開發模式的缺陷的產物.分別繼承雙方的優點.首先它讓爲數衆多的web開發人員能夠幾乎零成本的轉型成移動應用開發者；其次，相同的代碼只需針對不一樣平臺進行編譯就能實如今多平臺的分發，大大提升了多平臺開發的效率；而相較於web App，開發者能夠經過包裝好的接口，調用大部分經常使用的系統API。PhoneGap正是Hybird APP的表明開發框架

3、 爲麼要學習PhoneGap

 

一、移動互聯網軟件開發現狀 在多廠商的利益競爭下，當前的智能終端平臺呈現出了「百家爭鳴」的現象。當前的移動終端系統呈現出較爲零散的割據狀態，其中，Nokia 主推的 Symbian、Apple 的iOS、和 Google 的 Android，分別佔據了較大的市場份額。然而，因爲當前主流的移動平臺之間互不兼容，針對不一樣的移動平臺系統，當前並無能夠兼容的應用開發接口和語言；當前，使用 C/C++ 的 Symbian、使用 Object C 的iOS和使用 Java 的 Android 應用開發技術，幾乎是徹底沒法融合的。 二、移動互聯網軟件開發者的困擾 開發完Android應用，還得從新開發Ios應用，開發完Ios還得開發Windows Phone，一個應用不一樣平臺重複開發 1.從應用開發的角度來講，一樣的程序邏輯卻不得不在多個平臺上使用不一樣的語言和API 重複編碼。 2.從代碼維護的角度來講，針對同一個項目須要同時維護多份代碼，一旦程序邏輯發生變化，將致使大規模的代碼修改與迴歸測試。 3.從經濟角度來講，要同時開發和維護多個平臺的應用程序，將花費企業巨大的人力和時間成本。 三、phonegap的出現，爲何要學phonegap

爲了解決上述問題，跨平臺的移動應用開發技術逐漸地引發了開發者的關注。市面上也出現了不少跨平臺框架，然而筆者認爲比較好的還屬於PhoneGap 也是開發人員最多的 4、Html5 移動應用軟件開發框架JqueryMobile SenchaTouch介紹 1.JqueryMobile介紹

jQuery Mobile是jQuery在手機上和平板設備上的版本。jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫，並且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。此框架簡單易用。頁面開發主要使用標記，無需或僅需不多 JavaScript。 此框架簡單易用。頁面開發主要使用標記，無需或僅需不多 JavaScript。 2.SenchaTouch介紹 前不久基於JavaScript編寫的Ajax框架ExtJS,將現有的ExtJS整合JQTouch、Raphaël庫，推出適用於最前沿Touch Web的Sencha Touch框架，該框架是世界上第一個基於HTML5的Mobile App框架。同時，ExtJS改名爲Sencha，JQTouch的創始人David Kaneda，以及Raphaël的創始人也已加盟Sencha團隊 3.JqueryMobile SenchaTouch對比 你們能夠看看這篇文章，上面有詳細的說明

http://www.phonegap100.com/article-65-1.html jQuery Mobile JM 只是一個 UI 庫，依賴於 jQuery 和 jQuery UI 的 DOM 操做、Ajax 和其餘庫

o 爲了建立 UI 部件，你只須要編寫 HTML 便可，JM 爲了對這些 HTML 元素進行修飾

o 可方便的重用已有的 HTML 代碼

o 一些簡單的應用直接用 HTML 便可實現，無需 JavaScript

o JM 具備相對小的對象模型，能夠快速輕鬆學習，特別是他是一個 jQuery 的插件

o JM 對代碼沒有特定的要求，這多是很是靈活的，但維護難度也加大

o 易於和其餘框架進行集

o 比 Sencha Touch 支持更多的設備

o 不依賴某個特定的供應商

 

Sencha Touch

o 這是一個獨立的庫，包括 UI 部件、DOM 操做、Ajax 以及其餘

o 無需依賴其餘庫

o 採用以 JavaScript 爲核心的方法，基本上不須要寫 HTML

o 提供大的對象模型，提供更多的功能，可是學習週期很長

o 統一的編程代碼結構和要求，良好組織的代碼易於維護

o 提供內置的服務器和本地存儲的抽象層，可在關係數據基礎上輕鬆執行 CRUD 操做。

o 提供內置的工具用於建立 iOS 和 Android 本地運行的程序

o 比 jQuery Mobile 支持的設備要少

 

5、建立一個簡單的示例，打包成跨平臺的可安裝的移動應用

一．環境搭建簡單的示例 <!DOCTYPEhtml> <html> <head> <title>jQuery Mobile 應用程序</title> <metaname="viewport"content="width=device-width"/> <linkhref="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet"type="text/css"/> <scriptsrc="Js/jquery-1.6.4.js" type="text/javascript"></script> <scriptsrc="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <sectionid="page1"data-role="page"> <headerdata-role="header"><h1>jQuery Mobile</h1></header> <divdata-role="content"class="content"> <p>Hello World!</p> </div> <footerdata-role="footer"><h1>PhoneGap中文網</h1></footer> </section> </body> </html>