Cordova插件的简单使用

上一篇博客，写道了 Cordova 插件的创建，接下来讲一下简单使用。

ps. 这里最好在创建的那个插件上修改下面内容，做完之后再安装一下插件，android 里面的代码也会更新。

插件功能

这里希望在网页上加一个按钮，点击一下就触发一个 Toast，修改插件 www 目录下的 Test.js 文件，修改其中方法如下：

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

exports.toastSomething = function (arg0, success, error) {
    exec(success, error, 'Test', 'toastSomething', [arg0]);
};
1
2
3
4
5

其中 success, error 是成功失败的回调，Test 是插件名，toastSomething 是一个 action，可以近似认为是方法（可以通过反射去调用方法），可以通过 arg0 传递参数。

网页设置

上面插件已经提供了一个叫 toastSomething 的功能，现在在 H5 上去调用它。

修改项目 www 目录下的的 index.html 文件，增加一个 button，设置好 id：

<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 Worldtitle>
    head>
    <body>
        <div class="app">
            <h1>Apache Cordovah1>
            <button id="button">点击触发Toastbutton>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Devicep>
                <p class="event received">Device is Readyp>
            div>
        div>
        <script type="text/javascript" src="cordova.js">script>
        <script type="text/javascript" src="js/index.js">script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

接着在修改 www 目录下的 js，为 button 增加一个点击事件：


//点击事件
document.getElementById('button').addEventListener('click', function () {
    cordova.plugins.Test.toastSomething('click from h5') 
})
1
2
3
4
5

直接在末尾追加就行，很简单的逻辑，点击就调用插件的方法。

原生响应

在 h5 里面调用插件的方法后，原生的插件就会被调用，在 Android 项目中的插件修改：

public class Test extends CordovaPlugin {

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

    private void toastSomething(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            Activity activity = this.cordova.getActivity();
            Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

就是读取 action，选择对应的方法并执行，可以从 args 里面取出传过来的参数，即上面传递的 “click from h5”。

运行

按上面三个步骤修改，一个简单的 Cordova 插件功能就实现了。回到项目目录，打开命令行，输入：

cordova build android -d
1

将东西打包，并生成 apk，我是觉得运行一遍后，就可以直接在 Android studio 上调试了。

安装到设备上，点击按钮，看看有没有 toast，这里我试过了，是没问题的（才怪！）。

问题

真TM天下乌鸦一般抄，一个功能全网一模一样，没一个人验证能不能用，如果按上面操作，绝对不会弹出 Toast 的，问题就出在 plugin_id 上，这里根本不能用 “.” 号！！！看看其他的插件都是用的 “-”，改一下就好了，并订正 plugin.xml 里面安卓项目的 target-dir，这里改成 “.” 。

相关阅读:
Java · 线性表 · 顺序表 · 顺序表接口实现
时空数据挖掘二（城市计算）
OpenCV5-图像几何变换
监督学习：从数据中学习预测模型的艺术与科学
ts2.任意类型
JVM概述
ModuleNotFoundError: No module named ‘pycocotools‘解决办法
《学术小白学习之路》论文常见方法：Doc2vec-句向量模型实现
python使用openvc库进行图像数据增强
NPDP|作为产品经理，如何快速提升自身业务素养？

原文地址：https://blog.csdn.net/lfq88/article/details/126857288