Cordova Cross-platform app development 02_ custom plugin development and installation

Video Address: Http://t.cn/RacmXiy

Cordova Custom plug-ins are composed of js, native code files (java,oc), andplugin.xml three parts.

CORDVOA provides commands to create a plugin template project.

Create a plugin template

1. Installation of Pluman

NPM install–g Plugman

2. In d:\cordovaplugins create a plugin named helloplugins withID com.zql. Helloplugins, version number 1.0.0

CD D:\cordovaplugins

Plugman Create--name helloplugins--plugin_id com.zql.helloplugins--plugin_version 1.0.0

Add Android platform to plugins

CD Helloplugins

Plugman Platform Add--platform_name Android

Add iOS platform to plugins

Plugman Platform Add--platform_name iOS

Plugin Template directory Structure

SRC directory is a native code file

www for the front desk JS

Plugin.xml for plug-in configuration files

After the template code is created, you also need to modify

1 modifying Plugin.xml

1.1 Modify the js-module configuration. The clobbers configures the object that invokes the JS method. Cordova.plugins.helloplugins too long to call up too cumbersome to change to helloplugins

<js-module Name= "Helloplugins" src= "Www/helloplugins.js">
<clobbers Target= "Cordova.plugins.helloplugins"/>
</js-module>

<js-module Name= "Helloplugins" src= "Www/helloplugins.js">
<clobbers Target= "Helloplugins"/>
</js-module>

1.2 Modify the source-file in the <platform name= "Android" ></platform> configuration .

Will target-dir= "Src/com/zql//helloplugins". Modify to target-dir= "Src/com/zql/plungins". com/zql/plungins the package name for the Java file

Plug-in development

Js Development

A plug-in can configure multiple JS methods, through the exec's fourth parameter to distinguish

varexec = require (' Cordova/exec ');

varFunc1=function(){};

Func1.Prototype.Show=function(arg0,Success,Error) {
EXEC (Success,Error,"Helloplugins","Show",ARG0);
};

func1. Prototype. Show1 =  function    (arg0 successerror) {
      EXEC (successerror " Helloplugins "" Show1 "arg0)  }; 
 
 
 module. Exports =  new   func1  ()             

Through helloplugins. Show (args,successcallback,errcallback);

Helloplugins. show1 (args,successcallback,errcallback);

The helloplugins here is the value of the clobbers configuration under Js-model in Plugin.xml .

Andorid Native code Development

public class Helloplugins extends Cordovaplugin {

@Override
Public Boolean execute (String action, Jsonarray args, Callbackcontext callbackcontext) throws Jsonexception {
if (Action.equals ("show")) {
String message = args.getstring (0);
This.result (message, callbackcontext);
return true;
}
if (Action.equals ("Show1")) {
String message = args.getstring (0);
This.result (message, callbackcontext);
return true;
}
return false;
}

private void result (String message, Callbackcontext callbackcontext) {
if (message! = NULL && message.length () > 0) {
callbackcontext.success (message);
} else {
Callbackcontext.error ("expected one non-empty string argument.");
}
}
}

Inherits the Cordovaplugin class and overrides the execute method, using the action to determine the method name that we call in JavaScript, a successful call callbackContext.success(message) , a failed call callbackContext.error(message) method, corresponding to the success and error callback functions in the JavaScript file, respectively.

Plug-in Installation

Copy the plug-in folder to the project and directory

CD Project Path

Cordova Plugin Addhelloplugins

Plugin removal

CD Project Path

Cordova Plugin RM plugin ID

Cordova Cross-platform app development 02_ custom plugin development and installation