如何封裝一個瀏覽器成webapp？

在群里，有個朋友問了一個問題“如何封裝一個瀏覽器成webapp？” 

每個手機就像電腦一樣，都帶著自己的操作系統(tǒng)。如果你愿意，你可以從頭寫一個瀏覽器，把瀏覽地址隱藏了，這就像你的一個app了，對吧。當(dāng)然，我們自己寫瀏覽器，這也太難了，所以我們肯定不是這么做的。其實，我們只是基于各種手機上Web瀏覽器內(nèi)核去做手腳，而Js是Web開發(fā)的最佳語言，至于如何封裝成一個Web app？說實話，我也沒有真正去探究過是如何去做的，因為我對Andorid和iOS原生開發(fā)也不熟悉，最主要是現(xiàn)在也沒有時間去研究這些了，但是我告訴你的是，通過一些移動開發(fā)框架，你只需要專注于寫你的前端代碼，然后通過一個開發(fā)框架的黑盒的操作，編譯后就成了一個可以安裝的App了。是否很神奇呢：）

不用管它有多神奇了，看看下面這張圖，先從架構(gòu)上總體了解到這個層次就行了。最上面是H5，中間是Web前端框架，以及移動開發(fā)框架的API。如果你需要調(diào)用手機原生的功能，例如攝像頭、錄音等，這些工作會由移動開發(fā)框架去做，你只需要了解這種框架是如何工作的即可。學(xué)會如何使用攝像頭，就知道如何使用錄音了，舉一反三。

移動開發(fā)框架

在準(zhǔn)備使用Web App重新編寫之前的原生APP前，工信部的人有點懷疑，因為大家都聽說HTML5的移動應(yīng)用太慢，體驗太差，這萬一做完不行怎么辦？我解釋了一下，發(fā)現(xiàn)沒用，所以索性自己就動工了。我想告訴大家的是，只要你不是對性能要求特別高，例如畫圖之類的App，其實很多應(yīng)用都可以使用HTML5來做的。昨天我還在一個材料計算器群里和群主說，可以使用Web App方式來做，免得群里的人都在等著你的iOS版本出來。群主說他嘗試過，但是每次計算要等好幾秒，還給我舉例說見過12306訂火車票的App嗎？

我想告訴大家的就是，這里存在很多偏見，因為以前手機性能差，H5也沒有這么普及，所以體驗不好、效率差強人意，但是現(xiàn)在HTML5越來越好，移動硬件性能也越來越強，很多應(yīng)用都已悄然上演了混合式開發(fā)的方式。你看看支付寶、淘寶，其實手機App里面都有Web的影子，你發(fā)現(xiàn)了嗎？

因為移動設(shè)備的普及，App也越來越多，早就了高價收購Andorid和iOS開發(fā)者的現(xiàn)象，而現(xiàn)在因為Web App的興起，又造價了Web前端的高價，雖不是主要原因，但肯定是其中一個原因，所以學(xué)習(xí)移動開發(fā)會提升你的身價，當(dāng)然前提是你真的一個人能搞定。

以前我們做桌面或Web應(yīng)用一樣，語言和框架都有很多可以選擇，那做移動開發(fā)框架呢？依然我們有很多選擇，只是我真的很長時間或者沒有太多時間專注學(xué)習(xí)每一個，所以下面只能簡單介紹一下了。

PhoneGap

PhoneGap是一款開源的手機應(yīng)用開發(fā)平臺，它僅僅只用HTML和javaScript語言就可以制作出能在多個移動設(shè)備上運行的應(yīng)用。 PhoneGap將移動設(shè)備本身提供的復(fù)雜的API進(jìn)行了抽象和簡化，提供了一系列豐富的API供開發(fā)者調(diào)用，只要你會HTML和Javascript或 者Java語言，就可以利用PhoneGap提供的API去調(diào)用各種功能，制作出在各種手機平臺(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上運行的應(yīng)用。目前phonegap獲得Apple,IBM,NOKIA,palm等眾多公司的支持。簡單來說使用PhoneGap就是使用HTML,JavaScript和CSS來開發(fā)程序，最終通過PhoneGap可以產(chǎn)生對應(yīng)版本的native 程序。

IONIC

IONIC 是目前最有潛力的一款HTML5手機應(yīng)用開發(fā)框架，它提供了很多UI組件來幫助開發(fā)者開發(fā)強大的應(yīng)用。它使用JavaScript MVVM框架和 AngularJS來增強應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為Web和移動開發(fā)者的共同選擇。即將發(fā)布的AngularJS 2.0將會專注于移動開發(fā)，相信IONIC一定會取得不錯的成就 。

IONIC的開發(fā)團(tuán)隊將盡快開發(fā)出一種通過IONIC creator提供開發(fā)者快速創(chuàng)建IONIC應(yīng)用的方式。我們將很快就會看到一個支持拖拉功能的可視化開發(fā)工具，幾分鐘內(nèi)開發(fā)一個app將不再只是吹xx。

這里要說一AngularJS，這個框架我在前兩年看過，我喜歡這種MVVM框架的東東，當(dāng)時只是簡單學(xué)習(xí)了一下，如果有時間我可能會把現(xiàn)在急于JQueryMobile和沒有框架的Js改為急于IONIC來編寫。

......

除了以上一個我實際做過，一個我想學(xué)的之外，還有很多Web App開發(fā)框架，國內(nèi)現(xiàn)在網(wǎng)上也能收到好幾個，不過我都沒怎么用過，這里也就不做介紹了，總之這一小段就是告訴，開發(fā)框架有很多，基于我以前自己也做框架（OpenExPRessApp）的經(jīng)驗，任何東西都不可能完美，所以我們不要太苛求了，如果你喜歡這個框架，那就去學(xué)習(xí)，學(xué)習(xí)之后如果覺得可行，那就找個小項目試試，如果試后覺得不錯，那就多花些功夫做好，僅此而已。 

大家看此系列blog就知道，我后續(xù)所有的博文都是圍繞第一個來介紹，所以如果你對第一個不感興趣，那么可能這個系列就不適合你了，當(dāng)然，你以后也可以擇取系列中一些單獨篇章來學(xué)習(xí)你所需要的。

cordova與phonegap有什么關(guān)系？

phoengap

如果能了解一個框架的興起還是一件比較有趣的事。08年一次ios開發(fā)者大會上來自Nitobi軟件公司的幾個家伙突發(fā)奇想，提出一個想法，想做一個工具來彌補web和ios開發(fā)之間的不足，并提出 Bridging the gap between the web and the iPhone sdk。一開始的目標(biāo)并不是很大，但是做到了現(xiàn)在的written once,run everywhere。我們很多人做事其實也應(yīng)該這樣，一開始不要把目標(biāo)弄得那么大，跳一步能夠上就好，敏捷個人的形成也是這樣，一開始只是分享而已，隨著分享越多才成為了一個幫助有成長意識的人去認(rèn)識自我管理自我的成長體系。如果一下子目標(biāo)太大，你會因為難以實現(xiàn)而給自己找理由，這樣到頭來你什么都沒有。

09年他們推出android adk和blackberry sdk，成了移動開發(fā)者的福音，就連ibm也加入進(jìn)來。phonegap繼續(xù)成長，在2011年10月，整個Nitobi團(tuán)隊被adobe收購，PhoneGap的項目主管Brian LeRoux指出開源PhoneGap的決定在Adobe收購Nitobi之前就做出了，由于Adobe現(xiàn)在擁有PhoneGap商標(biāo)，他們不得不換個名字，第一個選中的名字是Callback，毫無創(chuàng)意，因此再改一次，產(chǎn)品現(xiàn)在叫Apache Cordova。隨后adobe把 phonegap送給了apache軟件基金會，接著apache把phonegap改名為cordova，cordova是Nitobi團(tuán)隊當(dāng)時坐落的街道名稱，用此名來紀(jì)念Nitobi團(tuán)隊的貢獻(xiàn)。

所以Apache Cordova是從PhoneGap中抽出的核心代碼，是驅(qū)動PhoneGap的核心引擎，你看著兩個官網(wǎng)風(fēng)格多差不多。

Cordova

我們后續(xù)的所有文章和代碼都是基于Cordova的，如果有誰知道Phonegap和Cordova的具體差異在哪里，可以回復(fù)補充一下。

誰在使用PhoneGap

誠實的說，上面的都是在官網(wǎng)看到放上去的，至于真的用的怎么樣就不知道了。這樣說起來感覺我很不負(fù)責(zé)似的，所以在本系列第一盤中我就告訴了大家，我自己做的敏捷個人App和掌中廣材App就是用Cordova做的，而且都已經(jīng)在各大Andorid市場和iOS AppStore上架了。

支持平臺

我相信很多人選擇這種方式，而不是原生，很看重的一點就是跨平臺，也就是一次代碼，多個平臺復(fù)用。沒錯，我現(xiàn)在主要在Andorid上開發(fā)，然后把www目錄下的所有文件都拷貝到iOS目錄下，然后就OK了。至于你說，wp系列的復(fù)用起來如何呢？很抱歉，我沒有wp的手機，沒有試過。之所以還沒有試過，是因為這類客戶群數(shù)量還比較少，所以我們也沒有投入精力去做這個部分，這不是技術(shù)問題，而是產(chǎn)品對技術(shù)的定位方面決定的。

但是，從官網(wǎng)我們可以看到，它對平臺的支持是很不錯的，我也相信它們能做到iOS和Andorid復(fù)用，就能做到其他平臺復(fù)用，因為從架構(gòu)原理來看是一樣的。

預(yù)習(xí)作業(yè) 

真是暈？竟然還有預(yù)習(xí)作業(yè)，弄得我就像老師一樣。呵呵，不過還真有很多人叫我周老師，可能是因為我把敏捷個人的博客當(dāng)做練習(xí)變成習(xí)慣了，所以在本篇結(jié)尾時，希望大家在輕松讀完本篇之后，做一下幾個練習(xí)，遇到問題呢可以回復(fù)，這樣我在寫下一篇的時候呢就可以幫你解決問題了，這既鍛煉你的學(xué)習(xí)能力，也能夠更及時更好的解決你的問題。