phonegap安裝 環境搭建與配置詳解(3.4 完整版 提供下載地址)

phonegap 3.4  安裝 環境搭建 完整版

 

剛剛接觸 phonegap 因為配環境遇到各種各樣問題.花了一下午時間才完成,所以寫一個篇文章希望能給大家節約點時間.

      本文主講windows系統下的phonegap的環境搭建 ,以android視角為主.ios使用者可參考;

 

首先介紹搭建環境的基本準備:

1 java JDK   (搜尋一下.......)

2 android SDK 最新版(我當時的版本是 API 19  點擊開啟連結)

3 Ant 打包工具  (百度一個或者 點擊開啟連結)

4 eclipse   (建議使用google的  因為內建ADT     點擊開啟連結 )

5 ADT (ecplise 裡的外掛程式,安卓開發工具外掛程式     下載上面的連結,內部整合了ADT)

6 Node.js   (點擊開啟連結)

7 sublime  點擊開啟連結 ;是我開發js h5 css 的工具;如果大家有好的開發軟體希望能告訴我一下謝謝

 

是Node.js安裝成功後

 

將以上配置好環境變數  (配置方法略 點擊 )

特別提一下需要配環境變數的東西:  java JDK  ; android SDK;Ant ; 

 

貼上我的 path 供大家參考:

 (建議配成 ;%ANT_HOME%\bin;  去掉\bin)

F:\工具\Ant\ant-1.8\bin;     

C:\Develop\sdk\sdk\platform-tools;C:\Develop\sdk\sdk\tools;%Android%\.;C:\Develop\nodejs;%JAVA_HOME%\bin;C:\Develop\nodejs\

 

擁有以上工具後 

 

 

接下來開始phonegap的安裝了

 phonegap 官網 點擊

 

 

在控制台運行命令：

 npm install -g phonegap                                     ( Mac使用: sudo npm install -g phonegap )

//等待安裝   完成後安裝 cordova:

 npm install -g cordova                                       ( Mac使用: sudo npm install -g cordova )

 

 

 

 

 

安裝完成後 
檢驗語句:

phonegap -version

cordova -version

 

 

 

在命令列 使用:

 phonegap create my-app cd my-app phonegap run android

 

第一個 phonegap寫的程式就出現了

 

在my-app 目錄下出現5個檔案夾     打包好的工程放在platforms裡面

檔案夾詳解:

 

www              : 檔案夾  開發的 HTML5 ; CSS ; JS 檔案都拷貝到這下面

plugins          : 檔案夾  存放的是phonegap外掛程式  以後 檔案,網路攝影機等外掛程式都下載到這裡,在下篇文章中介紹用法 

merges          : 我也沒用過  以後知道了再補上

platforms      : 檔案夾 存放的是編譯好後的android檔案   ,(如果這個檔案夾為空白,需要你在命令列編譯一次才能產生. 如上面 phonegap run android)

.cordova        : 存放的是設定檔 

 

 

將此檔案夾匯入 eclipse 就可以使用

phonegap 將以第三方庫的形式匯入

如果src檔案報錯 檢查是否是   phonegap的功能沒有匯入進來

 

匯入eclipse後  文本結構....打的camera 和 vibration 是 相機與鈴聲的外掛程式  下章節介紹

 

 

(圖 1)

 

是     phonegap的啟動頁面  調用 super.loadUrl(); 方法

 

 

public class baozi extends CordovaActivity {    @Override    public void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        super.init();        // Set by <content src="index.html" /> in config.xml//        super.loadUrl(Config.getStartUrl());        super.loadUrl("file:///android_asset/www/index.html");                      }}

 

在 super.loadUrl("  "); 中填寫你的啟動頁面

 

參數: " file:///android_asset/www/index.html " 

指的是( 圖  1)的  assets目錄下 www 檔案夾下的  index.html

 

 

 

貼上一張 工程匯入後的屬性圖

 

如果匯入工程報錯 請看

http://blog.csdn.net/aaawqqq/article/details/20463183

 

 

下一篇介紹 phonegap 外掛程式使用 

補上:  http://blog.csdn.net/aaawqqq/article/details/20401111