Cordova webapp實戰開發:(2)認識一下Cordova


昨天寫了第一篇 《Cordova webapp實戰開發:(1)為什么選擇 Cordova webapp?》,意料中看到大家對這個主題的興趣,我新建的PhoneGap App開發 348192525  PhoneGap App實戰開發 一下子就快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

如果能了解一個框架的興起還是一件比較有趣的事。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

 

我們后續的所有文章和代碼都是基於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 Cordova App實戰開發2 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM