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

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

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

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

應(yīng)用商店安裝包格式

開發(fā)工具

開發(fā)包

語言

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

從技術(shù)的角度來看，Web應(yīng)用程序的這種"開始-停止-開始"特征并沒有什么不好的地方，但是這并沒有從用戶交互的角度來解決問題（因?yàn)閹缀跛械挠脩艚换ザ家獙?dǎo)致到服務(wù)器的處理，而在服務(wù)器進(jìn)行這一處理時(shí)，用戶只能等待?。＝换ナ揭苿?dòng)Web應(yīng)用程序的基礎(chǔ)Android、iPhone、NokiaSeries60、WindowsMobile和BlackBerry設(shè)備中的智能移動(dòng)瀏覽器都支持XHTML、HTML、JavaScript和AJAX。此功能集以及可選擇添加的大量客戶端緩存和CSS擴(kuò)展功能構(gòu)成了交互式移動(dòng)Web應(yīng)用程序的基礎(chǔ)。AJAX引擎移動(dòng)Web通過使用AJAX引擎，解決了傳統(tǒng)桌面Web應(yīng)用數(shù)據(jù)流量大、速度慢等問題。在會(huì)話的開始,AJAX應(yīng)用程序加載AJAX引擎。AJAX引擎以JavaScript開發(fā)（作為一個(gè)JavaScript庫）并處于一個(gè)隱藏幀中。

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

Web

Application

App：應(yīng)用程序

完成某項(xiàng)或者幾項(xiàng)任務(wù)

滿足某些需求

Web：構(gòu)建于Web技術(shù)之上

HTML/CSS/JS

服務(wù)端

移動(dòng)

AP移動(dòng)Web開發(fā)

模式優(yōu)勢移動(dòng)Web開發(fā)模式的優(yōu)勢

學(xué)習(xí)成本低、易于上手

輕量級應(yīng)用突破渠道限制(AppStore)

跨平臺(tái)，比原生更易于適配和瀏覽器輕耦合，應(yīng)用快速發(fā)布移動(dòng)Web開發(fā)模式的劣勢?

性能低?

功能不能完全滿足，用戶體驗(yàn)不好力?

缺乏設(shè)備訪問能17.1.4HybridApp

Hybird(混合應(yīng)用)模式Hybrid

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

SenchaTouch是世界上第一個(gè)基于

HTML5的移動(dòng)

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

HTML5和

CSS3標(biāo)準(zhǔn)，全面兼容

Android和

AppleiOS設(shè)備，提供了豐富的

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

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

3.jQTouch

jQTouch是一款

jQuery的插件，用于手機(jī)上實(shí)現(xiàn)動(dòng)畫、列表導(dǎo)航、默認(rèn)應(yīng)用樣式等各種常見UI效果。支持

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