Cordova插件开发

来源：互联网发布：win10国外优化软件编辑：程序博客网时间：2024/05/22 00:20

Cordova插件开发

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

Cordova插件开发一

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

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

public class CustomDialog extends CordovaPlugin

2、重写execute方法

@Overridepublic 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方法

@Overridepublic 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>

6、以上就已经实现了插件的调用

阅读全文

0 0