Cordova之自定义插件

在开始这篇文章之前，首先提出几个问题，带着这些问题，我们去一点一点解开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