• 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数据而已,所以要重写哪个。按个人喜好。

    CordovaPlugin源代码

    这里。我是重写了第二个方法,如今来说明下方法參数:
    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="dev@cordova.apache.org" 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="dev@cordova.apache.org" 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文件

    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平台上实现的。那么。我们怎么应用在其它的平台上呢?或者说,我们实现一个插件之后,怎么提供给别人项目使用呢?下一节,将说说插件安装包怎样生成。就是解决这几个问题的。

    源代码

  • 相关阅读:
    EL+Serilog日志
    HttpClientFactory-向外请求的最佳
    Autofac依赖注入
    .Net Core MemoryCache
    时间复杂度和空间复杂度
    中间件-异常处理
    依赖注入-1
    使用并发集合
    安卓刷机&root
    Mac Android Studio 常用快捷键大全
  • 原文地址:https://www.cnblogs.com/llguanli/p/8383521.html
Copyright © 2020-2023  润新知