phonegap3.5外掛程式開發小demo

標籤：android   blog   http   java   使用   io   檔案   for   

      由於phonegap升級較快，在3.X之後改變了它的外掛程式機制，所有調用手機原生的功能全部以外部外掛程式的形式提供，建立phonegap項目之後不再能夠直接調用系統功能API如camera，device等，所以必須以外掛程式的形式引入到項目中來，才能夠使用。

     這裡主要講的是自訂外掛程式的開發及在項目中調用，關於怎麼使用別人已經寫好的外掛程式請參考官網http://docs.phonegap.com/en/3.3.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

首先看一下我們項目的一個目錄結構

說實話，使用命令列方式建立並匯入到eclipse裡面之後這個目錄結構並不是很清晰，變化較大。

接著，我們來建立一個自訂的外掛程式，在你的硬碟中如我的G盤建立一個目錄如

org.apache.cordova.echo，這個目錄就是存放你自訂外掛程式的根目錄，這個目錄下首先要建立一個Java檔案，既是你需要擴充的外掛程式的Java代碼，將其放置在org.apache.cordova.echo目錄下的src下面的android目錄下，代表的是在安卓平台下的代碼，在這個目錄下建立一個Echo.java檔案，代碼如下：

這裡的代碼就是需要執行的外掛程式代碼，作用是通過用戶端傳遞的參數再返回給用戶端，其中execute方法是必須的，供用戶端調用。

至此，我們的檔案夾下面的代碼結構為

這是第一步，Java代碼已經完成，

第二步需要在org.apache.cordova.echo目錄下建立一個www目錄，並在這個目錄下建立一個js檔案，取名叫echo.js,用來提供用戶端調用java代碼的橋樑，這個js代碼如下所示：

其中Echo.prototype.echo=function(success,error,str){

cordova.exec(sucess,error,‘Echo‘,‘echo‘,str)//‘Echo‘對應我們在java檔案中定義的類名，echo對應我們在這個類中調用的自訂方法，str是我們用戶端傳遞給這個方法的參數，是個數組

}

至於其他的圖function變數，我們完全可以自己定義。

至此，第二步已經完成，下一步是要寫一個plugin.xml檔案，用於命令列去進行外掛程式的註冊，在org.apache.cordova.echo檔案夾下建立一個plugin.xml檔案，代碼如下：

其中js-module指向的就是我們剛才所寫的js檔案的路徑，src指向www/echo.js,name屬性自己定義，clobbers代表我們在用戶端調用的時候的執行個體名。

下面最重要的platform節點代表每個平台下的配置，

 <source-file src="src/android/Echo.java" target-dir="src/org/apache/cordova/echo" /> 

src代表Java源檔案的地址，target-dir代表你要拷貝到項目中的地址

<config-file target="res/xml/config.xml" parent="/*">
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.echo.Echo"/>
</feature>
</config-file>

這個是使用命令列之後添加到config檔案中的節點，其中<param name="android-package" value="org.apache.cordova.echo.Echo"/>中的value代表從外掛程式中Java檔案的路徑及類名

以上就是plugin.xml檔案，至此，我們已經完成了一個自訂外掛程式的編寫，整個外掛程式檔案夾下面的目錄結構如下：

下面使用命令列將這個外掛程式添加到你的項目中去

在nodejs下面切換到你的項目目錄中去

如下所示：

 

表示外掛程式已經加入到了你的項目當中，再看看我們的項目結構，你會發現src下面多了我們剛才寫的源碼，以及config.xml和cordova_plugin.js的變化

在assets的www目錄下的plugins多出了我們剛才寫的js檔案

在cordova_plugins.js中多了一段關於外掛程式註冊的代碼

這些都是命令列cordova plugin add自動產生的，不用管，當然如果你不想使用命令列方式或者不具備命令列環境，你也可以手動修改以上檔案

至此，我們的項目中可以調用自訂代碼了

在index.html中寫入以下代碼

 

其中onsuccess代表成功執行的回調，onfailure代表失敗執行的回調,result參數代表java代碼返回的結果，["send to native"]是我們用戶端調用的時候給java代碼傳遞的參數，將這個事件在deviceReady中註冊給一個按鈕，點擊這個按鈕，結果如下：

這代表我們傳遞給java代碼的參數被它傳回給用戶端，實現了js對於Java原生代碼的調用。至此，我們一個小的自訂外掛程式就完成了，對於複雜的外掛程式功能需要Java代碼去支援，這裡就不贅述了，原理都是一樣的。

以上文章主要參考了以下資料：

1.csdn網友的部落格：http://blog.csdn.net/newborn2012/article/details/26258803

2.官網資料：http://docs.phonegap.com/en/3.3.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

3.iteye網友部落格：http://rensanning.iteye.com/blog/2029362