【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文件夹,可以调试项目,最终成果如下:
参考:
附件