Android H5混合开发（2）：自定义Cordova插件

前言

Cordova虽然定义了很多基础的插件，供H5端使用原生设备的功能。
但是，如果业务相关的功能，需要提供给H5端使用，那么，就需要我们自定义插件了。

这个“自定义”不是指由Android端任意定义，一般需要各端（H5、原生）讨论来决定，如：插件的名称、action等。

模拟需求

插件信息：
      插件名称：MyPlugin
      插件id: com.test.MyPlugin
      插件版本：1.0.0
      action: aaa

插件交互方式：当h5调用时，原生toast弹出h5传入的数据，并返回响应的结果。

创建插件

使用上一篇文章的目录（Android H5混合开发（1）：构建Cordova 项目）

我们在TestCordova目录下，创建存放自定义插件的目录Plugins

新建Plugins目录.png
打开终端，输入命令，进入Plugins目录

进入Plugins目录.png
创建插件
按照约定的插件参数，开始创建插件

plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0

创建成功，如下图所示：

插件目录结构.png

/src/目前是空目录

查看www/MyPlugin.js文件

MyPlugin.js.png

'MyPlugin'指的是Android端实现该插件的.java类名
'coolMethod'指的是action的名称，此处我们需要修改成约定的 ‘aaa’
修改后，如下图：

MyPlugin.js.png
查看配置文件plugin.xml

plugin.xml.png

id="com.test.MyPlugin" 是指插件id；
version="1.0.0" 是指插件版本；
MyPlugin 是指插件名称；

plugin.xml.png
根据配置文件，生成java代码
使用终端，输入命令，进入MyPlugin目录

cd MyPlugin

使用终端，输入命令，生成java代码

plugman platform add --platform_name android

终端命令.png

创建的java代码.png

查看默认的模板脚本（具体实现，后续介绍），如下图：

脚本.png

build 插件
通过终端，输入命令，会创建package.json文件

npm init

根据需要，终端中填写package.json的相关属性。
因为，此Demo只是演示，所以没有填写属性，全部直接点击了回车（即：默认值）。

终端命令.png

创建的package.json文件，如下图所示：

插件目录.png

package.json

plugin.xml

至此，插件创建完成。

将插件导入Cordova工程的安卓项目中

1.通过终端，执行命令，进入cordova工程目录/TestPlugin/myapp/

cd cordova项目目录路径

2.通过终端，执行命令，将插件加入到各平台的项目中

cordova plugin add 插件的本地路径

执行命令，结果报错了.png

问题原因：gradle版本权限的问题
解决办法：设置gradle权限
终端命令：chmod +x platforms/android/gradlew

gradle问题解决，重新执行命令，插件成功加入各平台项目中.png

使用AndroidStuido打开安卓项目，目录：/myapp/platforms/android/

项目目录.png

经过了cordova plugin add命令，我们可以看到，在/assets/www下面，已经包含了我们导入的插件信息。
3.1 cordova_plugins.js 的module.exports（数组）描述了插件列表的信息（用到的插件都需要在module.exports数组里面配置）：

插件描述文件.png

3.2 Myplugin.js描述了单个插件的具体信息（代码没什么变化，其实就是直接拷贝过来的）：

Myplugin.js.png

3.3 /res/xml/config.xml 也导入了该插件的相关信息：

config.xml.png

3.4 /src/下自动导入了Java模板代码MyPlugin.java：

MyPlugin.java.png
安卓端插件功能开发
其实，也就是在MyPlugin.java类中按照需求实现相关的功能：

import android.widget.Toast;

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

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

public class MyPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("aaa")) {
            String message = args.getString(0);
            this.aaa(message, callbackContext);
            return true;
        }
        return false;
    }

    private void aaa(String message, CallbackContext callbackContext) {
        //弹框
        Toast.makeText(cordova.getActivity(),"aaa",Toast.LENGTH_LONG).show();
        //h5端传给我什么参数，此处再传回去
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

5.H5端开发测试页面，然后同步（或拷贝）给安卓项目使用
直白点，就是H5端做好开发，将WWW目录的内容同步给我们的/assets/www/即可。但是，此处只是个简单的Demo，所以没必要麻烦H5端了，咱们自己写代码实现吧：
5.1首先打开assets/www/index.html文件，删掉多余的注释

index.html.png

5.2注释掉标签中的第一个
5.3中加入一个button，设置点击事件
5.4编写javascript，h5端调用我们自定义插件的方式：xyz.aaa(...)

index.html完整代码：



    
        
        
        
        
        Hello World
    
    
        
            Apache Cordova
            
                Connecting to Device
                Device is Ready

连上手机，运行androidstudio，点击【aaa click】按钮，如下图：

运行结果.jpg

总结

本篇文章，主要演示了cordova插件的自定义过程和插件的使用，比较基础，没有涉及过多复杂的事情，如果有不明白的地方，建议去官网多查查资料。
https://cordova.apache.org/docs/en/latest/
需要使用Cordova童鞋，最好先跟着例子多练习几遍，熟能生巧。
后续会介绍更多的Cordova使用技巧。
本次Demo的源码下载地址：https://pan.baidu.com/s/1YmMw2zO7goF7MDViB1wZ2Q

第一篇：Android H5混合开发（1）：构建Cordova 项目

https://www.jianshu.com/p/058a0dd7f809

第二篇：Android H5混合开发（2）：自定义Cordova插件

https://www.jianshu.com/p/8fcbf06a4c3a

第三篇：Android H5混合开发（3）：原生Android项目里嵌入Cordova

https://www.jianshu.com/p/e306ae0f1f03

第四篇：Android H5混合开发（4）：构建Cordova Jar包

https://www.jianshu.com/p/447d41a1299d

第五篇：Android H5混合开发（5）：封装Cordova View

https://www.jianshu.com/p/13a0fbaa3227