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 项目)

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


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


    进入Plugins目录.png
  3. 创建插件
    按照约定的插件参数,开始创建插件
plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0

创建成功,如下图所示:


插件目录结构.png

/src/目前是空目录

  1. 查看www/MyPlugin.js文件


    MyPlugin.js.png

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


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


    plugin.xml.png

    id="com.test.MyPlugin" 是指插件id;
    version="1.0.0" 是指插件版本;
    <name>MyPlugin</name> 是指插件名称;
    <js-module 标签指定公共JavaScript接口的路径;(即描述H5与原生的接口对应关系)
    <clobbers 标签指定了H5端调用插件时的对象,字符串可简化,此处我们改成“xyz”(真实项目中,此文本应根据约定,去定义,此处为了突出演示,所以定义成 xyz)


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

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

plugman platform add --platform_name android
终端命令.png
创建的java代码.png

查看默认的模板脚本(具体实现,后续介绍),如下图:


脚本.png
  1. 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
  1. 使用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
  2. 安卓端插件功能开发
    其实,也就是在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注释掉<head>标签中的第一个<meta>
5.3<body>中加入一个button,设置点击事件
5.4编写javascript,h5端调用我们自定义插件的方式:xyz.aaa(...)


index.html完整代码:

<!DOCTYPE html>
<html>
    <head>
        <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        --><meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <br><br><br>
            <button onclick="test()">aaa click</button><br><br><br>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script >

    function test(){
        xyz.aaa("AAA",function(msg){
            alert('原生返回了:'+msg);
        },function(e){
            alert(e);
        })
    }
</script>
    </body>
</html>

  1. 连上手机,运行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

推荐阅读更多精彩内容