1. 程式人生 > >PhoneGap開發環境搭建

PhoneGap開發環境搭建

www small world type 調用 全路徑 android平臺 com read

項目中要用PhoneGap開發,了解了下基本規則,記錄一下,以備後查。(只針對Android平臺) 一、安裝 在安裝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包不用安裝,直接解壓。

二、第一個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文件中:

<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

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的界面。

三、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方法:
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>

人品沒問題的話,這樣就能run起來了。。。。。。。

PhoneGap開發環境搭建