I’ve written an article on how to use Cordova to package your JavaScript and HTML front-end applications as native apps for mobile platforms such as Android and iOS.

Then, you may have some requirements to use some native API of Mobile phone platform in your front-end application, such as Sensor provided by Mobile phone operating system. These tasks cannot be done directly by JavaScript. Instead, you must use the Custom Plugin in Cordova to complete these tasks. Note that the Custom Plugin highlighted in red serves as a bridge between the front-end JavaScript code in Cordova applications and the native apis in mobile operating systems.

For a practical example, let’s take the Android platform as an example. I realized the addition of two integers in Java on the Android platform to simulate the Native API on the Android platform. I will use JavaScript code in my front-end application to call the adder I implemented in Java on the Android platform.

1. Use NPM to install the Cordova plug-in manager.

NPM -g install plugman

Once the plug-in manager is successfully downloaded, you can use it to create a custom plug-in.

Command line: plugman create-name adder-plugin_id jerry. Adder-plugin_version 1.0,0

This command will automatically create a plug-in named Adder with the plugin ID Jerry. Adder and version 1.0.0.

Plugman automatically generates a number of resource files that plug-ins can work with, all in a folder called Adder.

2. I want this Adder plugin to work on Android, so go to the Adder folder and add support for Android: plugman Platform add — platform_name Android

After execution, subfolder SRC/Android and plug-in implementation file adder.java are automatically generated in the Adder folder. Now I can start coding in there.

Java to achieve the addition of two integers. The operands are passed in through JavaScript with the args argument, and the results are returned to the JavaScript side through the CallbackContext.

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; }}Copy the code

3. The plug-in is implemented and ready to be packaged. Use the plugman createpackagejson./ command line

This command automatically generates a package.json file.

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

To install the custom plugin to Cordova, run the Cordova plugin add Adder command.

If all is well, you will see the message BUILD SUCCESSFUL.

How do I consume this Java-implemented plug-in with the JavaScript of the front-end application?

In the folder/platforms/android Cordova project/assets/WWW/js index. The js, paste in the following JavaScript code:

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();Copy the code

Exec (success, null, “Adder”, “performAdd”, [10,20]);

Call the plugin named Adder, execute the plugin’s exposed performAdd method, and pass in two parameters, 10 and 20. The calculation results of the Java plug-in are returned to the front-end application through the JavaScript callback function SUCCESS, and the results are printed out with Alert.

Compile cordova applications and generate APK files. When executing the application, you can observe that the operands 10 and 20 are passed into the Java implementation of the plug-in, and the result 30 is returned to the front end and displayed through the Alert popup. Our custom plug-in development is successful!

The final step is the command line cordova compile, which generates the final APK file, which is then ready to be installed on your Android phone.

If you want to see the complete Cordova project implementation that includes the source code for the Java plugin, download the complete source code from my Github repository: github.com/i042416/Cor…

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