使用PhoneGap開啓移動開發之旅

移動市場風起雲涌，只是好像和悲催的.net程序員隔絕。咱們心裏中一直期待的Windows Phone終究不能匹及windows, 隨着時間的流逝，windows phone愈來愈像扶不起的阿斗，連微軟本身有念頭放棄. 看新聞上，微軟打算讓windows phone支持Android應用，Nokia出了Android手機……
.Net開發人員在移動市場中該何去何從? 下面介紹的PhoneGap, 也許是咱們的一個選擇。

閱讀目錄:

一. 什麼是PhoneGap?

二. PhoneGap是如何作到的?

三. PhoneGap的優勢和不足

四. PhoneGap開發環境安裝Step by Step

五. 第一個Android App: Hello World

六. 深刻開發

一，什麼是PhoneGap?

移動應用很是火熱，無奈開發平臺實在太多。大的平臺就有Android和iOS, 還有其它的平臺，好比Windows Phone, BlackBerry…… 不一樣的開發平臺上又須要不一樣的開發語言，開發Android，須要學習Java; 開發iOS應用須要學習Object-C.
跨平臺不是各大公司一直努力的方向嗎？不過最終爲了本身的算盤，仍是打開了這個潘多拉魔盒。當苦逼的程序員在Android上實現了的App又要到iOS上實現一遍，這和咱們的追求的原則DRY（DO NOT REPEAT YOURSELF）違背呀。
那麼在移動端，就沒有跨平臺的開發方式了嗎？其實一直都有，真正可以跨平臺的是HTML + CSS + JS. 也就是Web App. 不管任何平臺，只要有瀏覽器，就都能使用Web App. 可是Web App有侷限性，沒法調用和操做本地設備，好比攝像頭, GPS, 推送消息等。
而PhoneGap就是爲了解決這個問題的，它可以既讓咱們的使用HTML +CSS +Js開發應用，還能讓咱們像本地App同樣，方便的調用設備和操做系統交互。

二, PhoneGap是如何作到的?

使用HTML+CSS+Js開發的Web App, 會被PhoneGap包裝成WebView, 嵌入到發佈App中。這樣最後打包的App實際上就是一個外殼，外殼中包裝的就是咱們開發的Web App. 針對不一樣的平臺，PhoneGap會使用不一樣的平臺編譯打包。
對於Native API的調用，是經過Js調用完成的。這些調用的代碼一樣會被PhoneGap翻譯成不一樣平臺的代碼，從而實現對於和不一樣設別的交互。也就是下圖中的Phone Gap Bridge作的事情。

 

三，PhoneGap的優勢和不足

看到上面的簡單介紹，PhoneGap的優勢應該呼之欲出了:

1. 跨平臺

借用Java的廣告語, PhoneGap實現了移動平臺上的Write once, run anywhere.
PhoneGap目前支持的移動平臺有: Android, iOS, Windows Phone, Windows 8, Firefox OS, Amazon Fire OS, BlackBerry 10, Ubuntu, Tizen.（這下你們都知足了吧！）

2. 性價比高，開發難度低

只要會HTML+CSS+JS，你就能開發在多達8個移動平臺上運行的App, 還有比這更具性價比的技術嗎?
相信會HTML的前端的開發人員，應該是比任何其它一種開發語言的人要多得多吧。不過服務器端開發，仍是要掌握一門其它語言的，PHP, Java, .net, Ruby仍是Python，這個就沒有限制了。
可是，兼容性越強的技術，成本越低，性能越差；兼容性越差的技術，成本越高，性能越好。PhoneGap能兼容那麼多的平臺，天然是效率不太好。下面就說說PhoneGap的不足

PhoneGap的不足:

1. 運行效率

PhoneGap的運行，依賴於移動設備上的內置瀏覽器的Webkit， 因此運行速度上天然是比Native App慢。

2. 不能支持所有的系統API

因爲要支持多平臺, 因此若是一些平臺上獨有的API, 在PhoneGap上就有可能不能獲得及時的支持。
在今天千元之內，就能買到四核手機的年代，通常App是不太存在運行效率問題的。可是若是你要開發一款複雜的3D遊戲，那麼Native App確定是最佳選擇
另外，我的認爲，PC上的歷史必將在Mobile上重演，最終會走向Web化。

四，PhoneGap開發環境安裝Step by Step

按照官方文檔上的介紹安裝，滿滿的不少坑。下面詳細介紹如何在Windows下安裝PhoneGap開發環境。下面列出的下載地址只是寫文章的當下有效，之後可能會失效，若是失效，能夠自行到官方網址下載。

1. 安裝Node.js

上Node.js官方網站上http://www.nodejs.org/download/ 。下載Nodejs安裝包裝上。
安裝完成後，把Nodejs的路徑加入到系統變量Path中。

2. 安裝Cordova CLI（cordova command-line interface）

在命令行中運行中安裝Cordova CLI

若是是說npm命令沒有找到，那就是Path配置有問題。若是你悲催的出現安裝錯誤，那是由於GFW 蛋疼的把 https://registry.npmjs.org 給牆了，致使沒法經過 NPM 安裝模塊。須要爲

npm配置代理。

npm config set proxy=http://127.0.0.1:9999
npm config set https-proxy=http://127.0.0.1:9999
上面的代理地址須要更換成你本身的。

3. 配置Android開發平臺

3.1 下載安裝最新JDK

上官方網址下載並安裝最新JDK
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

3.2 下載Android SDK

上官方網址下載並安裝最新Android SDK
http://developer.android.com/sdk/index.html

3.3 下載Apache Ant

上官方網址下載並安裝最新Android SDK
http://ant.apache.org/bindownload.cgi

3.4 配置環境變量

添加新的環境變量， 根據安裝路徑，調整下面的路徑:

ANDROID_HOME                 Value: C:\Program Files\adt-bundle-windows-x86_64-20140321\sdk
ANT_HOME                             Value: C:\Program Files\apacheant
JAVA_HOME                           Value: C:\Program Files\Java\jdk1.8.0_05

添加Path
%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

五，第一個Android App: Hello World

首先，在你要建立項目的文件夾路徑下，運行下面的命令建立HelloWorld項目

接着，爲該項目添加Android平臺支持。

而後，在Android SDK的安裝目錄中，有SDK Manager.exe程序，在命令行中啓動該程序。
在Tools->Manage AVDs中，建立一個新的Android模擬器。

最後就能夠開始在Android平臺上編譯和運行咱們的的第一個PhoneGap程序了

啓動運行的結果:

 

六，深刻開發

上面的App顯示的畫面，其實就是咱們建立的HelloWorld項目中的www目錄下的index.html

開發一個跨平臺的應用程序，只是須要咱們在www目錄下，作好web app就能夠了。這裏的選擇就更多了，可使用BootStrap, JqueryMobile………另外，須要再系統學習一下PhoneGap中的如何調用系統API.