cordova3.X 运用grunt生成plugin自定义插件骨架

Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。

一、安装cordova

npm install -g cordova

二、创建项目

cordova create hello com.blue.sky.hybrid.app.hello HelloWorld

三、添加平台支持

cd hello

cordova platform add android (前提是系统上面要安装了对应移动系统的SDK)

在windows系统:

$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

在mac系统:

$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

四、常用命令

cordova platforms ls 查看当前安装的移动平台

cordova platform rm android 移除系统支持

cordova build 或者 cordova build android 编译

cordova emulate android 模拟器运行程序

需要安装ant:配置系统环境变量,ant需要java支持,确定系统安装JDK,并配置JAVA环境变量。

ANT_HOME   D:\tool\apache-ant-1.9.0
PATH       %ANT_HOME%\bin
CLASSPATH  %ANT_HOME%\lib

cordova run android usb  真机运行程序

cordova platform update android 更新android平台

五、插件管理

cordova plugin search bar code 搜索插件
cordova plugin add org.apache.cordova.console 增加插件支持, 多个空格分开
cordova plugin add org.apache.cordova.console@latest 最新版本
cordova plugin add org.apache.cordova.console@0.2.1 指定版本
cordova plugin add https://github.com/apache/cordova-plugin-console.git
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0 版本
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir 子目录

cordova plugin ls 查看已安装的插件
cordova plugin rm org.apache.cordova.console 移除插件

六、自定义插件 

学了这么多, 准备自己写个自定义插件,变在命令行输入:cordova plugin create  com.blue.sky.test   发现不管用.  查阅资料后, 发现没有这个命令, 网上大家都是手动创建目录, 觉得太麻烦,  于是用grunt 写了一个命令通过模板生成cordova plugin骨架。

》》网上的方法大概是这样:

cordova3.X之后,插件不能自己手动添加了,手动添加后,只要cordova build,数据立即被抹去.

因此,3.X后要添加插件,需要用 cordova plungin add "你本地插件的路径"  的方式来添加插件,.

1.新建一个文件夹,命名为你插件的名字,如TestPlugin

2.在文件夹里再新建2个文件夹和1个文件.两个文件夹分别是src和www.其中src中放你插件的java代码,www中放对应的js文件;与src和www文件夹同级,建立plugin.xml

》》运用grunt模板生成cordova plugin骨架

思路:cordova plugin 主要是三个文件:

1、继承cordovaActivity的Native实现类

2、编写javascript代码

3、编写plugin.xml配置文件

既然是这样, 便可以运用grunt通过模板生成cordova plugin骨架。

首先看一下项目代码结构:

cordova3.X 运用grunt生成plugin自定义插件骨架

第一步:制定cordova plugin模板

模板内容如下:

src/android/template.txt 继承cordovaActivity的Native实现类

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 PluginResult.
*
* @param action The action to execute.
* @param args JSONArry of arguments for the plugin.
* @param callbackContext The callback id used when calling back into JavaScript.
* @return True if the action was valid, false if not.
*/
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { ///TODO 自定义实现 return true;
} }

  

www/template.txt   javascript 模板

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

  

plugin.xml  插件编译生成android 项目代码配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!--插件id号,与package.json保持一致 版本号,与package.json保持一致-->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="<%=pkgName%>" version="0.1">
<!--插件在cordova下的名称,Test.js中exec的接口名称,保持一致-->
<name><%=className%></name>
<description>Cordova Plugin</description>
<license>Apache 2.0</license>
<!--与package.json保持一致-->
<keywords></keywords>
<repo></repo>
<issue></issue>
<!--插件js接口文件配置信息,插件在android-->
<!--src="www/Test.js"为已经写好的js文件路径,与js中调用的类名保持一致-->
<js-module src="www/<%=className%>.js" name="<%=className%>">
<!--插件在js中调用的类名-->
<clobbers target="<%=className%>" />
</js-module> <!-- android -->
<platform name="android">
<config-file target="res/xml/config.xml" parent="/*">
<!--插件在java端的接口名称,与之前文件中的接口名称保持一致-->
<feature name="<%=className%>">
<!--该插件接口对应的java代码路径-->
<param name="android-package" value="<%=pkgName%><%=className%>"/>
</feature>
</config-file> <!--该插件需要的权限申明,根据需要自行定义-->
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
</config-file> <!--源文件的路径和目标文件路径,src为已经编写好的java代码路径,target-dir为需要生成的android工程中该java源码路径,与上面的java代码路径保持一致-->
<source-file src="<%=sourceSrc%>" target-dir="<%=targetDir%>"/> </platform> </plugin>

运用Node.js + grunt根据模板生成骨架代码: grunt plugin:create:com.blue.sky.test:Test

grunt.registerTask('plugin:create', '自定义插件 参数一 包名  参数二 插件类名', 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); // 创建插件java类
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); // 创建插件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); // 创建插件配置文件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("命令格式错误。 grunt plugin:create 包名 插件类名");
}
});

  

使用cordova plugin add "本地自定义插件代码"

cordova plugin add "D:\Project\workspace\phonegap\hello\temp\com.blue.sky.test"

运行之后, 在plugins 目录下面会看到有com.blue.sky.test插件(请看项目结果图)。

运行cordova run android 命令打包程序到手机

运行后,查看platforms目录下面生成了自定义的相关代码,如下图所示:

cordova3.X 运用grunt生成plugin自定义插件骨架

总结

   通过运用grunt生成cordova plugin 可以很方面的创建plugin骨架, 省去繁琐的步骤。当然, 这个demo只是实现了android平台的plugin。如果要支持ios、wp也比较简单,只需要加相应的模板以及映射关系即可。

上一篇:Bloglines订阅Blog部落格RSS网摘 - Blog透视镜


下一篇:jsp自动编译机制