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 : {}]);

第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里：