【Cordova】Cordova第一个插件的开发与使用

Cordova插件开发

Cordova插件开发

目标说明

使用cordova实现一个小型计算器，能够进行整数的加减乘除功能
将加减乘除的功能包装成插件，cordova项目通过调用插件暴露的接口使用功能
计算通过Android原生代码实现（也就是说计算功能放在java文件中，js文件通过cordova的exec模块方法调用java代码使用功能

首次尝试

在正式开发之前，先构建一个基本框架，调用并理解默认代码

注：在运行命令行之前，请确认你已经构建好了cordova + plugman环境，如果没有，请执行以下命令行：(在任何目录下均可)

$ npm install -g cordova
$ npm install -g plugman

目标：跑通第一个cordova + plugin项目，在index.html中添加按钮，完成初始方法coolMethod的调用和简单算数方法sum的调用

创建一个cordova项目

首先创建一个cordova项目

新建一个CordovaPlugin目录作为根目录，在根目录中打开cmd，依次执行以下命令：

$ cordova create MyPlugTest2
$ cd MyPlugTest2
$ cordova platform add android
# 为了使得调试比较方便，可以添加browser平台
$ cordova platform add browser

需要注意:

新增的browser平台不能调用安卓的java代码，也就是不能通过cordova的exec方法调用原生代码。
添加browser平台是为了能够及时通过网页查看并调试一些功能，避免每一次都需要cordova build android后再在Android Studio中查看。

创建一个插件项目并编辑

下一步是新建一个插件项目

在CordovaPlugin文件夹中，执行：

$ plugman create --name MyPlugin2 --plugin_id MyPlugin2 --plugin_version 0.1.0
$ cd MyPlugin2
$ plugman platform add --platform_name android
$ plugman createpackagejson ./

修改插件的js代码：

// MyPlugin2/www/MyPlugin2.js
var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    
    
    exec(success, error, 'MyPlugin2', 'coolMethod', [arg0]);
};

exports.coolMethodSum = function(arg0, success, error){
    
    
    exec(success, error, 'MyPlugin2', 'sum', arg0);
};

修改插件的android代码：

// MyPlugin2\src\android\MyPlugin2.java：
package MyPlugin2;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class MyPlugin2 extends CordovaPlugin {
    
    

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    
    
        if (action.equals("coolMethod")) {
    
    
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        else if(action.equals("sum")){
    
    
            callbackContext.success(args.getInt(0) + args.getInt(1));
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
    
    
        if (message != null && message.length() > 0) {
    
    
            callbackContext.success(message);
        } else {
    
    
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

保存

为cordova项目添加插件

在MyPlugTest2目录下执行：

$ cordova plugin add ./MyPlugin2

如果添加不成功，请将./MyPlugin2替换为MyPlugin2的绝对路径

注：在这里原本可以通过添加- -link参数构建Debug环境：

$ cordova plugin add ../path/to/my/plugin/relative/to/project --link

但是一直在报错，懒得找原因，因此放弃

修改cordova项目代码

修改index.html：

<!-- MyPlugTest2\www\index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" 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>
                <button onclick="coolMethod()">点击调用Cool</button>
                <button onclick="coolMethodSum(2,3)">点击调用Sum</button>
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

注：在这里我删去了自动生成代码中的这一行：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

这是因为如果添加了这一行，浏览器会添加CSP安全标准，禁止两个按钮的功能调用，因此需要删去

修改index.js：

// MyPlugTest2\www\js\index.js
function success(msg){
    
    
    alert(msg);
}

function error(msg){
    
    
    alert(msg);
}

function coolMethod(){
    
    
    cordova.plugins.MyPlugin2.coolMethod("cool", success, error);
    alert("cool");
}

function coolMethodSum(x, y){
    
    
    cordova.plugins.MyPlugin2.coolMethodSum([1, 2], success, error);
    alert("sum");
}

Build与运行

在浏览器中预览（预览，因为不能使用java的方法

在cordova项目的目录下运行：

$ cordova build browser
$ cordova run browser

效果如下：
请添加图片描述
注意：因为不能使用java方法，因此第一个弹出框显示为

Error：missing command error

这个是正常现象

构建安卓项目：

在cordova项目中运行：

$ cordova build android
# build之后可以直接在Android中打开MyPlugTest2\platforms\android\app
$ cordova run android

注：如果上面命令输出了以下错误，请忽略，只要确保出现了build success，就可以继续进行下一步
请添加图片描述
下一步，在Android Studio中打开MyPlugTest2\platforms\android\app项目（请确保你的Android Studio环境已经正确配置，并添加了虚拟机），等待gradle编译后即可运行如下（第一、第二个弹出框都有内容

完成题目功能

功能界面设计如下：
请添加图片描述

修改插件

由于之前为cordova项目添加插件的方式中，使用link参数添加失败了，因此如果需要修改插件源代码，首先需要删除项目中引入的插件

在cordova项目下执行以下命令：

$ cordova plugin remove MyPlugin2

下一步就可以修改MyPlugin2插件的源代码了：

首先修改java源代码，添加加减乘除的功能函数：

// MyPlugin2\src\android\MyPlugin2.java
package MyPlugin2;

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

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

public class MyPlugin2 extends CordovaPlugin {
    
    

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    
    
        if (action.equals("coolMethod")) {
    
    
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        else if(action.equals("sum")){
    
    
            callbackContext.success(args.getInt(0) + args.getInt(1));
            return true;
        }
        else if(action.equals("minus")){
    
    
            callbackContext.success(args.getInt(0) - args.getInt(1));
            return true;
        }
        else if(action.equals("multiple")){
    
    
            callbackContext.success(args.getInt(0) * args.getInt(1));
            return true;
        }
        else if(action.equals("divide")){
    
    
            callbackContext.success(args.getInt(0) / args.getInt(1));
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
    
    
        if (message != null && message.length() > 0) {
    
    
            callbackContext.success(message);
        } else {
    
    
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

然后修改JS代码：

// MyPlugin2\www\MyPlugin2.js
var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    
    
    exec(success, error, 'MyPlugin2', 'coolMethod', [arg0]);
};

exports.coolMethodSum = function(arg0, success, error){
    
    
    exec(success, error, 'MyPlugin2', 'sum', arg0);
};

exports.coolMethodMinus = function(arg0, success, error){
    
    
    exec(success, error, 'MyPlugin2', 'minus', arg0);
};

exports.coolMethodMultiple = function(arg0, success, error){
    
    
    exec(success, error, 'MyPlugin2', 'multiple', arg0);
};

exports.coolMethodDivide = function(arg0, success, error){
    
    
    exec(success, error, 'MyPlugin2', 'divide', arg0);
};

修改cordova项目

首先需要重新引入修改后的插件：

在MyPlugTest2目录下执行：

$ cordova plugin add ./MyPlugin2

如果添加不成功，将./MyPlugin2替换为MyPlugin2的绝对路径

修改index.html：

<!-- MyPlugTest2\www\index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" 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>
                <button onclick="coolMethod()">点击调用Cool</button>
                <button onclick="coolMethodSum(2,3)">点击调用Sum</button>
            </div>
            <div>
                <label for="input1">参数1</label>
                <input type="text" id="input1"/>
                <br/>
                <label for="input2">参数2</label>
                <input type="text" id="input2"/>
                <div>
                    <button id="sumbtn" onclick="coolMethodSum()">+</button>
                    <button id="minusbtn" onclick="coolMethodMinus()">-</button>
                    <button id="multiplebtn" onclick="coolMethodMultiple()">*</button>
                    <button id="dividebtn" onclick="coolMethodDivide()">/</button>
                </div>
                <label for="input2">计算结果</label>
                <input type="text" id="calcresult"/ disabled>
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

修改index.js

// MyPlugTest2\www\js\index.js
function success(msg){
    
    
    alert(msg);
    document.getElementById("calcresult").value = msg;
}

function error(msg){
    
    
    alert(msg);
}

function coolMethod(){
    
    
    cordova.plugins.MyPlugin2.coolMethod("cool", success, error);
    alert("cool");
}

function coolMethodSum(){
    
    
    x = document.getElementById("input1").value;
    y = document.getElementById("input2").value;
    cordova.plugins.MyPlugin2.coolMethodSum([x, y], success, error);
    alert("sum");
}

function coolMethodMinus(){
    
    
    x = document.getElementById("input1").value;
    y = document.getElementById("input2").value;
    cordova.plugins.MyPlugin2.coolMethodMinus([x, y], success, error);
    alert("minus");
}

function coolMethodMultiple(){
    
    
    x = document.getElementById("input1").value;
    y = document.getElementById("input2").value;
    cordova.plugins.MyPlugin2.coolMethodMultiple([x, y], success, error);
    alert("multiple");
}

function coolMethodDivide(){
    
    
    x = document.getElementById("input1").value;
    y = document.getElementById("input2").value;
    cordova.plugins.MyPlugin2.coolMethodDivide([x, y], success, error);
    alert("divide");
}

重新生成项目

在cordova项目中运行：

$ cordova build android
# build之后可以直接在Android中打开MyPlugTest2\platforms\android\app
$ cordova run android

成果

在Android Studio中打开MyPlugTest2\platforms\android\app文件夹，可以调试项目，最终成果如下：
请添加图片描述

参考：

Cordova插件开发一篇就够了

Cordova插件使用和开发学习笔记

使用plugman 创建一个自己的cordova插件

附件

源代码

【Cordova】Cordova第一个插件的创建与使用