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

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

前言

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

Cordova插件的使用

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

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

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

cordova plugin add cordova-plugin-battery-status

执行完毕后项目中会新增一些文件
首先是多了一个目录 dova ，里面存放了刚才新添加插件的Android代码。

然后config文件中也会增加相应的配置。

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

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

修改index.js

然后运行

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

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

cordova plugin add cordova-plugin-camera

然后按照文档编写前端代码

编写js

运行

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

自定义Cordova插件

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

这里我挑重点说

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

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

同样直说重点

• Android的插件类需要继承CordovaPlugin,重写execute(String action, JSONArray args, CallbackContext callbackContext) 方法，原生的业务逻辑在该方法中实现
• js执行 < 最终就是执行了原生这边的 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 失败的回调*/
lMethod = function (arg0, success, error) {/*** CustomerPlugin 就是指定要调用原生的类名* coolMethod 是action，一般在原生代码中会根据该值进行判断执行不同的逻辑*/exec(success, error, 'CustomerPlugin', 'coolMethod', [arg0]);
};

还有一个l，主要是插件的配置，具体的配置项可以看
配置说明如下

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com-yzq-customer-plugin" version="1.0.0" xmlns=".0"xmlns: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项目中就会发现相应的文件都添加好了。

最后把目录结构调整下，记得l里的配置要看一下是否正确。

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

q.cordovademo.plugin;import android.widget.Toast;import dova.CordovaPlugin;
import dova.CallbackContext;import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;/*** @author yuzhiqiang (@gmail)* @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*/@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {/*一般根绝传过来的action匹配，做不同的逻辑*/if (action.equals("coolMethod")) {String message = String(0);lMethod(message, callbackContext);return true;}return false;}private void coolMethod(String message, CallbackContext callbackContext) {Toast.Activity(), "插件方法被调用了", Toast.LENGTH_SHORT).show();if (message != null && message.length() > 0) {/*成功回调给js*/callbackContext.success("nativa调用完成");} else {/*错误回调给js*/("Expected one non-empty string argument.");}}
}

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

js中正常调用即可

看下效果

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

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

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

下一篇：突破必须继承Activity的限制，支持在Fragment中使用Cordova以及任何个性化ui，组件化开发，简单易用，详情请看。 Cordova系列之化繁为简：打造全场景适用的Cordova组件

感谢阅读，觉有有帮助点赞支持，如果有任何疑问或建议，欢迎在评论区留言。如需转载，请注明出处：喻志强的博客 ，谢谢！