Cordova plug-in development – sliding gesture unlock (iOS)

The first serious participation in the Cordova project, want to write some words, for days after the need to help you quickly recall, but also hope to help a friend in need.

What do you need?

  • A certain degree of understanding of Cordova.
  • Mobile terminal development capability.
  • Some front-end knowledge, the basic css/js/html these are not escape.
  • Support for the development environment, you need to install Cordova, plugman, Xcode, Android Studio and other tools.

Why do we need to develop plug-ins

We know that Cordova is actually using a web shell, we can use plug-ins to deal with native.
in simple terms, I think the need for a plug-in support, in order to better user experience, such as a transition animation, may achieve better results by using native code; the two is to use original equipment, for example, you need to use GPS, blue tooth and so on.

In my business scene, I need to give my application with the function of gesture unlock. I think the two schemes, one is the pure front-end program, which is embedded in a JS in the web page, which is responsible for the display and other functions to unlock the lock screen, is covered with a layer of canvas on the original page (in Demo); second is to use the plugin mode, native code to control the lock screen display and so on.

After considering the experience and rational degree so I decided to use the second ways, but in order to save time, I just use the plug-in implements logic part, unlock the interface in order to save or draw directly with canvas.

How to write plug-ins

Initializing a plugin requires only one command:
plugman –name –plugin_id cordovaGestureLock cordova-plugin-gesture-lock –plugin_version 1.0.0

When the command is executed, you can create a new plug-in directory, as shown below:

Cordova plug-in development - sliding gesture unlock (iOS)
plugin directory

The default will include the SRC and WWW directory, plugin.xml is a plug-in description file, such as the plugin version number, author, keywords, etc., a complete description here.

The following screenshot is my plugin for plugin.xml:

Cordova plug-in development - sliding gesture unlock (iOS)
plugin.xml

Plug in the ID is cordova-plugin-gesture-lock, if your plugin is released, you can search the plugin ID. Here I added the IOS platform, which specifies the header file and the source file path, so that when installing plug-ins will be copied to your application.

And then jump to the WWW directory of the cordovaGestureLock.js file to go, I modified the code into the:

Var exec = require ('cordova/exec'); exports.showGestureLock = function (arg0, success, error) {exec (success, error, "cordovaGestureLock", "showGestureLock", "[arg0]");};

It defaults to the way you generate the name coolMethod, and you replace it with the way you plug it in.

What does this code do, it exposes a method called showGestureLock to JS’s context, which will eventually wake up your local plugin to perform. You can call it as a normal JS function.

Next to the big part of the time, the native code developers cheered the moment, the code directly on it:

#import < Foundation/Foundation.h> #import; < Cordova/CDV.h> #import < Cordova/CDVPlugin.h> @interface; GestureLock: CDVPlugin - (void) showGestureLock: (CDVInvokedUrlCommand*) command; @end @implementation GestureLock... _showGestureLockInterval NSUserDefaults {NSTimeInterval; *_userDefault;} - (void) pluginInitialize {_showGestureLockInterval = 5 * 60 = [NSUserDefaults; _userDefault standardUserDefaults]; [self registNotificationHandler];} - (void) showGestureLock: (CDVInvokedUrlCommand*) command {[self showGestureLockIfNeeded];}...

In simple terms, our plugin needs to provide a way to expose the JS to the showGestureLock. Then in my code, because I want my application to listen to a series of events, such as the application is activated, etc.. So I need to sign up for a notification, Cordova provides a method called pluginInitialize, give you a chance to do something when the plug-in initialization, such as my registration notice here.
by default, only when being used in the plug-in will be initialized, but in front of me in the XML file, I have a line of code:
< param name= “onload” value= “true /&gt
“; it makes plug-in at boot time is loaded, because I want to have the plugin listen for events.

In my case, I don’t need to pass parameters from JS to native, so this function is very simple. The actual command can be passed with the JS parameters, you can get from the inside of the parameters you want. After processing, you can also construct CDVPluginResult to pass the result to js.

How to use plug-ins

After the completion of the plug-in development of natural is to put it to use, only need a simple fix command, such as:
Cordova plugin add I https://github.com/billwang1990/CordovaGestureLock.git –save
I used here is my warehouse address, you can also point to your local address.

If you want to delete a plug-in is also very simple, just tell it you need to delete the plug-in ID:
Cordova RM cordova-plugin-gesture-lock –save

After you add the plugin, you go to see your project config.xml file will find more than a plug-in, and then you can use it in your project, very convenient.
finally completed the Demo here. Code written in a mess, look good.

Write in the end

Next on Android’s plugin, I’ll do it again when I do it.

Cordova plug-in development is still relatively simple, more interesting question is how to achieve the plug-in? That is how to make JS and native communication, in fact, here is the use of the runtime to achieve in the iOS, I wrote a half years ago to do a simple version of the bridge to do similar things, interested can see an article before me and comments.