摘要
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.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项目
*注意：插件修改后必须先删除插件，然后再安装插件才可生效