自定义Cordova插件—SweetAlertDialogPlugin

最近公司把我从android组调到前端组来开发前端，公司用的框架是angularJS+ionic+cordova，我们知道用js写移动端，需求中免不了要调用android的相机、GPS、音频播放等功能，这时候我们就需要js和Java交互了，通过这个办法来调用android API。因此cordova给我提供了丰富的插件库，对于常用的插件我们可以去ngcordova官网看plugins，但是性能优化，很多的插件是满足不了我们实际开发的需要的，这时候我们怎么办呢，最好的办法就是自定义属于我们自己的插件。本篇博客为自定义插件抛砖引玉，来了解一下plugin到底是怎么写出来的。因为我主要做android，对于Java代码还是比较熟悉的，在开发过程中，通过使用

$ cordova plugin add xxx.xx.xx.cordova-plugin.imagePicker

cordova的插件时，在已添加的android platform中竟然插件完全变得跟android中library，这个让我很振奋，我想这样的话，我倒推回去，我写了很多的比较好的android library 按照道理同样可以写成插件来给自己用。所以经过我深入研究，发现这个是可以很容易实现的。恩恩，看到博客标题就知道我带着大家来实现一个关于dialog的plugin。

首先，我们来观察这个插件的构成。

[SweetAlertDialogPlugin github地址]
(https://github.com/Eddieyuan123/SweetAlertDialog)

src目录下有 android platform，android下有SweetAlertDialogPlugin.java文件，www下有SweetAlertDialogPlugin.js，根目录下有plugin.xml。因此得出结论插件必须要有这个文件。

plugin.xml

<?xml version='1.0' encoding='utf-8'?><plugin id="cn.pedant.sweetalert" version="1.0.0"        xmlns="http://apache.org/cordova/ns/plugins/1.0"        xmlns:android="http://schemas.android.com/apk/res/android">  <name>SweetAlertDialog</name>  <js-module name="SweetAlertDialog" src="www/SweetAlertDialog.js">    <clobbers target="window.plugins.SweetAlertDialogPlugin" />  </js-module><platform name="android">  <config-file parent="/*" target="res/xml/config.xml">    <feature name="SweetAlertDialogPlugin">      <param name="android-package" value="cn.pedant.sweetalert.SweetAlertDialogPlugin" />    </feature>  </config-file>  <config-file parent="/*" target="AndroidManifest.xml"></config-file>  <source-file src="src/android/SweetAlertDialogPlugin.java" target-dir="src/cn/pedant/sweetalert" />  <source-file src="src/android/OptAnimationLoader.java" target-dir="src/cn/pedant/sweetalert" />  <source-file src="src/android/Rotate3dAnimation.java" target-dir="src/cn/pedant/sweetalert" />  <source-file src="src/android/SuccessTickView.java" target-dir="src/cn/pedant/sweetalert" />  <source-file src="src/android/SweetAlertDialog.java" target-dir="src/cn/pedant/sweetalert" />  <source-file src="src/android/anim/dialog_scale_in.xml" target-dir="res/anim" />  <source-file src="src/android/anim/dialog_scale_out.xml" target-dir="res/anim" />  <source-file src="src/android/anim/error_frame_in.xml" target-dir="res/anim" />  <source-file src="src/android/anim/error_x_in.xml" target-dir="res/anim" />  <source-file src="src/android/anim/success_bow_roate.xml" target-dir="res/anim" />  <source-file src="src/android/anim/success_mask_layout.xml" target-dir="res/anim" />  <source-file src="src/android/drawable/blue_button_background.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/custom_img.jpg" target-dir="res/drawable" />  <source-file src="src/android/drawable/dialog_background.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/error_center_x.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/error_circle.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/gray_button_background.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/red_button_background.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/success_bow.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/success_circle.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/warning_circle.xml" target-dir="res/drawable" />  <source-file src="src/android/drawable/warning_sigh.xml" target-dir="res/drawable" />  <source-file src="src/android/values/alert_strings.xml" target-dir="res/values" />  <source-file src="src/android/values/alert_styles.xml" target-dir="res/values" />  <source-file src="src/android/values/attrs.xml" target-dir="res/values" />  <source-file src="src/android/values/alert_colors.xml" target-dir="res/values" />  <source-file src="src/android/layout/alert_dialog.xml" target-dir="res/layout" /></platform></plugin>

这个文件的作用就是js和android的一些配置。下面慢慢来解释：

<js-module name="SweetAlertDialog" src="www/SweetAlertDialog.js">    <clobbers target="window.plugins.SweetAlertDialogPlugin" />  </js-module>

和Java交互的js文件，clobbers属性在angularJS中引用的名字。如何使用下面会详细说。

<config-file parent="/*" target="res/xml/config.xml">    <feature name="SweetAlertDialogPlugin">      <param name="android-package" value="cn.pedant.sweetalert.SweetAlertDialogPlugin" />    </feature>  </config-file>

param属性的value值代表的是包下的class文件，名字是SweetAlertDialogPlugin，这里要特别注意，因为我刚刚开始写插件的时候这里犯错了。

下面的一些代码就是把src中的这些文件添加到android platform中各个文件夹中，学过android的一看就懂。比如

<source-file src="src/android/layout/alert_dialog.xml" target-dir="res/layout" />

就是把alert_dialog.xml 这个布局文件复制到layout文件下。

SweetAlertDialogPlugin.java

package cn.pedant.sweetalert;import com.ionicframework.tradeweb716543.TradeApp;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 SweetAlertDialogPlugin extends CordovaPlugin {    @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {        if (action.equals("createNomalDialog")) {            String message = args.getString(0);            this.createNomalDialog(message, callbackContext);            return true;        }        return false;    }    private void createNomalDialog(String message, CallbackContext callbackContext) {        if (message != null && message.length() > 0) {            new SweetAlertDialog(TradeApp.getInstance().getActivity(),                    SweetAlertDialog.NORMAL_TYPE)                    .showCancelButton(true)                    .setTitleText("sweet love")                    .setContentText("sweet sweet love")                    .show();            callbackContext.success(message);        } else {            callbackContext.error("Expected one non-empty string argument.");        }    }}

SweetAlertDialogPlugin.js

var exec = require('cordova/exec');var SweetAlertDialogPlugin = function(){};SweetAlertDialogPlugin.prototype.createNomalDialog = function(arg0, success, error) {  return exec(success, error, "SweetAlertDialogPlugin", "createNomalDialog", [arg0]);};var sweetAlertDialogPlugin = new SweetAlertDialogPlugin();module.exports = sweetAlertDialogPlugin;if(!window.plugins){  window.plugins = {};}if(!window.plugins.SweetAlertDialogPlugin){  window.plugins.SweetAlertDialogPlugin = sweetAlertDialogPlugin;}

这两个文件要一起看，过程是这样的，我们用js这个createNomalDialog函数通过exec函数映射到sweetAlertDialogPlugin.java，找到sweetAlertDialogPlugin这类和createNomalDialog方法来执行，然后类通过callbackContext.success(message)，callback回来。

整个插件的结构就是这样，分析清楚了，如何做才是重点，有两种方式，第一种肯定手写这3个文件。第二种可以通过plugman命令来管理插件。

1】执行安装命令，这个要在安装了nodeJS,cordova后才有用。

npm install -g plugman

2】新建一个插件SweetAlertDialogPlugin
plugman create –name –plugin_id –plugin_version [–path ] [–variable NAME=VALUE]
把其中的替换为 SweetAlertDialogPlugin;
替换为 cn.pedant.sweetalert
替换为 1.0.0
在终端中输入：
plugman create –name SweetAlertDialogPlugin –plugin_id cn.pedant.sweetalert –plugin_version 1.0.0
执行命令后会在当前目录下生成一个文件夹SweetAlertDialog。这里id和version对应上面plugin.xml中的id和version。

3】接着在终端中继续输入：
cd SweetAlertDialogPlugin
然后输入：
plugman platform add –platform_name android
这时候查看我们的SweetAlertDialog目录下的 src会新增一个目录android里面会有一个java文件：SweetAlertDialogPlugin .java
，当然这是一个生成的文件，因此我修改了成自己的Java代码。
上面我贴出来的代码就是我修改过的。

4】测试，添加插件

cordova plugin add SweetAlertDialog

这时在cordova自动帮你把src中的文件复制一份到android和iOS。继续看代码

window.plugins.SweetAlertDialogPlugin.createNomalDialog("messge",function(success){alert(success);},function(error){alert(error);})

上面提到

<clobbers target="window.plugins.SweetAlertDialogPlugin" />

在前端代码中就是这样用的。

好了，插件就这样可以用了。