上篇文章我們介紹了自定義外掛的開發流程，這篇文章我們就寫一個具體的例子，加深對自定義外掛的理解

自定義外掛的編寫

我們就在上篇文章中建立的外掛上做修改：

MyPlugin.js

var exec = require('cordova/exec');

var myAPI = {};

myAPI.func1 = function(arg0, success, error) {

    exec(success, error, "MyPlugin", "func1", [arg0]);
};

myAPI.func2 = function(arg0, arg1, success, error)
 
 {

    exec(success, error, "MyPlugin", "func2", [arg0,arg1]);
};

myAPI.func3 = function(success, error) {

    exec(success, error, "MyPlugin", "func3",[]);
};

module.exports = myAPI;

每個Plugin需要輸出(export)的介面都需要使用module.exports的命令來完成。也就是我們定義的東西都要通過module.exports宣告。使用exec()中的service引數必需和外掛plugin.xml中的featur定義的一致，也就是必須和我們的MyPlugin.java相對應。

這裡我定義了三個函式，分別是func1，func2，func3，它們對應的action為”func1”,”func2”,”func3”。

在這些函式中我們都直接執行了exec（）函式，這個函式就對應著java類中的execute（）方法。

MyPlugin.java

package com.test.helloworld;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import
 
 org.json.JSONObject;

import android.widget.Toast;

/**
 * This class echoes a string called from JavaScript.
 */
public class MyPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("func1")) {
            String message = args.getString(0);
            Toast.makeText(cordova.getActivity(), "func1傳過來的值是："+message, Toast.LENGTH_SHORT).show();
            callbackContext.success("成功的呼叫了func1");
            return true;
        }
        else if (action.equals("func2")) {
            String message0 = args.getString(0);
            String message1 = args.getString(1);
            Toast.makeText(cordova.getActivity(), "func2傳過來的值是："+message0+message1, Toast.LENGTH_SHORT).show();
            callbackContext.success("成功的呼叫了func2");
            return true;
        }
        else{
            callbackContext.error("錯誤的呼叫");
            return false;
        }


    }
}

這裡我們通過if (action.equals(“func1”)) 來判斷action的值，也就可以分辨出是哪個方法呼叫的這個函式。

對於func1，我們先從JSONArray args取出傳過來的引數陣列，然後呼叫原生Android的Toast將這個引數顯示出來，然後執行func1的success函式。func2同理，只不過是我們傳過來的引數個數不同，所以有些小區別罷了。

這裡我只識別了”func1”,”func2”，而”func3”並沒有相應的識別和處理，所以當我們執行func3函式時，我們java就對應的會執行

else{
    callbackContext.error("錯誤的呼叫");
    return false;
}

這裡就會執行func3傳過來的”error”方法的回撥。

現在我們的外掛部分的編寫就已經完成了。

在ionic專案中呼叫我們的外掛

外掛編寫完成後我們就可以將自定義的外掛安裝到ionic專案中去。

安裝完成後我們就在程式碼中呼叫我們的外掛。

我們還是直接在ionic新建時的那個demo中繼續修改，這裡我繼續用了之前演示相機外掛的那個Project（不知道是不是我的問題，ionic新建專案好久，所以一般不想新建專案）。

這裡做個補充：

當我們把自定義外掛安裝好後，我們可以檢視我們專案中的Android平臺程式碼對應的檔案：（專案根目錄\platforms\android\res\xml\config.xml）

可以發現這個檔案中出現了我們在外掛檔案plugin.xml中編寫的程式碼：

是不是證明了我們上篇文章中分析plugin.xml講的內容

tab-dash.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <p id="content">呼叫原生函式</p>
    <button ng-click="callFunc1()">呼叫func1</button>
    <button ng-click="callFunc2()">呼叫func2</button>
    <button ng-click="callFunc3()">呼叫func3</button>
  </ion-content>
</ion-view>

我寫了三個按鈕，分別觸發相應的點選事件，然後進行相應的處理。

controller.js

我們將controller檔案中的“DashCtrl”controller進行修改：

 .controller('DashCtrl', function($scope) {


    $scope.callFunc1 = function(){
      cordova.plugins.MyPlugin.func1("func1傳來的引數",
        function(msg) {
          setContent(msg);},//成功的回撥
        function(msg) {
          setContent("func1失敗了"+msg);
        });//失敗的回撥
    }


    $scope.callFunc2 = function(){
      cordova.plugins.MyPlugin.func2("func2傳來的引數0","func2傳來的引數1",
        function(msg) {
          setContent(msg);},//成功的回撥
        function(msg) {
          setContent("func2失敗了"+msg);});//失敗的回撥
    }

    $scope.callFunc3 = function(){
      cordova.plugins.MyPlugin.func3(
        function(msg) {
          setContent(msg);},//成功的回撥
        function(msg) {
          setContent("func3失敗了"+msg);
        });//失敗的回撥
    }
    var setContent = function(msg){
      document.getElementById("content").innerHTML=msg;
    }


  })

我們分別對三個按鈕寫了相應的事件處理。

其中

cordova.plugins.MyPlugin.func1(...);

就會呼叫我們在外掛js檔案中的

myAPI.func1 = function(arg0, success, error){}

當我們函式執行成功時，原生端就會回撥我們註冊過去的success回撥函式，即

function(msg) {
          setContent(msg);}

這裡我們就會修改<p id="content">呼叫原生函式</p>中的內容為msg變數的值。

這裡的程式碼都非常簡單，自己理解下就行了。

專案的執行效果如下：

注意事項

在工程根目錄下修改的外掛程式碼, 安裝完成外掛後無論修改的是js還是java部分,重新bulid是不會帶入平臺對應的資料夾下, 及修改不起作用,必須解除安裝外掛後重新安裝。

我自己試著直接修改ionic專案中plugin目錄中的程式碼，js和java都改了，發現並沒有作用，不知道是不是我姿勢不對。也許有直接修改的方法，歡迎指正。

總結

這個例子我是照著plugman命令生成的程式碼框架上直接修改的，貌似跟cordova和phonegap官網給的例子有所不同，我是直接學ionic外掛的，對於phonegap這些是0基礎，如果有什麼不對的地方，歡迎指出。