On Cordova’s website, there is an architecture diagram: “Custom Plugin” in the bottom right corner. If you use Cordova to package your Mobile application and find that your Mobile application needs some functions that cannot be implemented using ordinary JavaScript, but need to call some native API of the Mobile platform, we need to implement our own custom plug-in. These plug-ins are implemented using native development on a specific Mobile platform, such as Java development in Android Studio, and then exposed to your Mobile application through JavaScript Wrapper. For example, if you use Cordova to generate APK files on the Android platform, your Mobile code (JavaScript) will not directly call the Custom Plugin that you implement with Java. Instead, call the JavaScript wrapper corresponding to the Custom Plugin.

The JavaScript wrapper itself is JavaScript code. How does it invoke the Java implementation of the Custom Plugin? This article will cover this detail.

The following is part of the JavaScript implementation code for the OData Offline Store plug-in. Line 232 in the figure below calls the native API of the device to open the offline storage:

Exec (win, error, ‘OData’, ‘openOfflineStore’, [this, options? Options: {}]);

Where does the exec function come from? Implemented by the Cordova framework and returned by the statement require(‘ Cordova /exec ‘).

Exec (win, error, ‘OData’, ‘openOfflineStore’, [this, options? Options: {}]); How does the program flow from this JavaScript exec function into the Android platform’s native API?

Open the Android subfolder in the PackagedApp folder, and there is a JavaScript file: cordova.js:

We can see the definition and implementation of exec:

To see the implementation details of the androidExec function:

Line 938: var MSGS = nativeApiprovider.get ().exec(bridgeSecret, service, action, callbackId, argsJson);

The meanings of the five parameters in line 943:

success, fail, service, action, args

  • Success & Fail: JavaScript callback function that is called when the Java native API on the mobile platform has finished executing.
  • Service: Java implementation class name of the Java Native API to be executed.
  • Action: Method name of the Java implementation class of the Java Native API to be executed.
  • Args: An array of arguments that JavaScript passes to the Java Native API.

2. On Android platform, there are two technical implementations of JavaScript calling Java: PROMPT and JS_OBJECT, defined in the jsToNativeModes object in the JavaScript code below. Java has three different modes of calling JavaScript: POLLING, LOAD_URL, and ONLINE_EVENT:

GetSomeString (); getSomeString (); getSomeString ();


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(a) {

            return "string"; }}}Copy the code

Consume the getSomeString method exposed in the Java code above in JavaScript code:

<script>

var String = window.jsinterface.getSomeString();

</script>
Copy the code

Let’s go back to the implementation of AndroidExec:

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

In the AndroidExec implementation, the nativeApiProvider’s GET method returns an instance and then executes the exec method. The nativeApiProvider implementation is located in the nativeApiProvider.js folder cordova/ Android:

Open nativeapiprovider js, we get important information in 21 lines: currentApi or from Java file ExposedJsApi. Java, either from PromptBasedNativeApi. Java.

The Java file exposedjsapi.java can be found in this folder:

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

The ExposedJsApi is actually a Java interface that declares an exec method:

JavaScript to Java execution is done with a prompt call:

The Java class SystemExposedJsApi implements this interface and passes the execution flow to an instance of the Class CordovaBridge.

CordovaBridge then calls PluginManager:

The PluginManager first finds the implementation class of the Java Plugin responsible for handling the request by name and then calls the implementation class method:

Taking the OData offline storage implementation class as an example, we can find a large number of if-else branches in the implementation code, and each branch handles different offline storage operation requests.

For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code: