Cordova webapp實戰開發：（2）認識一下Cordova

昨天寫了第一篇 《Cordova webapp實戰開發：（1）爲何選擇 Cordova webapp？》，意料中看到你們對這個主題的興趣，我新建的PhoneGap App開發 348192525   一會兒就快1百人了。原本心想過幾天在寫第二篇吧，但昨天已在文中說到，若是點贊超過20就開始寫下一篇，我們要說到作到，那就開始第二篇吧。可是第二篇寫點什麼呢？我看到羣中有人問 「 phonegap和cordova是什麼關係？」，加入QQ羣的時候，也看到一些人寫着cordova初學者。正如我也說到，本系列的初衷是幫助你們從0開始作一個全棧型的Web app開發者，因此仍是一步一步慢慢來。對於有經驗的老鳥們，大家能夠選擇調過已經知道的系列文章，或者回復補充。

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

在羣裏，有個朋友問了一個問題「如何封裝一個瀏覽器成webapp？」 

每一個手機就像電腦同樣，都帶着本身的操做系統。若是你願意，你能夠從頭寫一個瀏覽器，把瀏覽地址隱藏了，這就像你的一個app了，對吧。固然，咱們本身寫瀏覽器，這也太難了，因此咱們確定不是這麼作的。其實，咱們只是基於各類手機上Web瀏覽器內核去作手腳，而Js是Web開發的最佳語言，至於如何封裝成一個Web app？說實話，我也沒有真正去探究過是如何去作的，由於我對Andorid和iOS原生開發也不熟悉，最主要是如今也沒有時間去研究這些了，可是我告訴你的是，經過一些移動開發框架，你只須要專一於寫你的前端代碼，而後經過一個開發框架的黑盒的操做，編譯後就成了一個能夠安裝的App了。是否很神奇呢：）

不用管它有多神奇了，看看下面這張圖，先從架構上整體瞭解到這個層次就好了。最上面是H5，中間是Web前端框架，以及移動開發框架的API。若是你須要調用手機原生的功能，例如攝像頭、錄音等，這些工做會由移動開發框架去作，你只須要了解這種框架是如何工做的便可。學會如何使用攝像頭，就知道如何使用錄音了，觸類旁通。

移動開發框架

在準備使用Web App從新編寫以前的原生APP前，工信部的人有點懷疑，由於你們都據說HTML5的移動應用太慢，體驗太差，這萬一作完不行怎麼辦？我解釋了一下，發現沒用，因此索性本身就動工了。我想告訴你們的是，只要你不是對性能要求特別高，例如畫圖之類的App，其實不少應用均可以使用HTML5來作的。昨天我還在一個材料計算器羣裏和羣主說，可使用Web App方式來作，省得羣裏的人都在等着你的iOS版本出來。羣主說他嘗試過，可是每次計算要等好幾秒，還給我舉例說見過12306訂火車票的App嗎？

我想告訴你們的就是，這裏存在不少偏見，由於之前手機性能差，H5也沒有這麼普及，因此體驗很差、效率差強人意，可是如今HTML5愈來愈好，移動硬件性能也愈來愈強，不少應用都已悄然上演了混合式開發的方式。你看看支付寶、淘寶，其實手機App裏面都有Web的影子，你發現了嗎？

由於移動設備的普及，App也愈來愈多，早就了高價收購Andorid和iOS開發者的現象，而如今由於Web App的興起，又造價了Web前端的高價，雖不是主要緣由，但確定是其中一個緣由，因此學習移動開發會提高你的身價，固然前提是你真的一我的能搞定。

之前咱們作桌面或Web應用同樣，語言和框架都有不少能夠選擇，那作移動開發框架呢？依然咱們有不少選擇，只是我真的很長時間或者沒有太多時間專一學習每個，因此下面只能簡單介紹一下了。

PhoneGap

PhoneGap是一款開源的手機應用開發平臺，它僅僅只用HTML和JavaScript語言就能夠製做出能在多個移動設備上運行的應用。 PhoneGap將移動設備自己提供的複雜的API進行了抽象和簡化，提供了一系列豐富的API供開發者調用，只要你會HTML和Javascript或 者Java語言，就能夠利用PhoneGap提供的API去調用各類功能，製做出在各類手機平臺(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上運行的應用。目前phonegap得到Apple,IBM,NOKIA,palm等衆多公司的支持。簡單來講使用PhoneGap就是使用HTML,JavaScript和CSS來開發程序，最終經過PhoneGap能夠產生對應版本的native 程序。

IONIC

IONIC 是目前最有潛力的一款HTML5手機應用開發框架，它提供了不少UI組件來幫助開發者開發強大的應用。它使用JavaScript MVVM框架和 AngularJS來加強應用。提供數據的雙向綁定，使用它成爲Web和移動開發者的共同選擇。即將發佈的AngularJS 2.0將會專一於移動開發，相信IONIC必定會取得不錯的成就 。

IONIC的開發團隊將盡快開發出一種經過IONIC creator提供開發者快速建立IONIC應用的方式。咱們將很快就會看到一個支持拖拉功能的可視化開發工具，幾分鐘內開發一個app將再也不只是吹xx。

這裏要說一AngularJS，這個框架我在前兩年看過，我喜歡這種MVVM框架的東東，當時只是簡單學習了一下，若是有時間我可能會把如今急於JQueryMobile和沒有框架的Js改成急於IONIC來編寫。

......

除了以上一個我實際作過，一個我想學的以外，還有不少Web App開發框架，國內如今網上也能收到好幾個，不過我都沒怎麼用過，這裏也就不作介紹了，總之這一小段就是告訴，開發框架有不少，基於我之前本身也作框架（OpenExpressApp）的經驗，任何東西都不可能完美，因此咱們不要太苛求了，若是你喜歡這個框架，那就去學習，學習以後若是以爲可行，那就找個小項目試試，若是試後以爲不錯，那就多花些功夫作好，僅此而已。 

你們看此係列blog就知道，我後續全部的博文都是圍繞第一個來介紹，因此若是你對第一個不感興趣，那麼可能這個系列就不適合你了，固然，你之後也能夠擇取系列中一些單獨篇章來學習你所須要的。

cordova與phonegap有什麼關係？

phoengap

• 官方網址：http://phonegap.com

若是能瞭解一個框架的興起仍是一件比較有趣的事。08年一次ios開發者大會上來自Nitobi軟件公司的幾個傢伙突發奇想，提出一個想法，想作一個工具來彌補web和ios開發之間的不足，並提出 Bridging the gap between the web and the iPhone sdk。一開始的目標並非很大，可是作到了如今的written once,run everywhere。咱們不少人作事其實也應該這樣，一開始不要把目標弄得那麼大，跳一步可以上就好，敏捷我的的造成也是這樣，一開始只是分享而已，隨着分享越多才成爲了一個幫助有成長意識的人去認識自我管理自個人成長體系。若是一會兒目標太大，你會由於難以實現而給本身找理由，這樣到頭來你什麼都沒有。

09年他們推出android adk和blackberry sdk，成了移動開發者的福音，就連ibm也加入進來。phonegap繼續成長，在2011年10月，整個Nitobi團隊被adobe收購，PhoneGap的項目主管Brian LeRoux指出開源PhoneGap的決定在Adobe收購Nitobi以前就作出了，因爲Adobe如今擁有PhoneGap商標，他們不得不換個名字，第一個選中的名字是Callback，毫無創意，所以再改一次，產品如今叫Apache Cordova。隨後adobe把 phonegap送給了apache軟件基金會，接着apache把phonegap更名爲cordova，cordova是Nitobi團隊當時坐落的街道名稱，用此名來記念Nitobi團隊的貢獻。

因此Apache Cordova是從PhoneGap中抽出的核心代碼，是驅動PhoneGap的核心引擎，你看着兩個官網風格多差很少。

Cordova

• 官方網址：http://cordova.apache.org/

 

咱們後續的全部文章和代碼都是基於Cordova的，若是有誰知道Phonegap和Cordova的具體差別在哪裏，能夠回覆補充一下。

誰在使用PhoneGap

誠實的說，上面的都是在官網看到放上去的，至於真的用的怎麼樣就不知道了。這樣提及來感受我很不負責似的，因此在本系列第一盤中我就告訴了你們，我本身作的敏捷我的App和掌中廣材App就是用Cordova作的，並且都已經在各大Andorid市場和iOS AppStore上架了。

 

支持平臺

我相信不少人選擇這種方式，而不是原生，很看重的一點就是跨平臺，也就是一次代碼，多個平臺複用。沒錯，我如今主要在Andorid上開發，而後把www目錄下的全部文件都拷貝到iOS目錄下，而後就OK了。至於你說，wp系列的複用起來如何呢？很抱歉，我沒有wp的手機，沒有試過。之因此尚未試過，是由於這類客戶羣數量還比較少，因此咱們也沒有投入精力去作這個部分，這不是技術問題，而是產品對技術的定位方面決定的。

可是，從官網咱們能夠看到，它對平臺的支持是很不錯的，我也相信它們能作到iOS和Andorid複用，就能作到其餘平臺複用，由於從架構原理來看是同樣的。

 

預習做業 

真是暈？居然還有預習做業，弄得我就像老師同樣。呵呵，不過還真有不少人叫我周老師，多是由於我把敏捷我的的博客當作練習變成習慣了，因此在本篇結尾時，但願你們在輕鬆讀完本篇以後，作一下幾個練習，遇到問題呢能夠回覆，這樣我在寫下一篇的時候呢就能夠幫你解決問題了，這既鍛鍊你的學習能力，也可以更及時更好的解決你的問題。

1. 去官網下載Cordova框架（提醒，不是Phonegap）
2. 本身創建一個Andorid項目，並在手機上調試安裝成功
3. 在iOS上也調試安裝一下。（若是沒有iOS環境，那就略過吧） 

 

PhoneGap App開發 477842664