安卓 Cordova混合开发创建插件篇

最新推荐文章于 2024-08-07 09:18:22 发布

路上风景独好

最新推荐文章于 2024-08-07 09:18:22 发布

阅读量623

点赞数 2

CC 4.0 BY-SA版权

文章标签： android cordova native web

本文链接：https://blog.youkuaiyun.com/qq_31309689/article/details/52539377

本文介绍如何创建自定义Cordova插件以显示系统对话框，包括插件类的编写、配置文件修改及Web端调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写自定义插件类

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

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

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

这里，我是重写了第二个方法，现在来说明下方法参数：
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>

修改为：

<?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-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，打印出日志。