PhoneGap安裝配置

　　PhoneGap是一可以讓你用普通NewsShow的web技術編寫出可以輕鬆調用API接口和進入應用商店的HTML5應用開發平臺。是惟一的一個支持7個平臺的開源移動框架。它的優點是無以倫比的：開發成本低——據估算，至多Native App的五分之一！
　　PhoneGap中文平臺：http://www.phonegapcn.com/

1、PhoneGap簡介

2、 PhoneGap是如何作到的?

3、安裝PhoneGap（Cordova）環境

1、PhoneGap簡介

　　PhoneGap是一個用基於HTML，CSS和JavaScript的，建立移動跨平臺移動應用程序的快速開發平臺。它使開發者可以利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯繫 人，聲音和振動等，此外PhoneGap擁有豐富的插件，能夠調用。如今PhoneGap的代碼已經貢獻給了Apache軟件基金會（ASF），而且更名爲 Apache Cordova。這個名字來源於溫哥華的科爾多瓦街（Cordova Street），它是建立PhoneGap時Nitobi公司的所在地。

2、PhoneGap是如何作到的？

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

 

3、安裝PhoneGap（Cordova）環境

　　Apache Cordova官網安裝文檔: http://cordova.apache.org/docs/en/3.5.0//guide_cli_index.md.html#The%20Command-Line%20Interface

　　這裏我爲你們整理一下安裝流程，由於個人開發環境是android，因此以android開發平臺爲例：

　　第一步，配置安裝的準備工做:

　　分別下載安裝最新的JDK、Android SDK、Apache Ant

　　JDK下載地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

　　Android SDK下載地址：http://developer.android.com/sdk/index.html

　　Apache Ant下載地址：http://ant.apache.org/bindownload.cgi

　　安裝完成以後，配置好環境變量。

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

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

　　

　　

 

　　這裏有個問題要注意：在建立Android模擬器時，可能會遇到，調加不了設備，那麼咱們這時候要去檢索，第一種圖片裏面的是否有要安裝的install packages

 

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

cordova emulate android   //啓動android 虛擬機

　　

　　第二步，命令行安裝配置cordova項目：

　　首先下載安裝 node.js 

　　全局安裝 cordova：

npm install -g cordova

　　建立App:

cordova create hello com.example.hello HelloWorld

• 第一個參數hello表示在工程目錄中建立一個 hello 的文件夾
• 第二個參數com.example.hello表示包名（反向域名），用於標誌不一樣的 app
• 第三個參數HelloWorld表示項目的名稱，能夠在 config.xml 文件中修改

　　添加平臺:

　　進入建立的項目中：

cd hello

　　查看已經安裝的平臺和支持的平臺：

cordova platforms list

　　在 windows 下，能夠經過如下命令添加支持的平臺：

cordova platform add wp7
cordova platform add wp8
cordova platform add windows8
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos

　　固然，也能夠刪除不想要的平臺：

cordova platform remove android
cordova platform rm android

　　這裏注意，window的只能開發andriod app 項目，不能開發ios的。

　　編譯項目

　　經過下面命令，便可編譯項目：

cordova build android

　　編譯完成後能夠看到 platforms/android/bin/ 下已經生成了 apk 文件，會發現assets底下多了個www文件夾，爲咱們寫css。html，js的目錄，而後res下面的www文件夾能夠刪掉了。

　　測試、運行項目

　　啓動 android 虛擬機：

cordova emulate android

　　運行 app 項目（在虛擬機或者在真機）：

cordova run android

　　運行結果:

　　

　　參考資料：

　　phonegapcn中國：http://www.phonegapcn.com/

　　cordova官網：http://cordova.apache.org/docs/en/3.5.0//guide_cli_index.md.html#The%20Command-Line%20Interface　　　

　　cordova教程： https://ccoenraets.github.io/cordova-tutorial/　　　　　　　　　　　　　

　　cordova 初識之命令行工具：http://wenzhixin.net.cn/2014/02/11/cordova_command_line

　　個人PhoneGap安裝配置經歷：http://www.it165.net/pro/html/201407/17784.html

　　PhoneGap入門教程(1) - 環境搭建與配置：http://www.zwlme.com/frontend/phonegap-getting-started-tutorial-1.html