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

Cordova插件开发
- 目标说明
- 首次尝试
- - 创建一个cordova项目
  - 创建一个插件项目并编辑
  - 为cordova项目添加插件
  - 修改cordova项目代码
  - Build与运行
- 完成题目功能
- - 修改插件
  - 修改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 {@Overridepublic 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 {@Overridepublic 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第一个插件的创建与使用相关推荐

犀牛软件插件-rhino插件-visual studio-创建你的第一个插件
文章目录 1. 插件向导 2.项目设置 3.属性表 4.样板建立 5.测试 6.添加额外的命令 7.有几件事需要考虑: 8.作者答疑犀牛软件是一款专业的三维设计软件.简单实用方便,在三维矢量领域 ...
cordova插件的创建
cordova插件的创建安装 plugman 创建插件用 plugman,需要安装,命令如下: npm install -g plugman 创建插件安装完 plugman,就可以用它创建插件了, ...
使用plugman开发cordova 高德地图定位插件
在开发的过程中我们更多的是使用别人开发的cordova插件,但是在使用的过程中经常会遇到一些不合自己心意的问题,那么我们就来使用plugman开发一个属于自己的cordova插件吧. 源码地址 : h ...
Cordova学习--iOS自定义插件
上一篇文章中我们已经成功创建了一个App,在这一篇中,我们实现自定义原生插件,由js调用原生插件.在这里我们实现功能如下一.创建插件文件在plugins文件夹下创建插件EchoPlugin,继承自 ...
《Abaqus GUI程序开发指南（Python语言）》——第一章概述1.1　简单插件实例——创建带孔板有限元模型...
本节书摘来自异步社区<Abaqus GUI程序开发指南(Python语言)>一书中的第1章,第1.1节,作者: 贾利勇 , 富琛阳子 , 贺高 , 周正光更多章节内容可以访问云栖社区&q ...
cordova指定版本_cordova 插件的安装和删除
查看已安装插件cordova plugin list 关于插件安装插件 cordova 5.0+以上的可以直接添加插件cordova plugin add cordova-hot-code-push- ...
Cordova实现自定义下载插件和WPS在线预览
Cordova实现自定义下载插件和WPS在线预览简要描述点击下载链接,请求URL,判断手机是否安装WPS,如果安装则调用wps在线编辑,没有安装则对文件进行下载,并在通知栏进行通知,显示下载进度( ...
SharpDevelop插件系统创建过程全面分析
前言 2005年2月,我申报了一个学校组织的大学生SRTP项目,项目的题目是数据结构动画演示系统.当初在做项目之前,我无意中买了一本书,书名为<SharpDevelop软件项目开发全程剖析> ...
cos html cache插件,关于Cos-Html-Cache插件不能创建首页缓存的解决办法
修改一句代码或者说一个档次修复cos-html-cache插件在https网站下无法无法创建首页缓存的问题前言这个是云落自己遇到的问题,就是cos插件不能创建首页缓存,考虑到这款插件一直没有出过什 ...

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