(轉)PhoneGap開發環境搭建

(原)http://www.cnblogs.com/Random/archive/2011/12/28/2305398.htmljavascript

PhoneGap開發環境搭建html

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

 

1、安裝
在安裝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>java

複製代碼
 
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" />  android

複製代碼

 

 

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

android:configChanges="orientation|keyboardHidden api

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

 

 

 
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;app

 

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起來了。。。。。。。dom

 

相關連接:eclipse

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

相關文章
相關標籤/搜索