【轉】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

 

 

 

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

 

工程下載    將phonegap的platforms導入到eclipse中  

若是報錯clear一下  查看導的lib包 有沒有報錯

若是還有錯  那麼就是您選用了  google的API   改爲最新版的android  API 就行了

若是導入工程遇到問題 能夠查閱我此篇文章

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

 

Phonegap解決錯誤:Error initializing Cordova:Class not found:

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