Cordova系列之插件的使用以及自定义插件

前言

在上一篇博客初探Cordova中介绍了下Cordova，并创建了个Cordova的项目运行了下，文章中也说到插件是Cordova比较核心的东西了，本篇博客主要开看一下插件怎么用以及怎么自定义插件

Cordova插件的使用

首先官方已经提供了一些插件，同时第三方插件也非常多，可以在 官方网页 上自己搜索需要的插件。
在这里插入图片描述

这里我就随便找两个插件用一用，插件的使用非常简单，按照文档来即可。

先用个电量状态的插件
按照文档走，需要先添加插件，在项目根目录执行命令即可

cordova plugin add cordova-plugin-battery-status

执行完毕后项目中会新增一些文件
首先是多了一个目录 org.apache.cordova ，里面存放了刚才新添加插件的Android代码。
在这里插入图片描述
然后config文件中也会增加相应的配置。

然后www目录中增加了插件相关的js代码

插件新增好之后我们就可以正常使用了。下面直接改下前端代码就可以了。
代码很简单

修改index.js

然后运行

可以看到，插件的使用非常简单，Cordova确实能极大的帮助开发者快速实现H5跟原生之前的通信。

下面我们再使用个相机的插件看看。
步骤一样，先添加插件

cordova plugin add cordova-plugin-camera

然后按照文档编写前端代码
在这里插入图片描述
编写js

运行
请添加图片描述

其他插件使用方式都类似，大致步骤都是先添加插件，然后调Api即可。

自定义Cordova插件

除了使用官方或三方提供的插件，很多时候我们还需要自定义插件去处理一些业务相关的逻辑。
首先还是先看一下官方对插件的定义：https://cordova.apache.org/docs/en/11.x/guide/hybrid/plugins/index.html

这里我挑重点说

Cordova插件就是js跟原生进行交互的桥梁，主要方向是js调原生
插件至少包含两部分，js代码和原生代码，js负责导出方法给前端调用，原生负责实现业务逻辑以及通知js执行结果
js调原生最终都是通过cordova.exec执行的

然后再去看一下 官方的安卓插件开发指南

同样直说重点

Android的插件类需要继承CordovaPlugin,重写execute(String action, JSONArray args, CallbackContext callbackContext) 方法，原生的业务逻辑在该方法中实现
js执行 cordova.exec 最终就是执行了原生这边的 execute 方法

知道了大致流程之后，就可以创建插件了,如果你对插件的目录及文件非常熟悉，当然是可以自己一个一个新建了，但是建议还是使用 官方提供的工具plugman 去创建，以免写错。

步骤如下

安装pluginman，建议使用 sudo npm install -g plugman 安装，以免出现权限问题
安装完毕后可以看下plugman有哪些指令，plugman -help , 然后plugman create -help
根据命令描述得知创建插件的指令就是 plugman create --name 插件名 --plugin_id 插件id --plugin_version 插件版本

那么就简单了，自己找一个合适的目录存放新建的插件，然后切换到该目录执行创建插件的命令，例如

plugman create --name CustomerPlugin  --plugin_id com-yzq-customer-plugin  --plugin_version 1.0.0

执行完毕后会创建一个目录，该目录就是插件的初步结构

在这里插入图片描述

其中，www下的CustomerPlugin.js就是上面说到的插件两部分中的js代码部分，负责导出方法给前端调用，内部执行了exec方法，稍微调整一下代码，方便后面调用

var exec = require('cordova/exec');

/**
 * 导出一个方法给前端调用 coolMethord就是方法名
 * @param arg0 传递的参数
 * @param success 成功的回调
 * @param error 失败的回调
 */
exports.coolMethod = function (arg0, success, error) {
    
    
    /**
     * CustomerPlugin 就是指定要调用原生的类名
     * coolMethod 是action，一般在原生代码中会根据该值进行判断执行不同的逻辑
     */
    exec(success, error, 'CustomerPlugin', 'coolMethod', [arg0]);
};

还有一个plugin.xml，主要是插件的配置，具体的配置项可以看 plugin.xml官方文档
配置说明如下

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com-yzq-customer-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>CustomerPlugin</name>
    <!--js-module指定进行通信的js接口 src就是接口文件的路径-->
    <js-module name="customer-plugin" src="www/CustomerPlugin.js">
        <!--clobbers target是前端调用时的名字，可自行更改-->
        <clobbers target="customer_plugin"/>
    </js-module>
</plugin>

好了，js部分的代码有了，下面就是添加各端的原生代码了，这里只演示Android平台。
首先在新建好的插件目录里执行 plugman platform add --platform_name android 命令，随后src目录中就会多出一个android目录，里面的CustomPlugin类就是我们Android同学需要写的代码了。
在这里插入图片描述

最后，执行 npm init -yes 来生成一个package.json ,创建完毕后自行修改package.json里的信息。
在这里插入图片描述

到这里，插件就创建好了。
下面就跟之前使用官方插件一样，把创建好的插件导入到项目中即可。

cordova plugin add 你的插件路径

执行完毕后回到Android项目中就会发现相应的文件都添加好了。
在这里插入图片描述
最后把目录结构调整下，记得config.xml里的配置要看一下是否正确。

剩下的就是一些业务代码了，先看CustomerPlugin里的代码

package com.yzq.cordovademo.plugin;

import android.widget.Toast;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;


/**
 * @author yuzhiqiang ([email protected])
 * @description 自定义的cordova插件
 * @date 2023/3/26
 * @time 15:09
 */

public class CustomerPlugin extends CordovaPlugin {
    
    

    /**
     * js 最终会调用到execute方法
     *
     * @param action          The action to execute.
     * @param args            The exec() arguments.
     * @param callbackContext The callback context used when calling back into JavaScript.
     * @return
     * @throws JSONException
     */
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    
    
        /*一般根绝传过来的action匹配，做不同的逻辑*/
        if (action.equals("coolMethod")) {
    
    
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
    
    
        Toast.makeText(cordova.getActivity(), "插件方法被调用了", Toast.LENGTH_SHORT).show();
        if (message != null && message.length() > 0) {
    
    
            /*成功回调给js*/
            callbackContext.success("nativa调用完成");
        } else {
    
    
            /*错误回调给js*/
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

原生代码写好之后剩下的就是前端调用就可以了，这里就简单用一下，还是在之前项目的基础上进行添加的代码。
页面很简单，加个按钮
在这里插入图片描述
js中正常调用即可

看下效果

请添加图片描述

可以看到，h5可以正常调用到原生的方法了。

至此，一个简单的自定义插件就完成了。

示例代码放到github上了，需要的可以自行查看： CordovaDemo

如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客，谢谢！