使用 JavaScript 调用手机平台上的原生 API

我之前曾经写过一篇文章使用 Cordova 将您的前端 JavaScript 应用打包成手机原生应用，介绍了如何使用 Cordova 框架将您的用 JavaScript 和 HTML 开发的前端应用打包成某个手机平台(比如 Android，iOS）的原生应用。

那么，您也许会有一些需求，需要在您的前端应用里使用到手机平台的一些原生 API，比如使用手机 Mobile 操作系统提供的传感器(Sensor)。这些任务是 JavaScript 不能直接完成的，必须借助 Cordova 里 Custom Plugin（自定义插件）来完成。注意看下图红色高亮的 Custom Plugin，起到了一个桥梁的作用，沟通了 Cordova 应用中的前端 JavaScript 代码和手机操作系统中的原生 API。

我们现在就来做一个实际的例子，我们选择 Android 平台为例。我在 Android 平台用 Java 实现两个整数相加，来模拟 Android 平台上的 native API。我将会在我的前端应用里用 JavaScript 代码来调用我在 Android 平台上用 Java 实现的这个加法器。

1. 先使用 npm 安装 Cordova 插件管理器。

命令行：npm -g install plugman

插件管理器成功下载后，就可以用它创建一个自定义插件了。

命令行：plugman create -name Adder -plugin_id jerry.adder -plugin_version 1.0,0

这个命令会自动创建一个名叫 Adder 的插件，插件 id 为 jerry.adder, 版本号为 1.0.0。

plugman 会自动生成很多插件能够工作的资源文件，全部放在名为 Adder 的文件夹内。

2. 我希望这个 Adder 插件在安卓平台上工作，因此进入 Adder 文件夹，添加该插件对 Android 平台的支持：plugman platform add –platform_name android

执行完毕后，Adder 文件夹下自动生成子文件夹 src/android 和插件实现文件 Adder.java。现在我可以在里面开始写代码了。

用 Java 实现两个整数的加法运算。操作数都是通过 JavaScript 用参数 args 传入的，计算结果通过回调上下文 CallbackContext 返回给 JavaScript 端。

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;  }}

3. 插件实现完毕，可以开始打包了。使用命令行 plugman createpackagejson ./

这个命令会自动生成一个 package.json 文件。

Once done, the package.json file is generated within plugin folder.

把这个自定义的插件安装到 Cordova 应用去，命令行：cordova plugin add Adder。

一切正常的话，能看到 BUILD SUCCESSFUL 的提示。

如何用前端应用的 JavaScript 消费这个 Java 实现的插件呢？

在你 Cordova 项目文件夹<project folder>/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 打包 Cordova 应用，生成 APK 文件。执行该应用，能观察到 10 和 20 两个操作数传入到 Java 实现的插件中，结果 30 返回到前端并通过 alert 弹窗显示，我们的自定义插件开发成功！

最后一步就是命令行 cordova compile, 生成了最终的 APK 文件，然后就可以安装到安卓手机上了。

如果大家想查看包含了这个 Java 插件实现源代码的完整 Cordova 项目实现，请从我的 github 仓库下载完整源代码：https://github.com/i042416/Cordova

要获取更多 Jerry 的原创技术文章，请关注公众号"汪子熙".