摘要

ionic2提供的native api已經(jīng)相當豐富，調(diào)用手機相機、調(diào)用本地SQLite等。但是事實上有些特殊的需求，還是需要我們自定義插件。我們目前的android PDA集成了二維碼掃描功能。但是掃描內(nèi)容的獲取需要調(diào)用設(shè)備生產(chǎn)商提供的api。

1.開發(fā)前準備

首先，需要安裝 plugman 插件，這個插件能幫我們方便的創(chuàng)建自定義組件
npm install -g plugman

2.新建組件

命令行進入Ionic2項目根目錄，運行下面的命令
plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1

--name 自定義插件的名稱
--plugin_id 自定義插件的包名

命令執(zhí)行后會在根目錄生成目錄
—MyPlugin
|——src
|——www
|——plugin.xml
目前為止src目錄是空目錄。

3.生成平臺（android/ios）插件代碼

插件的實現(xiàn)平臺不一樣代碼也不同，但過程是一樣的。給插件添加android支持(IOS 一樣)

cd MyPlugin
plugman platform add --platform_name android

命令運行后，可以發(fā)現(xiàn)MyPlugin/src目錄下出現(xiàn)了android目錄

MyPlugin插件

眼尖的你肯定看到了 MyPlugin.java，以前做過原生android開發(fā)的朋友肯定知道android app是用java開發(fā)的。打開MyPlugin.java文件

package com.plugin.myPlugin;

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

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

/**
 * 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("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

自定義插件需要繼承CordovaPlugin類，并且覆蓋execute方法。我們簡單看看這個類是什么意思，主要看方法execute(String action, JSONArray args, CallbackContext callbackContext)。 參數(shù)action是用來判斷執(zhí)行哪個方法，args是json格式的參數(shù)，callbackContext響應返回結(jié)果。

在www文件夾下有MyPlugin.js

var exec = require('cordova/exec');
export coolMethod = function(arg0, success, error) {
    exec(success, error, "MyPlugin", "coolMethod", [arg0]);
};

MyPlugin.js的作用是通過js暴露插件的功能給ionic。我們在ionic2中可以這樣調(diào)用插件。

cordova.plugins.MyPlugin.coolMethod(val,success => alert(success),error =>alert(error))

接下來我們新增一個 求和 的功能，生成app并安裝到手機上運行。鞏固上面的理論知識

修改MyPlugin.java

package com.plugin.myPlugin;

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

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

/**
 * 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("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }else if(action.equals("plus")) {
            int x = args.getInt(0);
            int y = args.getInt(1);
            this.plus(x,y, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success("TS傳入的值："+message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }

    //傳入兩個參數(shù)求和
    private void plus(int x,int y,CallbackContext callbackContext){
        callbackContext.success(x+y);
    }
}

修改MyPlugin.js

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

var myAPI = {}

myAPI.coolMethod = function(arg0, success, error) {
    exec(success, error, "MyPlugin", "coolMethod", [arg0]);
};
//求和方法
myAPI.plus = function(arg0,arg1, success, error) {
    exec(success, error, "MyPlugin", "plus", [arg0,arg1]);
};

module.exports = myAPI;

到這里我們的cordova求和插件編寫完畢，然后運行命令將插件安裝到ionic2項目中
ionic plugin add ../MyPlugin

因為當前所在路徑已經(jīng)在MyPlugin插件根目錄，如果在項目根目錄，則運行 ionic plugin add MyPlugin

命令運行完畢后，可以看到項目plugin目錄下出現(xiàn)了我們的自定義插件，說明插件安裝成功

自定義插件安裝成功

OK，接下來就是使用我們的插件了。上代碼不比比

import { Component } from '@angular/core';

declare let cordova: any;   //ionic2調(diào)用自定義插件這里這么寫

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {

...
  //調(diào)用自定義插件
  callMyPlugin(){
    cordova.plugins.MyPlugin.plus(2,3,result =>{
      alert(result);
    },error =>alert(error))
  }
...
}

運行命令生成app并安裝到手機

ionic build android --prod

手機運行后，得到運算結(jié)果 5

手機運行截圖

至此，ionic2自定義插件如何編寫，以及編寫后如何將插件安裝到ionic2，并且程序中調(diào)用自定義插件都了然了。

接下來是實際操作中需要注意的一些總結(jié)

在ionic2項目根目錄運行下面的命令
ionic plugin list 列出所有已安裝的插件
ionic plugin remove com.xxx.myPlugin 從ionic2項目中刪除插件
ionic plugin add MyPlugin 安裝插件到ionic2項目

*注意：插件修改后必須先刪除插件，然后再安裝插件才可生效