Cordova插件开发

最新推荐文章于 2022-10-12 23:48:09 发布

shouxin_1009

最新推荐文章于 2022-10-12 23:48:09 发布

阅读量215

点赞数

分类专栏： cordova 文章标签： android 插件 cordova

本文链接：https://blog.csdn.net/shouxin_1009/article/details/77461405

版权

cordova 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Cordova插件开发

此讲解主要基于Android环境搭建 Author: laoXu

Cordova插件开发一

需求：当HTML界面点击按钮是将调用原生的对话提示框

1、创建一个名为CustomDialog的类，继承CordovaPlugin

public class CustomDialog extends CordovaPlugin

2、重写execute方法


@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
    return super.execute(action, args, callbackContext);
}

3、在execute方法中去根据页面传递来的参数去做对应的操作

    @Override
    public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
        // show 页面传递过来的action值
        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 true;
        }
        return super.execute(action, args, callbackContext);
    }

4、在项目的res/xml/config.xml配置文件中配置插件


<!-- 配置此项发现不再会打开外部链接 -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

<!-- 创建应用时自带的插件 -->
<feature name="Whitelist">
    <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
    <param name="onload" value="true" />
</feature>

<!-- 弹窗体插件 -->
<!-- name将会在js中用到 -->
<feature name="CustomDialog">
    <!-- name表示为android的包名，value就是对应得包名 -->
    <param name="android-package" value="com.xsy.myapp.plugin.CustomDialog">
</feature>

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

// 注册插件的方法
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        // 插件1
        "file":"plugins/cordova-plugin-dialog/dialog.js",//Js文件路径
        "id":"cordova-plugin-dialog.CustomDialog",// JS cordova.define的id
        "clobbers":[
                "alertDialog"//js调用时的方法名
            ]
    }，
    {
        // 插件2
        ……
    }
];
module.exports.metadata =
// TOP OF METADATA
{
    "cordova-plugin-whitelist": "1.2.2"
};
// BOTTOM OF METADATA
});

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

/**
 *第一个参数：cordova_plugins.js定义的id值，最主要的是exec方法
 */
cordova.define("cordova-plugin-dialog.CustomDialog",function(require, exports, module){
    var exec = require("cordova/exec");

    module.exports = {
        //show是在JS中调用:alertDialog.show("***");
        show:function(content){
            exec(
                function(message){
                    //成功调用,message为java中传递回来的参数
                    console.log(message);
                },
                function(message){
                    // 调用失败,message为java中传递回来的参数
                    console.log(message);

                },
                "CustomDialog",//feature name，与res/xml/config.xml中注册的一致
                "show",//调用java类时的action ,根据show去判断是否弹出对话框
                [content]// 要传递的参数，json格式
            );
        }
    }
});

7、最后调用js中的方法实现dialog对话框的弹出，在这里我们在www/js/index.js文件中去调用了显示对话框的js

    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'

    // 这里表示当设备准备完毕，网页加载好后就去调用自定义插件
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        // 调用自定义插件
        alertDialog.show("调用自定义插件?");
    },

8、去加载index.html页面，index.html页面会加载index.js文件，当设备准备完毕后就会执行alertDialog.show(“调用自定义插件?”);方法，就会弹出对应的对话提示框。

Cordova插件开发二

需求：当HTML界面点击跳转按钮，将获取到输入框中的http请求，并进行相关的操作，此为测试代码，主要想快速实现Cordova插件的调用

1、创建一个名为TestPlugin的类，继承CordovaPlugin

public class TestPlugin extends CordovaPlugin

2、重写execute方法


@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
    return super.execute(action, args, callbackContext);
}

3、实现获取http请求验证请求并回传给网页的功能

    private String getUrl;
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        Context activity = this.cordova.getActivity().getApplicationContext();
        // url 页面传递过来的action值
        if("url".equals(action)){
        // 获取到传递过来的值,页面传递来的值一般为json数据，
            使用args.getString(0)直接获取到第一个参数
            getUrl = args.getString(0);
            //验证http请求的合法性
            boolean isHttpUrl = isHttpUrl(getUrl);
            if(isHttpUrl){
                // 成功回调，并将正确的请求地址回传给界面中去
                callbackContext.success(getUrl);
            } else {
                // 否则弹出Toast提示用户
                Toast.makeText(activity, "输入的地址不是Http请求地址", Toast.LENGTH_SHORT).show();
            }
        }
        return true;
    }

    /**
     * 正则验Http请求地址
     */
    public boolean isHttpUrl(String url) {
        //验证标识符必须由字母、数字、下划线组成
        Pattern p = Pattern.compile("(http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?^=%&:/~\\+#]*[\\w\\-\\@?^=%&/~\\+#])?");
        Matcher m = p.matcher(url);
        boolean flg = m.matches();
        System.out.println(flg);
        return flg;
    }

4、在项目的res/xml/config.xml配置文件中配置插件


<!-- 测试插件:实现网页跳转 -->
<feature name="TestPlugin">
    <param name="android-package" value="com.xsy.myapp.plugin.TestPlugin">
</feature>

5、创建www/loadWeb.html页面，此次调用插件与上面不同，现在只讲解调用插件的过程：

    <script type="text/javascript">
    function getUrl(){
        // 获取到页面输入的url参数
        var url = document.getElementById("url").value;
        if(url != null && url != ""){
        //为页面添加事件监听器，第一个参数表示设备准备完毕，第一个为执行方法
        document.addEventListener('deviceready',function(){
                    cordova.exec(
                    //成功调用
                    function(message){

                        //alert("url:"+message);
                        // 根据传递过来的参数进行页面跳转
                        //window.location.href='file:///android_asset/www/index.html';
                        window.open(message);
                        },
                        // 失败回调，因为没有java中没有调用失败回调，这里为null
                        null,
                        // feature name，与res/xml/config.xml中注册的一致
                        "TestPlugin",
                        // action的值，java中获取到该值并作出对应操作
                        "url",
                        // 传递给java中的参数
                        [url]);
                    },false);
            } else {
                alert("请输入url地址");
            }
    }
    </script>