PhoneGap開發環境搭建

時間 2020-06-17

標籤 phonegap 開發環境搭建简体版

原文原文鏈接

項目中要用PhoneGap開發，瞭解了下基本規則，記錄一下，以備後查。(只針對Android平臺)

1、安裝

在安裝PhoneGap開發環境以前，須要先安裝如下框架：

1. Java SDK

2. Eclipse

3. Android SDK

4. ADT Plugin

5. PhoneGap

說明：

1.Java SDK直接下載安裝便可，沒什麼可說的，安裝不了就是人品問題了;

2.Eclipse 也是直接下載安裝，建議爲classic版的;

3.Android SDK和ADT Plugin安裝完成後，重啓eclipse進入Window->Android SDK Manager進行選擇要安裝的Android開發框架進行安裝

4.PhoneGap包不用安裝，直接解壓。

2、第一個PhoneGap項目

1.在eclipse中新建Android Project，名字神馬的隨便取吧；

2.在項目的目錄下，建兩個文件夾：

/libs

/assets/www

3.進入將剛剛下載並解壓的PhoneGap包裏Anroid目錄，咱們須要的資源都在這個目錄下。

將phonegap-x.x.x.js這個js文件(具體名稱視當時下載的版本而定)copy到/assets/www目錄下,

把phonegap.jar文件copy到/libs目錄下。

再把xml目錄copy到android項目的res目錄下。

4.在/assets/www下創建index.html文件，內容看起來像這樣：

<!DOCTYPE HTML> <html>
    <head>
        <title>PhoneGap</title>
        <script type="text/javascript" charset="utf-8" src="phonegap-x.x.x.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>

</html>

5.將如下權限配置的xml內容copy到AndroidManifest.xml文件中：javascript

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true"

/>

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_SMS" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.READ_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_CONTACTS" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />

6.將如下內容添加到AndroidManifest.xml文件的activity標籤中:

android:configChanges="orientation|keyboardHidden html

7.AndroidManifest.xml最後看起來會像這樣：

8.在剛剛新建的Android Project中找到libs目錄並在phonegap-x.x.x.jar上點擊右鍵，選擇 Build Path->Add to Build Path

9.最後再修改下src下的Java主文件：

1)添加import com.phonegap.*;

2)將類改爲繼承爲DroidGap;

3)刪掉import android.app.Activity;

4)把setContentView()這行替換爲super.loadUrl("file:///android_asset/www/index.html");

5)最後看起來就像這樣：

而後就能夠試着運行一下，成功的話會出現Hello World的界面。 java

3、PhoneGap Plugin

PhoneGap的插件機制其實就是一個android類導出爲jar文件，而後再被PhoneGap的項目引用，再經過js來調API：

1.建立一個Android Project;

2.打開Java主文件，將繼承的類改成Plugin;

3.引入如下類：

import com.phonegap.api.Plugin;    
    import com.phonegap.api.PluginResult;
    import com.phonegap.api.PluginResult.Status;

4.重寫父類的execute方法：android

public PluginResult execute(String action, JSONArray data, String callbackId) {        PluginResult pr=null;

         if(action.equals("method1")){

             pr=new PluginResult(Status.IO_EXCEPTION,"method1");

        }else if(action.equals("method2")){

             pr=new PluginResult(Status.OK,"method2");

        }

            

         return pr;
     }

其中，第一個參數action能夠做爲分類調用時的類型，咱們就能夠用該參數來實現多方法功能。

返回的PluginResult實例能夠經過狀態Status類型的控制來描述當前結果的執行狀態。

最後，代碼看起來可能像這樣：

5.將該類導出爲jar(在類文件上右鍵->Export->JAR File)

6.回到以前建立的PhoneGap項目中，按上面添加jar包的方法再將該jar添加到工程中。

7.在/res/xml/plugins.xml文件中添加如下內容：

<plugin name="PluginTest" value="aralork.moblie.plugin.PluginTest"/>

name是你在調用時要使用的類名，value是類在jar包中的全路徑

8.最後再打開assets/www/index.html文件，寫入相似於這樣的內容：

<script type="text/javascript" charset="utf-8" src="phonegap-x.x.x.js"></script>         <script type="text/javascript">

            PhoneGap.exec(successCallback, //成功後的回調方法

                     failureCallback, //失敗後的回調方法

                     'PluginTest',//剛纔配置的類名

                     'method1', //方法名稱，就是以前提到的action參數

                     ["/sdcard"]); //sdcard路徑

                     

            function successCallback(data){

                alert("data:"+data);

            }

            

            function failureCallback(data){

                alert("error:"+data);

            }

        </script>

相關連接：api

PhoneGap 官方網站：http://www.phonegap.com oracle

PhoneGap 插件示例： http://wiki.phonegap.com/w/page/36753494/How%20to%20Create%20a%20PhoneGap%20Plugin%20for%20Android

轉： http://www.cnblogs.com/Random/archive/2011/12/28/2305398.html