It is my first time to participate in a serious project of Cordova. I want to write down some words so that I can remember them quickly when I need them. I also hope to help my friends who need them.

What do you need?

  • Have some knowledge of Cordova.
  • Certain mobile terminal development ability.
  • Some front-end knowledge, basic CSS \js\ HTML, is unavoidable.
  • To support your development environment, install Cordova, Plugman, Xcode, Android Studio, etc.

Why do you need to develop plug-ins

We know that Cordova is a Web shell, and we can use plug-ins to work with Native. To put it simply, I think plug-in support is needed for better user experience, such as a transition animation, it may be better to use native code to achieve the effect; The second is to take advantage of the capabilities of native devices, such as GPS, Bluetooth, etc.

In my business scenario, I need to add gesture unlocking to my application. I think of two solutions. One is the pure front-end solution, that is, to embed a SECTION of JS in the Web page, which is responsible for the display and unlock of the lock screen interface and other functions. It covers the original page with a canvas (Demo is here). The second is to use plug-ins, native code to control the display of the lock screen and so on.

After comprehensive consideration of experience and reasonableness, I decided to use the second method. However, in order to save time, I only used plug-ins to realize the logic part, and the unlocking interface was directly drawn on canvas to save trouble.

How to write a plug-in

To initialize a plugin, you only need one command: Plugman create –name cordovaGestureLock –plugin_id cordova-plugin-gesture-lock –plugin_version 1.0.0

After executing this command, you can create a new plug-in directory as shown below:




Plug-in directory

The SRC and WWW directories are included by default. Plugin.xml is a file that describes the plug-in, such as the version number, author, keywords, and so on.

The following screenshot is the plugin.xml of my plugin:




plugin.xml

The plugin id is cordova-plugin-gesture-lock, which is where you can search for the plugin id if your plugin is released. Here I added the ios Platform, which specifies the plugin’s header file and source file path, so that the plugin will be copied to your app when it is installed.

I then jumped to the cordovagestureLock. js file in the WWW directory and changed the code to look like this:

var exec = require('cordova/exec');

exports.showGestureLock = function(arg0, success, error) {
    exec(success, error, "cordovaGestureLock", "showGestureLock", [arg0]);
};Copy the code

The default method it generates for you is called coolMethod, and you should replace it with the method exposed in your plugin.

What does this code do? It exposes a method called showGestureLock to the JS context, which will eventually wake up your local plug-in to execute. You can call it just like a normal JS function.

Now comes the heavy part, the time for native developers to cheer and get right to the code:

#import #import #import @interface GestureLock : CDVPlugin - (void)showGestureLock:(CDVInvokedUrlCommand*)command; @end ... @implementation GestureLock { NSTimeInterval _showGestureLockInterval; NSUserDefaults *_userDefault; } - (void)pluginInitialize { _showGestureLockInterval = 5 * 60; _userDefault = [NSUserDefaults standardUserDefaults]; [self registNotificationHandler]; } - (void)showGestureLock:(CDVInvokedUrlCommand*)command { [self showGestureLockIfNeeded]; }...Copy the code

To put it simply, our plug-in needs to provide methods that are exposed to JS, in this case showGestureLock. And then in my code, because I want my application to listen for a bunch of events, like when the application gets activated. So I need to register some notifications, and Cordova provides a method called pluginInitialize that gives you a chance to do something during plugin initialization, such as my registration notifications. By default, the plug-in is initialized only when it is used, but in my previous XML file, I have a line of code that makes the plug-in load at startup because I want the plug-in to always listen for events.

In my case, I don’t need to pass arguments from JS to Native, so my function is pretty simple to write. In fact, you can take js parameters from command, and you can get the parameters you want from it. After processing, you can also construct CDVPluginResult to pass the result to JS.

How to use plug-ins

After completing the development of the plug-in, it is natural to use it, just need a simple command to do it, such as here: Cordova plugins add https://github.com/billwang1990/CordovaGestureLock.git – save me here is my warehouse address, you can also point to your local address.

If you want to delete a plugin, it’s easy to just tell it the id of the plugin you want to delete: cordova plugin rm cordova-plugin-gesture-lock –save

After adding the plug-in, you can look at your project config.xml file and see that you have added a plug-in, which you can then use in your project. The final finished Demo is here. The code is a bit messy, just look at it.

Write in the last

I’m going to write about android plugins as I get started.

Cordova’s plugin development is relatively easy, but the interesting question is how it is implemented. That is, how to enable JS to communicate with Native, in fact, iOS is mainly realized by using its Runtime. I wrote a simple version of Bridge to do similar things a year and a half ago. If you are interested, please check my previous article and leave comments for discussion.