第17章 Hybrid App開發(fā)基礎

第17章HybridApp開發(fā)基礎目錄17.1HybridApp開發(fā)介紹17.2HTML517.3SenchaTouch17.1HybridApp開發(fā)介紹17.1.1移動開發(fā)類型

App，通過瀏覽器訪問；NativeApp，安裝到移動設備；HybridApp，它雖然看上去是一個NativeApp,安裝到移動設備上，但只有一個WebView，里面訪問的是一個WebApp。17.1.2NativeApp

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

應用商店安裝包格式

開發(fā)工具

開發(fā)包

語言

平臺Android

Market

.sdk

Eclipse

Android

SDK

Java

Android

App

Store

.ipa

xCode

ios

SDKObjective-C

ios

WP

Market

.xap

Visual

StudioSilverlight/Metro

.Net

FrameworkWindows

Phone原生模式原生開發(fā)模式的優(yōu)劣APP17.1.2WebApp

WebApp是指基于Web的系統(tǒng)和應用，其作用是向廣大的最終用戶發(fā)布一組復雜的內容和功能。移動Web在桌面Web的基礎上添加了新的MIME類型、標記語言、文檔格式和最佳實踐，為小尺寸屏幕提供優(yōu)化的Web內容，并可解決移動設備上的資源限制、Web瀏覽器可用性差等問題。移動端WebApp和WAP有什么不同？最直接的區(qū)別就是功能層面。WAP更側重使用網頁技術在移動端做展示，包括文字、媒體文件等。而WebApp更側重“功能”，是使用網頁技術實現的App?？偟膩碚f，WebApp就是運行于網絡和標準瀏覽器上，基于網頁技術開發(fā)實現特定功能的應用。WebApp的優(yōu)點：使用W3C標準的HTML語言開發(fā)，能夠輕松實現跨平臺，移動應用開發(fā)者不再需要考慮復雜的底層適配和跨平臺開發(fā)語言的問題。與此同時，使用HTML來開發(fā)的WebApp在投入上會大大的低于傳統(tǒng)的NativeApp?；诋斚麻_始普及流行的HTML5，WebApp可以實現很多原本NativeApp才可以實現的功能，比如基于位置服務的LBS(locationbasedservice)、本地數據存儲、音視頻播放的功能，甚至還有調用照相機和結合GPU的硬件加速功能。移動應用的迭代周期較短，傳統(tǒng)的NativeApp需要頻繁的重新下載與升級。而WebApp則無需用戶下載，并且和傳統(tǒng)網站一樣可以動態(tài)升級。WebApp有App的特性，更有Web的特性。每一個NativeApp在當前的用戶使用場景下是相對孤立的，而WebApp則可以像傳統(tǒng)互聯(lián)網網頁那樣相互鏈接，從一個WebApp直接跳轉到另外一個WebApp。這無論是從用戶的使用體驗層面還是從應用之間的數據傳輸來看都是非常不錯的選擇。傳統(tǒng)桌面Web應用程序在傳統(tǒng)桌面Web應用程序中,大多數用戶行為都會觸發(fā)一個HTTP請求。然后，由服務器進行一些處理并且把結果返回到用戶。在服務器處理過程中，用戶只能等待！

從技術的角度來看，Web應用程序的這種"開始-停止-開始"特征并沒有什么不好的地方，但是這并沒有從用戶交互的角度來解決問題（因為幾乎所有的用戶交互都要導致到服務器的處理，而在服務器進行這一處理時，用戶只能等待?。?。交互式移動Web應用程序的基礎Android、iPhone、NokiaSeries60、WindowsMobile和BlackBerry設備中的智能移動瀏覽器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可選擇添加的大量客戶端緩存和CSS擴展功能構成了交互式移動Web應用程序的基礎。AJAX引擎移動Web通過使用AJAX引擎，解決了傳統(tǒng)桌面Web應用數據流量大、速度慢等問題。在會話的開始,AJAX應用程序加載AJAX引擎。AJAX引擎以JavaScript開發(fā)（作為一個JavaScript庫）并處于一個隱藏幀中。

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

Hybird(混合應用)模式Hybrid

App同時使用網頁語言與程序語言開發(fā)，通過應用商店區(qū)分移動操作系統(tǒng)分發(fā)，用戶需要安裝使用的移動應用。NativeAPPWebAPPHybirdAPP就是所謂的原生應用.指的是用平臺特定的開發(fā)語言所開發(fā)的應用主要是采用統(tǒng)一的標準的HTML,JavaScript.CSS等web技術開發(fā).通過不同平臺的瀏覽器訪問來實現跨平臺.為了彌補如上兩者開發(fā)模式的缺陷的產物.可以安裝，使用web開發(fā)兩種模式(Native主體型/web主體型)移動應用分類為什么使用Hybird-用戶體驗和開發(fā)成本分析開發(fā)成本和時間MobileWebsiteWebAppHybirdAppNativeApp用戶體驗特性NativeAppWebAppHybirdApp開發(fā)語言原生語言Objective-C、Java、.net網頁語言HTML5+JS+CSS3網頁或原生語言跨平臺性低高高設備訪問能力高低高開發(fā)難度高低低高級圖形高中中應用體驗好差較好安裝體驗高從應用商店安裝中通過移動瀏覽器安裝高從應用商店安裝升級靈活性低總通過應用商店升級高中常通過應用商店升級向后兼容差好好為什么使用Hybird-總結未來趨勢當Web的體驗和Native的體驗逐漸趨近的時候，人們更愿意把精力花在內容獲取上，而不是軟件交互上，但是現階段的交互體驗，恰恰是影響人們獲取內容的主要短板。所以，趨勢擺在那里，卻無法預測這個時間差。就跟電腦端的應用一樣，雖然現在Web化的趨勢已經非常明顯了，但是還是無法取代本機安裝的一些工具類的、游戲類的應用，在Web技術沒有達到本地應用的效率和體驗之前，Web是無法顛覆Native的。小結總體上，Web只是作為設計者和開發(fā)者所期待的一種理想化結果，開發(fā)成本低、輕松跨平臺、迭代更新快，但是顯然，現階段用戶的期待和手機設備廠商的期待還是體驗上更勝一籌的Native。Web之于，只是一種趨勢。在這個也許會非常久的過渡階段，對復雜產品來說，NativeApp+WebApp也許是個不錯的解決方案。WebApp（網頁應用）HybridApp（混合應用）NativeApp（原生應用）開發(fā)成本低中高維護更新簡單簡單復雜體驗差優(yōu)優(yōu)Store或market認可不認可認可認可安裝不需要需要需要跨平臺優(yōu)優(yōu)差17.1.6常見移動Web開發(fā)框架1.SenchaTouch

SenchaTouch是世界上第一個基于

HTML5的移動

Web開發(fā)框架，支持最新的

HTML5和

CSS3標準，全面兼容

Android和

AppleiOS設備，提供了豐富的

WEBUI組件，可以快速的開發(fā)出運行于移動終端的應用程序。2.jQueryMobile

jQueryMobile框架把“writeless,domore”精神提升到更高的層次。jQuery移動框架可以幫助設計一個可運行于所有流行智能手機和平板平臺的應用程序，而不需要為每種移動終端都開發(fā)一個特別的版本。

3.jQTouch

jQTouch是一款

jQuery的插件，用于手機上實現動畫、列表導航、默認應用樣式等各種常見UI效果。支持

iPhone、Android等手機。其他4.TheMProject5.DHTMLXTouch–HTML5JavaScriptFrameworkforMobile6.WebApp.Net7.Wijmo–jQueryUIWidgets8.960GridonjQue