Android Cordova 插件开发之编写自定义插件

前言

本文适合Android+web的复合型人才,因为cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS),但是也有例外,比如我,只需负责Android方面,web方面的交由其他web组人员开发。虽然,web略懂一点,但我主要还是搞Android开发的。

编写自定义插件类

本节的内容是,自定义一个dialog插件,供web调用,显示系统弹窗。

新建一个包名,我这里使用org.apache.cordova.dialog,然后创建个类CustomDialog.java,继承于CordovaPlugin(所有自定义插件,都要继承CordovaPlugin),最后重写execute方法。

execute有三个重载方法:

public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext)
public boolean execute(String action, String rawArgs, CallbackContext callbackContext)

这三个方法,如果你看了CordovaPlugin源码的话,会发现,其实最后都调用了第二个方法,但是CordovaArgs只是对JSONArray的一个封装,方便操作json数据而已,所以要重写哪个,按个人喜好。

这里,我是重写了第二个方法,现在来说明下方法参数:

String action:一个类里面可以提供多个功能,action就是指名了要调用哪个功能。

CordovaArgs args:web以json的数据格式传递给Android native,CordovaArgs 是对JSONArray 的一个封装。

CallbackContext callbackContext:这个是回调给web,有success和error两种回调方法。

具体实现如下:

public class CustomDialog extends CordovaPlugin{

    @Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {
        if("show".equals(action)){
            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());
            builder.setTitle("提示");
            builder.setMessage(args.getString(0));
            builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.success("点击了确定");
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.error("点击了取消");
                }
            });
            builder.create().show();
            return true;
        }
        return super.execute(action, args, callbackContext);
    }

}

如果web使用了CustomDialog插件,并调用show方法(action)。这时候,会弹出一个系统窗口,会显示web传过来的消息内容,点击确定,回调web,告诉它调用成功,取消则是失败。最后记得return true(表示调用成功)。

配置config.xml

打开res/xml/config.xml文件,原本内容如下:

<?xml version=‘1.0‘ encoding=‘utf-8‘?>
<widget id="com.example.helloworld" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="loglevel" value="DEBUG" />
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <allow-intent href="market:*" />
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
</widget>

Whitelist是基础项目自带的一个插件,同样的,我们在widget节点下也添加一个feature。

<?xml version=‘1.0‘ encoding=‘utf-8‘?>
<widget id="com.example.helloworld" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="loglevel" value="DEBUG" />
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <!--弹窗插件-->
    <feature name="CustomDialog">
        <param name="android-package" value="org.apache.cordova.dialog.CustomDialog" />
    </feature>
    <allow-intent href="market:*" />
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
</widget>

feature name可以随便取,param value填的是具体类的位置。

web配置并调用

1、配置

打开asserts/www/cordova_plugins.js文件,注册插件。

cordova.define(‘cordova/plugin_list‘, function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/cordova-plugin-whitelist/whitelist.js",
        "id": "cordova-plugin-whitelist.whitelist",
        "runs": true
    },
    {
        "file": "plugins/cordova-plugin-dialog/dialog.js",//js文件路径
        "id": "cordova-plugin-dialog.CustomDialog",//js cordova.define的id
        "clobbers": [
            "alertDialog"//js 调用时的方法名
        ]
    }
];
module.exports.metadata =
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.2.1"
};
// BOTTOM OF METADATA
});

然后在assets/www下创建dialog.js文件

内容如下:

cordova.define("cordova-plugin-dialog.CustomDialog",
    function(require, exports, module) {
        var exec = require("cordova/exec");
        module.exports = {
            show: function(content){
                exec(
                function(message){//成功回调function
                    console.log(message);
                },
                function(message){//失败回调function
                    console.log(message);
                },
                "CustomDialog",//feature name
                "show",//action
                [content]//要传递的参数,json格式
                );
            }
        }
});

cordova.define 的第一个参数就是cordova_plugins.js里面定义的id,最主要的是exec方法,参数说明:

参数1:成功回调function

参数2:失败回调function

参数3:feature name,与config.xml中注册的一致

参数4:调用java类时的action

参数5:要传递的参数,json格式

2、调用

配置完上面的,只剩下在合适的地方调用它了。

打开assets/www/js/index.js

找到onDeviceReady方法,然后调用

alertDialog.show(‘Hello World!!!!‘);

这里直接调用alertDialog,就是在cordova_plugins.js下定义的clobbers名称,show是在js申明的function

index.js#onDeviceReady

onDeviceReady: function() {
        app.receivedEvent(‘deviceready‘);
        //调用自定义插件
        alertDialog.show(‘Hello World!!!!‘);
    }

直接在Android Studio运行,效果图如下:

这个对话框就是Android 系统的AlertDialog。当我们点击确定时,就会回调js success function,打印出日志。

不要执行cordova build命令!!!

需要注意的是,如果你上一篇章有仔细看过之后,你会有这么个疑问,编译项目不是用

cordova build

命令的吗?很好,网上很多说,在项目中,代码都已经写好了,但是一执行该命令,不但没有生效,反而之前写的插件代码都没了。其实,如果你知道整个项目编译过程,那么问题就迎刃而解了。

这里简单的说下,看下图的目录结构

plugins是存放插件的文件夹,而www是存放H5项目的,也就是Android项目下的asserts/www下的文件,当执行cordova build时,它会根据config.xml配置来编译项目,然后会将plugins和www下的文件应用到platforms文件夹下的各个平台,这就是“一次编译,多平台运行”。

但是,至始至终,我们编写的代码都是在Android平台下的,而上面提到的两个文件夹我们都没有动过,也就是说,所有配置都没有动过,都是初始状态,所以执行build后也就没有效果。

总结

通过上面的实例,已经实现了简单的自定义插件,但是它仅仅是在Android平台上实现的。那么,我们怎么应用在其他的平台上呢?或者说,我们实现一个插件之后,怎么提供给别人项目使用呢?下一节,将说说插件安装包如何生成,就是解决这几个问题的。

源码

时间: 2024-08-28 13:31:18

Android Cordova 插件开发之编写自定义插件的相关文章

Android Cordova 插件开发之创建项目

使用命令行创建项目 cordova 创建项目的命令是 cordova create <dir> <packageName> <projectName> 第一个参数 < dir >:项目目录文件夹的名称 第二个参数< packageName >:项目的包名 第三个参数< projectName >:项目名称  那么,我们创建一个HelloWorld项目,通过命令行cd到项目要创建的根目录下,然后执行命令 cordova create h

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 pl

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:安装的插

cordova 自定义插件

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

动手试试Android Studio插件开发

由于业务关系,经常需要写一些表单页面,基本也就是简单的增删改查然后上传,做过几个页面之后就有点想偷懒了,这么低水平重复性的体力劳动,能不能用什么办法自动生成呢,查阅相关资料,发现android studio插件正好可以满足需求,在Github上搜了一下,找到BorePlugin这个帮助自动生成布局代码的插件挺不错的,在此基础上修改为符合自己需求的插件,整体效果还不错. 发现了android studio插件的魅力,自己也总结一下,也给小伙伴们提供一点参考,今天就以实现自动生成findviewby

编写jQuery插件

编写jQuery插件 在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章: 不定义JQuery插件,不要说会JQuery jQuery插件开发精品教程,让你的jQuery提升一个台阶 这2位大神基础讲的很清楚,在这里就不多说了,主要那个小需求来练练: 需求说明:一个标题插件,可以通过后端取数,自定义标题,自定义样式 讨论:插件通常不都是加载一下就不操作了,比如表格插件,加载数据,刷新等等. 今天练习的控件就简单给大家理理写控件的思路,(有问题,有意见大家指出.) ; (function

ElasticSearch 5.4 自定义插件

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

ionic2 调用自定义插件之研究

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

Android中插件开发篇之----动态加载Activity(免安装运行程序)

一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析),没看过的同学,可以转战: http://blog.csdn.NET/jiangwei0910410003/article/details/47679843 当然,今天说道的内容还这这篇文章有关系.关于动态加载Activity的内容,网上也是有很多文章介绍了.但是他们可能大部分都是介绍通过代理的方