Cordova3. X using grunt to generate plugin custom plugin skeleton

Cordova3. After x, the plugin cannot be manually added, manually added, as long as the Cordova build, the data is immediately erased.

Therefore, after 3.X to add plug-ins, you need to use Cordova plungin add "your local plugin path" in the way of adding plugins.

1. Create a new folder named the name of your plugin, such as Testplugin

2. Create a new 2 folder and 1 files in the folder. Two folders are src and www. The Java code in which SRC puts your plugin, the corresponding JS file in www, and the src and WWW folder peers, establish Plugin.xml

"Using grunt template to generate Cordova plugin skeleton

Train of thought: Cordova plugin is mainly three files:

1, inherit the Cordovaactivity native realization class

2. Writing JavaScript code

3. Write Plugin.xml configuration file

Since this is the case, you can use grunt to generate Cordova plugin skeleton from a template.

First look at the project code structure:

First step: Develop Cordova plugin template

The template content is as follows:

src/android/template.txt  inherit cordovaactivity native implementation class

package <%=pkgname%>;import Java.util.timezone;import Org.apache.cordova.cordovawebview;import Org.apache.cordova.callbackcontext;import Org.apache.cordova.cordovaplugin;import Org.apache.cordova.cordovainterface;import Org.json.JSONArray;import Org.json.jsonexception;import Org.json.jsonobject;import Android.provider.settings;public class <%=className% > extends Cordovaplugin {public <%=className%> () {}/** * Executes the request and returns PLUGINR     Esult.     * * @param action the action to execute.     * @param args Jsonarry of arguments for the plugin.     * @param callbackcontext The callback ID used when calling back to JavaScript.     * @return True If the action is valid, False if not.        */Public Boolean execute (String action, Jsonarray args, Callbackcontext callbackcontext) throws Jsonexception {    TODO custom implementation return true; }}

　　

www/template.txt javascript templates

var channel = require (' Cordova/channel '),  utils = require (' cordova/utils '),  exec = require (' cordova/exec '),  Cordova = require (' Cordova '); function <%=className%> () {}module.exports = new <%=className%> ();

　　

plugin.xml Plugin build android Project code configuration file

<?xml version= "1.0" encoding= "UTF-8"?><!--plug-in ID number, maintain a consistent version number with Package.json, consistent with Package.json--><plugin xmlns= "http://apache.org/cordova/ns/plugins/1.0" id= "<%=pkgName%>" version= "0.1" > <!--the name of the plugin under Cordova , Test.js exec Interface name, consistency--<name><%=className%></name> <description>cordova plugin< /description> <license>apache 2.0</license> <!--and Package.json stay consistent--<keywords></ke Ywords> <repo></repo> <issue></issue> <!--plugin JS interface file configuration information, plug-in android--> <!--s Rc= "Www/test.js" for the already-written JS file path, and the class name called in JS is consistent---<js-module src= "Www/<%=classname%>.js" Name= "<%= Classname%> "> <!--plugin in JS called class name--<clobbers target=" <%=className%> "/> </js-mod Ule> <!--Android--<platform name= "Android" > <config-file target= "Res/xml/config.xml" pa Rent= "/*" > <!--plug-in interface name on the Java side,Consistent with the interface name in the previous file-<feature name= <%=className%> > <!--the Java code path corresponding to the plug-in interface-- <param name= "Android-package" value= "<%=pkgName%><%=className%>"/> </featur E> </config-file> <!--the required rights statement for this plugin, define it as needed--<config-file target= "Androidmanifest.x ML "parent="/* "> <uses-permission android:name=" Android.permission.INTERNET "/> <uses-pe Rmission android:name= "Android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name= "Android . permission. Access_wifi_state "/> </config-file> <!--the path to the source file and the path to the destination file, SRC is a well-written Java code path, Target-dir for the Androi to be generated The Java source path in Project D, consistent with the Java code path above--<source-file src= "<%=sourceSrc%>" target-dir= "<%=targetDir%>" /> </platform></plugin>

Use node. js + Grunt to generate skeleton code from a template: Grunt Plugin:create:com.blue.sky.test:Test

Grunt.registertask (' plugin:create ', ' custom plug-in parameter ' a package name parameter ', ' function ' (arg1, arg2, Arg3) {Grunt.log.writeln (">>    >>length: "+ arguments.length);      if (arguments.length = = = 2) {var pkgname = arg1;      var fileName = arg2; var platform = Arg3 | |      "Android";      var plugindir = "temp/" + arg1;      var tplnativecode = "template/src/" + platform + "/template.txt";      var tpljscode = "Template/www/template.txt";      var tplplugin = "Template/plugin.xml";      var srcfilename = plugindir + "/src/" + platform + "/" + Arg2 + ". Java";      var jsfilename = plugindir + "/www/" + arg2 + ". js";      var configfilename = plugindir + "/plugin.xml";      Grunt.log.writeln ("Start Create plugin:" + arg1);      Grunt.file.mkdir (Plugindir);      Create plug-in Java class Grunt.file.mkdir (Plugindir + "/src/" + platform);      Grunt.file.write (Srcfilename, Grunt.file.read (Tplnativecode));      var content = Grunt.file.read (srcfilename); var text = grunt.template.process (content, {data: {"Pkgname": Pkgname + "." + filename, "className": filename});      Grunt.file.write (srcfilename, text);      Create plug-in JavaScript grunt.file.mkdir (Plugindir + "/www");      Grunt.file.write (Jsfilename, Grunt.file.read (Tpljscode));      var jscontent = Grunt.file.read (jsfilename);      var jstext = grunt.template.process (jscontent, {data: {"ClassName": FileName}});      Grunt.file.write (Jsfilename, Jstext);      Create plug-in configuration file plugin.xml var configcontent = Grunt.file.read (Tplplugin);            var configtext = grunt.template.process (configcontent, {data: {"Pkgname": Pkgname,  "ClassName": FileName, "sourcesrc": "src/" + platform + "/" + FileName + ". Java", "TargetDir": "src/"      + Pkgname.replace (/\./g, "/")}});      Grunt.file.write (Configfilename, Configtext);    Grunt.log.writeln ("Create plugin success"); } else {Grunt.log.writeln ("the command is malformed.    Grunt Plugin:create Package Name plug-in class name "); }  });

　　

Using Cordova plugin Add "Local custom plug-in code"

Cordova plugin Add "D:\Project\workspace\phonegap\hello\temp\com.blue.sky.test"

After running, you will see a com.blue.sky.test plugin under the plugins directory (see project results graph).

Run the Cordova run Android Command Packager to your phone

After running, review the platforms directory to generate custom related code, as shown in:

Summarize

by using grunt to generate Cordova plugin you can create plugin skeleton in a very important way, eliminating tedious steps. Of course, this demo only implements the Android platform plugin. If you want to support iOS, WP is also relatively simple, only need to add the corresponding template and mapping relationship.

Cordova3. X using grunt to generate plugin custom plugin skeleton