web app 與原生 app開發(fā)研究

《web app 與原生 app開發(fā)研究》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、WebApp與原生App開發(fā)研究最近專注研究jQueryMobile——一款很方便就可以把WebApp包裝成適合Android與iPhone等觸屏移動(dòng)設(shè)備的Javascript庫，結(jié)合jQueryMobile與HTML5，可以很方便的開發(fā)出一款具有良好界面及用戶體驗(yàn)的WebApp，在這個(gè)過程中我收獲良多，因此決定針對使用jQueryMobile與HTML5開發(fā)WebApp寫一個(gè)系列的文章。在開始之前，我首先簡述WebApp與原生App各自的優(yōu)缺點(diǎn)。?一.WebApp與原生App的優(yōu)缺點(diǎn)1.WebApp(1).

2、優(yōu)點(diǎn)1.開發(fā)成本低，周期短，Web開發(fā)者可以使用現(xiàn)成的工具及開發(fā)技術(shù)。2.跨平臺，用戶只需要一個(gè)標(biāo)準(zhǔn)的移動(dòng)瀏覽器。3.維護(hù)方便，維護(hù)不干擾用戶使用，可實(shí)時(shí)修復(fù)Bug。?(2).缺點(diǎn)1.無法調(diào)用手機(jī)硬件，用戶體驗(yàn)較原生App薄弱。2.運(yùn)行不夠原生App流暢。3.需要網(wǎng)絡(luò)的支持（可依靠HTML5大大減少對網(wǎng)絡(luò)的依賴）。?2.原生App(1).優(yōu)點(diǎn)1.可以調(diào)用手機(jī)硬件提供的功能，具有出色的用戶體驗(yàn)。2.不依賴網(wǎng)絡(luò)。3.開發(fā)者更易獲得盈利。?(2).缺點(diǎn)1.需要移植到不同平臺時(shí)較為麻煩。2.維護(hù)成本高。3.開發(fā)周期長

3、。4.需要AppStore或AndroidMarket的確認(rèn)，并且要與第三方分享盈利。?看了以上的優(yōu)缺點(diǎn)，可以看出WebApp具有很好的優(yōu)勢，并且隨著移動(dòng)設(shè)備硬件配置的逐年升級，WebApp的劣勢將會(huì)逐漸減弱，而優(yōu)勢將更加明顯，雖然仍不能完全取代原生App，但WebApp隊(duì)伍將不斷壯大已經(jīng)形成趨勢，因此作為Web開發(fā)者投入到WebApp的開發(fā)中也是一種很好的選擇。當(dāng)然原生App仍有其優(yōu)勢，因此在本系列文章的最后，Kayo會(huì)介紹一種方法將WebApp轉(zhuǎn)換為原生的App。?二.使用jQueryMobile與HTM

4、L5開發(fā)WebApp既然WebApp具有很多的優(yōu)勢，那么應(yīng)該如何使用Web開發(fā)技術(shù)開發(fā)出一款優(yōu)秀的WebApp呢？?首先我們必須知道，一款優(yōu)秀的WebApp，需要有良好的UI與用戶體驗(yàn)（UE），雖然本質(zhì)上作為一個(gè)站點(diǎn)，內(nèi)容才是用戶需要的，但我們?nèi)孕枰褂昧己玫腢I與UE來作為內(nèi)容與用戶的連接，因此我們引入jQueryMobile來為WebApp制作UI與交互。?有了WebApp的界面，還需要數(shù)據(jù)的交互，這樣才能做出App。這里可以使用PHP等服務(wù)器腳本與Mysql等數(shù)據(jù)庫來為WebApp提供數(shù)據(jù)驅(qū)動(dòng)，但Kay

5、o希望采用一種新的方法，也就是HTML5的方法，使用HTML5規(guī)范提供的WebSQLDatabase——一個(gè)簡單強(qiáng)大的Javascript數(shù)據(jù)庫API，可以在本地?cái)?shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)（如內(nèi)嵌在瀏覽器中的SQLite），另外還可以使用HTML5規(guī)范中的Storage（本地儲(chǔ)存）來儲(chǔ)存數(shù)據(jù)，這樣就可以減少WebApp對于網(wǎng)絡(luò)的依賴，并且整個(gè)WebApp都是使用前端的技術(shù)完成（很震撼吧?。?最后不得不提的是offlineapplicationcache（離線程序緩存），它也是HTML5的特性，允許用戶在無網(wǎng)絡(luò)連接的情

6、況下運(yùn)行WebApp，因此我們可以利用此特性制作支持離線使用的WebApp，進(jìn)一步減少WebApp對于網(wǎng)絡(luò)的依賴。?三.響應(yīng)式設(shè)計(jì)響應(yīng)式網(wǎng)頁設(shè)計(jì)由EthanMarcotte提出，通俗點(diǎn)說，就是網(wǎng)站界面能夠兼容多種終端，而不是每種終端各自做一個(gè)界面。騰訊等大型網(wǎng)站都有針對不同的設(shè)備做出不同的界面，比如3g版，觸屏版，ipad……，這樣就會(huì)增加了很多重復(fù)的工作量，因此我們可以為網(wǎng)站漸進(jìn)的設(shè)計(jì)一個(gè)界面，自動(dòng)適應(yīng)不同的設(shè)備，當(dāng)然設(shè)備間的效果可以有所差距。這里Kayo小插一段，Kayo認(rèn)為響應(yīng)式設(shè)計(jì)的誕生，很大程度上歸

7、功于移動(dòng)互聯(lián)網(wǎng)的發(fā)展與移動(dòng)設(shè)備硬件的提升，而移動(dòng)互聯(lián)網(wǎng)的發(fā)展本身也依賴于移動(dòng)設(shè)備硬件的提升，因此想不斷提升的App，還得先要硬件廠商給力。?言歸正傳，這里提到響應(yīng)式設(shè)計(jì)的理念當(dāng)然是希望在設(shè)計(jì)WebApp時(shí)也應(yīng)用到，而這些jQueryMobile已經(jīng)為開發(fā)者預(yù)先做好，jQueryMobile不但默認(rèn)的UI樣式里已經(jīng)按響應(yīng)式設(shè)計(jì)做好，它還另外提供了一些為響應(yīng)式設(shè)計(jì)而做的方法，日后會(huì)詳細(xì)介紹。?四.漸進(jìn)式設(shè)計(jì)Kayo在之前介紹jQueryMobile的文章《jQueryMobile特性》時(shí)已經(jīng)提到過漸進(jìn)式設(shè)計(jì)，下面

8、引用文中的話：?“前端設(shè)計(jì)時(shí)通過漸進(jìn)增強(qiáng)功能來設(shè)計(jì)一直也是Kayo的設(shè)計(jì)想法，因?yàn)椴煌钠脚_，不同的設(shè)備有著不同的Web環(huán)境，因此對于一些出色的前端效果很難保證在每臺設(shè)備上都呈現(xiàn)相同的效果，因此與其為了在所有設(shè)備上做到一樣的效果而降低整體的前端樣式，不如對于好的設(shè)備可以呈現(xiàn)更出色的效果，而基本的效果就兼容所有的設(shè)備。jQueryMobile的設(shè)計(jì)也是如此，核心的功能支持所有的設(shè)備，而較新的設(shè)備則可以