ionic2自定义插件与插件的调用

摘要

ionic2提供的native api已经相当丰富，调用手机相机、调用本地SQLite等。但是事实上有些特殊的需求，还是需要我们自定义插件。我们目前的android PDA集成了二维码扫描功能。但是扫描内容的获取需要调用设备生产商提供的api。

1.开发前准备

首先，需要安装 plugman 插件，这个插件能帮我们方便的创建自定义组件
npm install -g plugman

2.新建组件

命令行进入Ionic2项目根目录，运行下面的命令
plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1

--name 自定义插件的名称
--plugin_id 自定义插件的包名

命令执行后会在根目录生成目录
—MyPlugin
|——src
|——www
|——plugin.xml
目前为止src目录是空目录。

3.生成平台（android/ios）插件代码

插件的实现平台不一样代码也不同，但过程是一样的。给插件添加android支持(IOS 一样)

cd MyPlugin
plugman platform add --platform_name android

命令运行后，可以发现MyPlugin/src目录下出现了android目录

MyPlugin插件

眼尖的你肯定看到了 MyPlugin.java，以前做过原生android开发的朋友肯定知道android app是用java开发的。打开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)。 参数action是用来判断执行哪个方法，args是json格式的参数，callbackContext响应返回结果。

在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中可以这样调用插件。

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.");
        }
    }    //传入两个参数求和
    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

因为当前所在路径已经在MyPlugin插件根目录，如果在项目根目录，则运行 ionic plugin add MyPlugin

命令运行完毕后，可以看到项目plugin目录下出现了我们的自定义插件，说明插件安装成功

自定义插件安装成功

OK，接下来就是使用我们的插件了。上代码不比比

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

declare let cordova: any;   //ionic2调用自定义插件这里这么写@Component({  selector: 'page-hello-ionic',  templateUrl: 'hello-ionic.html'})export class HelloIonicPage {

...  //调用自定义插件
  callMyPlugin(){
    cordova.plugins.MyPlugin.plus(2,3,result =>{
      alert(result);
    },error =>alert(error))
  }
...
}

运行命令生成app并安装到手机

ionic build android --prod

手机运行后，得到运算结果 5

手机运行截图

至此，ionic2自定义插件如何编写，以及编写后如何将插件安装到ionic2，并且程序中调用自定义插件都了然了。

接下来是实际操作中需要注意的一些总结

在ionic2项目根目录运行下面的命令
ionic plugin list 列出所有已安装的插件
ionic plugin remove com.xxx.myPlugin 从ionic2项目中删除插件
ionic plugin add MyPlugin 安装插件到ionic2项目

---

*注意：插件修改后必须先删除插件，然后再安装插件才可生效

作者：蓝山牧童
链接：https://www.jianshu.com/p/e151a3c2f652