使用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的優點和不足

看到上面的簡單介紹,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中。

windowspath

2. 安裝Cordova CLI(cordova command-line interface)

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

image

如果是說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項目

image

接着,為該項目添加Android平台支持。

image

然后,在Android SDK的安裝目錄中,有SDK Manager.exe程序,在命令行中啟動該程序。
在Tools->Manage AVDs中,創建一個新的Android模擬器。

image

最后就可以開始在Android平台上編譯和運行我們的的第一個PhoneGap程序了

image

image

啟動運行的結果:

image 

六,深入開發

上面的App顯示的畫面,其實就是我們創建的HelloWorld項目中的www目錄下的index.html

image

開發一個跨平台的應用程序,只是需要我們在www目錄下,做好web app就可以了。
這里的選擇就更多了,可以使用BootStrap, JqueryMobile………
另外,需要再系統學習一下PhoneGap中的如何調用系統API.


免責聲明!

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



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