Cordova 插件中 JavaScript 代码与 Java 的交互细节介绍

在 Cordova 官网中有这么一张架构图：大家看右下角蓝色的矩形框"Custom Plugin"——自定义插件。意思就是如果您用 Cordova 打包 Mobile 应用时，发现您的移动应用里需要使用一些功能，这些功能用普通的 JavaScript 无法实现，而是需要调用移动平台的一些原生 API 才能实现时，我们就需要自己实现自定义插件。这些插件通过在特定的移动平台上采用原生开发实现，比如 Android Studio 中的 Java 开发，然后再通过 JavaScript wrapper 的方式暴露给您的 Mobile 应用。比如您是用 Cordova 在 Android 平台上打包生成 APK 文件，那么您的 Mobile 代码（JavaScript）里还是不会直接调用您用 Java 实现的 Custom Plugin，而是调用 Custom Plugin 对应的 JavaScript wrapper。

那么 JavaScript wrapper 本身是 JavaScript 代码，它是怎么调用到 Custom Plugin 的 Java 实现的？本文就会介绍这个细节。

下图是 OData 离线存储插件（OData Offline Store）的 JavaScript 实现代码的一部分。下图第 232 行会调用设备的 native API 进行离线存储的打开操作：

exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]);

这个 exec 函数从哪里来？由 Cordova 框架实现，通过语句 require(‘cordova/exec’)返回。

那么当应用执行到 JavaScript 代码：exec(win, error, 'OData', 'openOfflineStore', [this, options ? options : {}]); 的时候，程序流是如何从这个 JavaScript 的 exec 函数进入到 Android 平台的原生 API 执行呢？

打开 PackagedApp 文件夹里的 android 子文件夹，有一个 JavaScript 文件：cordova.js:

里面能看到函数 exec 的定义和实现：

进而去查看 androidExec 函数的实现细节：

第 938 行：var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

第 943 行的五个参数含义：

success, fail, service, action, args

• success & fail: JavaScript 回调函数，当移动平台上的 Java 原生 API 执行完毕后，这个 JavaScript 回调函数会被调用到。

• service: 待执行的 Java Native API 的 Java 实现类名称。

• action: 待执行的 Java Native API 的 Java 实现类的方法名称。

• args: JavaScript 传递给 Java native API 的参数数组。

2. 在安卓平台上，JavaScript 调用 Java 的技术实现方式有两种：定义在下图 JavaScript 代码中的 jsToNativeModes 对象中：PROMPT 和 JS_OBJECT。相对应的，Java 调用 JavaScript 有三种模式：POLLING, LOAD_URL 和 ONLINE_EVENT:

看下面这段 Java 代码，暴露了一个方法 getSomeString 给 JavaScript 端消费：

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class WebViewGUI extends Activity {
  WebView mWebView;
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mWebView = new WebView(this);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.addJavascriptInterface(new JavaScriptInterface(),        "jsinterface");
    mWebView.loadUrl("file:///android_asset/www/index.html");
    setContentView(mWebView);
  }
  final class JavaScriptInterface {
    JavaScriptInterface() {    }
    public String getSomeString() {
      return "string";
    }
  }
}

在 JavaScript 代码里消费上述 Java 代码暴露的 getSomeString 方法:

<script>
var String = window.jsinterface.getSomeString();
</script>

我们再回过头来看看 AndroidExec 的实现:

var msgs = nativeApiProvider.get().exec(bridgeSecret, service, action, callbackId, argsJson);

在 AndroidExec 的实现里， nativeApiProvider 的 get 方法返回一个实例，然后执行 exec 方法。而 881 行代码说明 nativeApiProvider 的实现位于文件夹 cordova/android 下面的 nativeapiprovider.js 里：

打开 nativeapiprovider.js，在第 21 行的注释里我们得到了重要信息： currentApi 要么来自 Java 文件 ExposedJsApi.java，要么来自 PromptBasedNativeApi.java。

Java 文件 ExposedJsApi.java 可以在这个文件夹内找到：

platform/android/CordovaLib/src/org/apache/cordova

ExposedJsApi 实际就是个 Java interface，上面声明了一个 exec 方法:

JavaScript 到 Java 的执行通过 prompt 调用完成:

Java 类 SystemExposedJsApi 实现了这个 interface，再将执行流转交给类 CordovaBridge 的实例.

CordovaBridge 再调用 PluginManager:

PluginManager 首先根据名字找到负责处理该请求的 Java plugin 的实现类，再调用该实现类的方法：

以 OData 离线存储的实现类为例，我们在其实现代码里能发现有大量的 IF-ELSE 分支，每个分支处理不同的离线存储操作请求。

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