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 [email protected] 最新版本
cordova plugin add [email protected] 指定版本
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骨架。

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

第一步：制定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目录下面生成了自定义的相关代码，如下图所示：

总结

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

时间： 2024-10-10 18:00:40

cordova3.X 运用grunt生成plugin自定义插件骨架的相关文章

Mybatis框架(9)---Mybatis自定义插件生成雪花ID做为表主键项目

Mybatis自定义插件生成雪花ID做为主键项目 先附上项目项目GitHub地址 spring-boot-mybatis-interceptor 有关Mybatis雪花ID主键插件前面写了两篇博客作为该项目落地的铺垫. 1.Mybatis框架---Mybatis插件原理 2.java算法---静态内部类实现雪花算法 该插件项目可以直接运用于实际开发中,作为分布式数据库表主键ID使用. 一.项目概述 1.项目背景 在生成表主键ID时,我们可以考虑主键自增 或者 UUID,但它们都有很明显的缺点 主

BrnShop开源网上商城第四讲：自定义插件

重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www.brnshop.com. 好了现在进入今天的正题:自定义插件.上一讲中我们已经阐述了BrnShop插件的工作机制,现在我们详细介绍下如何自定义插件.首先BrnShop的插件从功能上分为三类,分别是: 开放授权插件(OAuth) 支付插件 配送插件 对应的接口文件(注:位于BrnShop.Core项目的Plugin/Base文件夹中)依次如下:

ElasticSearch 5.4 自定义插件

ElasticSearch 做为数据仓库处理速度确实很强,但是很多和业务相关的函数ElasticSearch怎么支持的,通过查询发现,ElasticSearch支持自定义插件(相当于自定义函数),通过自定义插件,开发人员可以实现各种业务相关的函数定义供相关人员使用. 1.   ElasticSearch  自定义插件编写 后续补充. 2.  ElasticSearch  自定义插件打包 2.1  自定义插件开发完成后,需要增加“plugin-descriptor.properties”配置文件,

Gradle自定义插件

Gradle自定义插件 在Gradle中创建自定义插件,Gradle提供了三种方式: 在build.gradle脚本中直接使用 在buildSrc中使用 在独立Module中使用 开发Gradle插件可以在IDEA中进行开发,也可以在Android Studio中进行开发,它们唯一的不同,就是IDEA提供了Gradle开发的插件,比较方便创建文件和目录,而Android Studio中,开发者需要手动创建(但实际上,这些目录并不多,也不复杂,完全可以手动创建). 在项目中使用 在Android

TarsGo新版本发布，支持protobuf，zipkin和自定义插件

本文作者:陈明杰(sandyskies)Tars是腾讯从2008年到今天一直在使用的后台逻辑层的统一应用框架,目前支持C++,Java,PHP,Nodejs,Golang语言.该框架为用户提供了涉及到开发.运维.以及测试的一整套解决方案,帮助一个产品或者服务快速开发.部署.测试.上线. 它集可扩展协议编解码.高性能RPC通信框架.名字路由与发现.发布监控.日志统计.配置管理等于一体,通过它可以快速用微服务的方式构建自己的稳定可靠的分布式应用,并实现完整有效的服务治理.目前该框架在腾讯内部,各大核

浅析vue封装自定义插件

在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程,比较大的区别在于封装插件需要手动干预,就是一些实例化方法需要手动调用,而Vue的实例化,很多逻辑内部已经帮忙处理掉了.插件相对于组件的优势就是插件封装好了之后,可以开箱即用,而组件是依赖于项目的.对组件初始化过程不是很熟悉的可以参

cordova 自定义插件

cordova /phonegap 自定义插件 在使用cordova 的过程中,虽然官方提供的插件以及其他人开源的插件较多.但有时为了实现某种需求,还是需要自己编写插件. 以前总是会手动的配置cordova插件,具体可以参考phonegap手动配置插件 今天主要是介绍官方提供的plugman来创建插件 pluman的使用 首先,安装plumam npm install -g plugman 安装完之后,就可以创建plugin plugman create --name <pluginName>

ionic2 调用自定义插件之研究

摘要 最近在研发一个移动项目,架构已经定型,使用Ionic2开发,虽然ionic2 已经提供了ionic native插件,但是当遇到一些特别的需求大多时候还是需要我们自己封装插件. cordova机制我在此就不提了,我们使用Typescript调用cordova plugin就如同调用第三方库是一个道理,那么这里就少不了书写declare文件,下面我就把几种封装调用的几种方式介绍一下. 方式一,编写全局declare文件 现在我们有一个“残峰(我的同事)”封装好的签名版插件,cordova p

cordova android项目自定义插件及使用(一）

--新建cordova项目 cordova create Myproj com.myproj.test MyTestProj --添加平台及设备 cd Myproj cordova platform add android cordova platform add ios cordova plugin add org.apache.cordova.device --然后这个时候打开项目目录是这个样子的 config:应用的配置信息 platforms:应用支持的平台目录 plugins:安装的插