我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比如Android,iOS)的原生应用。
那么,您也许会有一些需求,需要在您的前端应用里使用到手机平台的一些原生API,比如使用手机Mobile操作系统提供的传感器(Sensor)。这些任务是JavaScript不能直接完成的,必须借助Cordova里Custom Plugin(自定义插件)来完成。注意看下图红色高亮的Custom Plugin,起到了一个桥梁的作用,沟通了Cordova应用中的前端JavaScript代码和手机操作系统中的原生API。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yYwAzM5ImZjdDMzEWO2YDO4QTM0UWNzATZwIGOkBTZk9CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
我们现在就来做一个实际的例子,我们选择Android平台为例。我在Android平台用Java实现两个整数相加,来模拟Android平台上的native API。我将会在我的前端应用里用JavaScript代码来调用我在Android平台上用Java实现的这个加法器。
1. 先使用npm安装Cordova插件管理器。
命令行:npm -g install plugman
public class Adder extends CordovaPlugin {
@Override
public Boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("performAdd")) {
int arg1 = args.getint(0);
int arg2 = args.getint(1);
int result = arg1 + arg2;
callbackContext.success("result calculated in Java: " + result);
return true;
}
return false;
}
}
如何用前端应用的JavaScript消费这个Java实现的插件呢?
在你Cordova项目文件夹/platforms/android/assets/www/js的index.js里,将下列JavaScript代码粘贴进去:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
}
,
onDeviceReady: function() {
this.receivedEvent('deviceready');
}
,
receivedEvent: function(id) {
function success(result){
debugger;
alert("Jerry plugin result: " + result);
}
;
setTimeout( function(){
Cordova.exec(success, null, "Adder", "performAdd", [10,20]);
}
, 10000);
}
}
;
app.initialize();
关键代码就这一句:Cordova.exec(success, null, “Adder”, “performAdd”, [10,20]);
意思是调用名为Adder的插件,执行插件暴露的performAdd方法,传入两个参数10和20进去。Java插件的计算结果通过JavaScript回调函数success返回到前端应用中,用alert打印出结果。
最后一步就是命令行cordova compile, 生成了最终的APK文件,然后就可以安装到安卓手机上了。
如果大家想查看包含了这个Java插件实现源代码的完整Cordova项目实现,请从我的github仓库下载完整源代码:
https://github.com/i042416/Cordova