HybridApp開發(fā)基礎和全面介紹

1、Hybrid App開發(fā)基礎和全面介紹目 錄17.1 Hybrid App開發(fā)介紹17.2 HTML517.3 Sencha Touch17.1 Hybrid App開發(fā)介紹17.1.1 移動開發(fā)類型 App，通過瀏覽器訪問；Native App，安裝到移動設備；Hybrid App，它雖然看上去是一個Native App, 安裝到移動設備上，但只有一個WebView，里面訪問的是一個Web App。17.1.2 Native App Native App是一種基于智能手機本地操作系統(tǒng)如IOS、Android、WP并使用原生程式編寫運行的第三方應用程序。 Native App因為位于平臺層上方

2、，向下訪問和兼容的能力會比較好一些，可以支持在線或離線，消息推送或本地資源訪問，攝像撥號功能的調取。但是由于設備碎片化，App的開發(fā)成本要高很多，維持多個版本的更新升級比較麻煩，用戶的安裝門檻也比較高。但是比較樂觀的是，App store培養(yǎng)了一種比較好的用戶付費模式，所以在Apple的生態(tài)圈里，開發(fā)者的盈利模式是一種明朗狀態(tài)，其他market也在往這條路上靠攏。（1）Native App優(yōu)勢提供最佳的用戶體驗，最優(yōu)質的用戶界面，最華麗的交互針對不同平臺提供不同體驗可節(jié)省帶寬成本可訪問本地資源盈利模式明朗（2）Native App劣勢移植到不同平臺上比較麻煩維持多個版本的成本比較高需要通過st

3、ore或market的確認盈利需要與第三方分成原生開發(fā)模式應用商店安裝包格式開發(fā)工具開發(fā)包語言平臺Android Market.sdkEclipseAndroid SDKJavaAndroidApp Store.ipaxCodeios SDKObjective-CiosWP Market.xapVisual StudioSilverlight/Metro.Net FrameworkWindows Phone原生模式原生開發(fā)模式的優(yōu)劣APP17.1.2 Web App Web App是指基于Web的系統(tǒng)和應用，其作用是向廣大的最終用戶發(fā)布一組復雜的內容和功能。 移動Web在桌面Web的基礎上添加

4、了新的MIME類型、標記語言、文檔格式和最佳實踐，為小尺寸屏幕提供優(yōu)化的Web內容，并可解決移動設備上的資源限制、Web瀏覽器可用性差 等問題。 移動端Web App和WAP有什么不同？ 最直接的區(qū)別就是功能層面。WAP更側重使用網頁技術在移動端做展示，包括文字、媒體文件等。而Web App更側重“功能”，是使用網頁技術實現的App?？偟膩碚f，Web App就是運行于網絡和標準瀏覽器上，基于網頁技術開發(fā)實現特定功能的應用。Web App的優(yōu)點： 使用W3C標準的HTML語言開發(fā)，能夠輕松實現跨平臺，移動應用開發(fā)者不再需要考慮復雜的底層適配和跨平臺開發(fā)語言的問題。與此同時，使用HTML來開發(fā)的W

5、eb App在投入上會大大的低于傳統(tǒng)的Native App。 基于當下開始普及流行的HTML5，Web App可以實現很多原本Native App才可以實現的功能，比如基于位置服務的LBS( location based service) 、本地數據存儲、音視頻播放的功能，甚至還有調用照相機和結合GPU的硬件加速功能。 移動應用的迭代周期較短，傳統(tǒng)的Native App需要頻繁的重新下載與升級。而Web App則無需用戶下載，并且和傳統(tǒng)網站一樣可以動態(tài)升級。 Web App有App的特性，更有Web的特性。每一個Native App在當前的用戶使用場景下是相對孤立的，而Web App則可以像傳

6、統(tǒng)互聯網網頁那樣相互鏈接，從一個Web App直接跳轉到另外一個Web App。這無論是從用戶的使用體驗層面還是從應用之間的數據傳輸來看都是非常不錯的選擇。傳統(tǒng)桌面Web應用程序 在傳統(tǒng)桌面Web應用程序中,大多數用戶行為都會觸發(fā)一個HTTP請求。然后，由服務器進行一些處理并且把結果返回到用戶。在服務器處理過程中，用戶只能等待！ 從技術的角度來看，Web應用程序的這種開始-停止-開始特征并沒有什么不好的地方，但是這并沒有從用戶交互的角度來解決問題（因為幾乎所有的用戶交互都要導致到服務器的處理，而在服務器進行這一處理時，用戶只能等待?。?。交互式移動Web應用程序的基礎 Android、iPhon

7、e、Nokia Series 60、Windows Mobile和BlackBerry設備中的智能移動瀏覽器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可選擇添加的大量客戶端緩存和CSS擴展功能構成了交互式移動Web應用程序的基礎。AJAX引擎 移動Web通過使用AJAX引擎，解決了傳統(tǒng)桌面Web應用數據流量大、速度慢等問題。在會話的開始,AJAX應用程序加載AJAX引擎。AJAX引擎以JavaScript開發(fā)（作為一個JavaScript庫）并處于一個隱藏幀中。 用戶與AJAX引擎進行交互而代替原來的與web服務器交互。如果用戶交互并要求到服務器的處理，那么，該A

8、JAX引擎自己來處理當前交互。當用戶交互需要一些來自服務器的數據時,AJAX引擎將進行異步地調用(經由XML/XMLHttpRequest API)而不會打斷用戶的思路。 AJAX是異步的 AJAX是異步的，其含義是指，AJAX引擎與服務器的通訊以及與用戶交互是異步的。因此,用戶能夠得到一種無縫的體驗(也就是說，用戶不必等待)。 當前，AJAX背后存在一種動力-開發(fā)人員已經熟悉對于這種技術支持的背景，并且所有組成AJAX的技術都已經成熟并穩(wěn)定起來。AJAX成為Web上許多新型應用程序的基礎，例如Google suggest,Google Maps,還有Flickr和Amazon的的部分實現。移

9、動Web開發(fā)模式 Web Application App：應用程序 完成某項或者幾項任務 滿足某些需求 Web：構建于Web技術之上 HTML/CSS/JS 服務端移動AP移動Web開發(fā)模式優(yōu)勢移動Web開發(fā)模式的優(yōu)勢學習成本低、易于上手輕量級應用突破渠道限制(AppStore)跨平臺，比原生更易于適配和瀏覽器輕耦合，應用快速發(fā)布移動Web開發(fā)模式的劣勢 性能低 功能不能完全滿足，用戶體驗不好力 缺乏設備訪問能17.1.4 Hybrid App Hybird(混合應用)模式Hybrid App同時使用網頁語言與程序語言開發(fā)，通過應用商店區(qū)分移動操作系統(tǒng)分發(fā)，用戶需要安裝使用的移動應用。Nati

10、veAPPWebAPPHybirdAPP就是所謂的原生應用.指的是用平臺特定的開發(fā)語言所開發(fā)的應用主要是采用統(tǒng)一的標準的HTML,JavaScript.CSS等web技術開發(fā).通過不同平臺的瀏覽器訪問來實現跨平臺.為了彌補如上兩者開發(fā)模式的缺陷的產物.可以安裝，使用web開發(fā)兩種模式(Native主體型/web主體型)移動應用分類為什么使用Hybird-用戶體驗和開發(fā)成本分析開發(fā)成本和時間MobileWebsiteWebAppHybirdAppNativeApp用戶體驗特性NativeAppWebAppHybirdApp開發(fā)語言原生語言Objective-C、Java、.net網頁語言HTML

11、5+JS+CSS3網頁或原生語言跨平臺性低高高設備訪問能力高低高開發(fā)難度高低低高級圖形高中中應用體驗好差較好安裝體驗高從應用商店安裝中通過移動瀏覽器安裝高從應用商店安裝升級靈活性低總通過應用商店升級高中常通過應用商店升級向后兼容差好好為什么使用Hybird-總結未來趨勢 當Web的體驗和Native的體驗逐漸趨近的時候，人們更愿意把精力花在內容獲取上，而不是軟件交互上，但是現階段的交互體驗，恰恰是影響人們獲取內容的主要短板。所以，趨勢擺在那里，卻無法預測這個時間差。 就跟電腦端的應用一樣，雖然現在Web化的趨勢已經非常明顯了，但是還是無法取代本機安裝的一些工具類的、游戲類的應用，在Web技術沒

12、有達到本地應用的效率和體驗之前，Web是無法顛覆Native的。小結 總體上，Web只是作為設計者和開發(fā)者所期待的一種理想化結果，開發(fā)成本低、輕松跨平 臺、迭代更新快，但是顯然，現階段用戶的期待和手機設備廠商的期待還是體驗上更勝一籌的Native。Web之于，只是一種趨勢。在這個也許會非常久 的過渡階段，對復雜產品來說，Native App + Web App也許是個不錯的解決方案。Web App（網頁應用）Hybrid App（混合應用）Native App（原生應用）開發(fā)成本低中高維護更新簡單簡單復雜體驗差優(yōu)優(yōu)Store或market認可不認可認可認可安裝不需要需要需要跨平臺優(yōu)優(yōu)差17.1

13、.6 常見移動Web開發(fā)框架1. Sencha TouchSencha Touch 是世界上第一個基于 HTML5 的移動 Web 開發(fā)框架，支持最新的 HTML5 和 CSS3 標準，全面兼容 Android 和 Apple iOS 設備，提供了豐富的 WEB UI 組件，可以快速的開發(fā)出運行于移動終端的應用程序。 2. jQuery Mobile jQuery Mobile 框架把“write less, do more”精神提升到更高的層次。jQuery 移動框架可以幫助設計一個可運行于所有流行智能手機和平板平臺的應用程序，而不需要為每種移動終端都開發(fā)一個特別的版本。 3. jQTouc

14、h jQTouch 是一款 jQuery 的插件，用于手機上實現動畫、列表導航、默認應用樣式等各種常見UI效果。支持 iPhone、Android 等手機。其他4. The M Project5. DHTMLX Touch HTML5 JavaScript Framework for Mobile7. Wijmo jQuery UI Widgets8. 960 Grid on jQuery-Mobile9. SproutCore HTML5 Application Framework10. NimbleKit17.1.7 常見Hybrid App平臺 Hybrid App開發(fā)，現階段主流的平臺

15、包括PhoneGap，AppCan，appMobi，Titanium等，它們基于webkit開源內核，使用HTML5 標準開發(fā)，適配機型簡單，支持開發(fā)者自定義插件，并能很好的應用于商業(yè)，教育，娛樂等行業(yè)，成為移動開發(fā)者的首選開發(fā)平臺。17.2 HTML5HTML5的新特性定時媒體播放HTML5 音頻與視頻：HTML5里新增的元素，它們?yōu)殚_發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件。實時二維繪圖Canvas API：有關動態(tài)產出與渲染圖形、圖表、圖像和動畫的API。對本地離線存儲的更好的支持17.2.1 HTML5介紹 HTML5是用于取代1999年所制定的

16、 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，現在仍處于發(fā)展階段，但大部分瀏覽器已經支持某些 HTML5 技術。 HTML 5有兩大特點：首先，強化了 Web 網頁的表現性能；其次，追加了本地數據庫等Web應用的功能。1. 語義特性 HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa、微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。 新的特殊內容元素，比如 article、footer、header、nav、section新的表單控件，比如 calendar、date、time、email、url、search。2. 本地

17、存儲特性 基于HTML5開發(fā)的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。 3. 設備兼容特性 從地理位置（Geolocation）功能的API文檔公開以來，HTML5為網頁應用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。 4. 連接特性 更有效的連接工作效率，使得基于頁面的實時聊天，更快

18、速的網頁游戲體驗，更優(yōu)化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助實現服務器將數據“推送”到客戶端的功能。5. 網頁多媒體特性 支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。 三維、圖形及特效特性（Class: 3D, Graphics & Effects） 基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現的驚人視覺效果。 6. 性能與集成特性 沒有用戶會永遠等待的LoadingHTML5會通

19、過XMLHttpRequest2等技術，幫助的Web應用和網站在多樣化的環(huán)境中更快速的工作。XMLHttpRequest可以提供不重新加載頁面的情況下更新網頁，在頁面加載后在客戶端向服務器請求數據，在頁面加載后在服務器端接受數據，在后臺向客戶端發(fā)送數據。XMLHttpRequest 對象提供了對 HTTP 協(xié)議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，并且能以文本或者一個 DOM 文檔形式返回內容。盡管名為 XMLHttpRequest，它并不限于和 XML 文檔一起使用：它可以接

20、收任何形式的文本文檔。XMLHttpRequest 對象是名為 AJAX 的 Web 應用程序架構的一項關鍵功能。7. CSS3特性 在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。其他17.2.2 語義特性17.2.3 本地存儲17.2.4 WebSockets17.3 Sencha Touch17.3.1 Sencha Touch概要 1. Sencha Touch簡介 Sencha Touch是專門為移動設備開發(fā)應用的Javascript框架。通過Sencha Touch可以

21、創(chuàng)建非常像native app的Web app，用戶界面組件和數據管理全部基于HTML5和CSS3的Web標準，全面兼容Android和Apple iOSSencha Touch Sencha是目前為止所發(fā)現的最強大的應用于移動平臺的框架。它將自己定位為框架(Framework)而不是類庫(Library)，也可以充分印證這一點。相信隨著Sencha的出現，移動平臺的Web App用戶體驗設計會得到提升，同時也會對HTML 5和CSS3在移動平臺上的普及推廣產生很大的促進作用。可以預見，隨著HTML 5愈加強大的功能，未來的移動應用將會逐漸步入Web App時代。2. Sencha特性 Sencha Touch可以讓的Web