在开始这篇文章之前，首先提出几个问题，带着这些问题，我们去一点一点解开Cordova插件面纱。
- 什么是cordova插件？
- cordova插件能做什么？
- 为什么需要自定义cordova插件?
- 如何自定义插件？
什么是Cordova插件
cordova是一个注入代码包,允许Cordova webview在其中呈现的应用程序与运行它的本机平台进行通信，提供基于web的应用程序与设备和平台功能的访问，所有主要的Cordova API功能都作为插件实现，通俗点来说，cordova插件是连接web应用程序和设备平台之间的一个桥梁。
Cordova插件能做什么
正常情况下，web应用程序无法直接获取手机设备信息，例如电池状态，文件，媒体，对话框等。但是web应用程序可以通过cordova插件提供的API,实现对设备平台的访问。
为什么需要自定义Cordova插件
大部分情况下，你可以在Cordova Plugin Search和GitHub中找到你程序所需要的插件。但是我们所开发的应用程序依托于我们业务逻辑，这时就需要我们去自定义cordova插件了。
如何自定义插件
说了这么多，各位小伙伴是不是都想打我了，别着急，Cordova之自定义插件马上开始。
敲黑板了，小伙伴们注意了
创建项目
首先我们创建一个HelloWorld项目，这里我们从简，具体详细过程可参考上篇文章Cordova从入门到放弃（一）,创建HelloWorld项目，添加android平台。
$ cordova create hello com.hello.demo HelloWorld
$ cd hello
$ cordova platform add android --save
自定义插件
- 首先安装
plugman,cordova需要用它来创建插件,可使用node命令来安装
$ npm install -g plugman
-
plugman安装成功后就可以创建插件了,这里我们学习自定义一个Toast插件，基本学会之后，大部分插件都是一个套路了。
$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]
$ plugman create --name Toast --plugin_id toast_plugin --plugin_version 1.0.0
$ cd Toast
- 进入
Toast目录下之后，我们添加插件支持的平台
$ plugman platform add --platform_name android
$ plugman platform add --platform_name ios
- 运行之后，会分别创建
android的Toast.java文件和ios的Toast.m两个文件，分别对应在android和ios文件夹下，这里我们只看android的代码，所以只添加了android平台
这时我们打开plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns:android="http://schemas.android.com/apk/res/android"
id="toast_plugin"
version="1.0.0"
xmlns="http://apache.org/cordova/ns/plugins/1.0">
<name>Toast</name>
<!--模块名称-->
<js-module
name="Toast"
src="www/Toast.js"> <!--js中间件相对文件地址（www目录下的那个js）-->
<!--H5通过它调用js中间件方法（js调用方法的前缀）可自定义-->
<clobbers target="cordova.plugins.Toast" />
</js-module>
<!--添加的Android平台 -->
<platform name="android">
<config-file
parent="/*"
target="res/xml/config.xml"> <!--插件文件复制到到原生项目位置-->
<!-- JS文件中对应字段 -->
<feature name="MyToast">
<!-- .java类名全路径 可自定义路径，添加会后生成新的包路径 js中间件通过它调用原生方法（包名）-->
<param
name="android-package"
value="org.apache.cordova.toast.Toast" />
</feature>
</config-file>
<config-file
parent="/*"
target="AndroidManifest.xml"></config-file>
<!-- src:java源文件的路径， target-dir:插件安装好后，源文件的位置，要和上面的包名对应 -->
<source-file
src="src/android/Toast.java"
target-dir="src/org/apache/cordova/toast" />
</platform>
</plugin>
-
plugin.xml文件配置好之后，我们再来看看Toast.java文件
public class Toast 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.");
}
}
}
- 其中
execute是必须重写的方法，会有三个构造方法，按需重写自己需要的，execute方法中的action参数是和Toast.js关联使用的，args是js返回的参数，callbackContext是对js的回调，最后我们修改下代码。
public class Toast extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("showToast")) {
String message = args.getString(0);
this.showToast(message, callbackContext);
return true;
}
return false;
}
private void showToast(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
Activity activity = this.cordova.getActivity();
android.widget.Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
- 再打开
www/Toast.js修改
//showToast为安装后js调用的方法名，参数可以为任意多个
exports.showToast = function(msg, success, error) {
// success error 为成功 失败回调
// MyToast 为 plugin.xml 中配置的 feature 的name名
//"showToast"为给Toast.java判断的action名
exec(success, error, "MyToast", "showToast", [msg]);
};
web界面调用可通过
<!-- js 调用-->
cordova.plugins.Toast.showToast('Helloworld',success,error);
- 基本流程，当一个
web界面调用Cordova插件的过程，会通过plugin.xml中的clobbers标签
找到相对应的js文件的函数名，通过exec中第三个参数去找到plugin.xml下的feature标签，从而找到定义的java文件，再通过exec中的第四个参数，去找对应java类下action相同的方法，整个插件运行流程基本是这个样子。 - 正常情况下，到这一步，基本整个插件就已经完成了，但是你在项目中添加插件时会提示你创建
package.json文件，而plugman没有给我们创建这个的文件，所有就需要我们自己动手去创建，通过npm init命令创建package.json，里面的参数从plugin.xml拿来使用就好,也可以一路回车，这样一个插件就完成了。
{
"name": "toast",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
安装插件
可以使用上篇文章中创建的Cordova项目来测试
$ cordova plugin add /Users/cordova/Toast
最后，可在index.html中写个button按钮测试所写的插件是否合适。
附
删除插件
cordova plugin remove XXXXX(你的plugin_id)
查看所有插件
cordova plugin list
