PhoneGap之自定义插件

来源：互联网发布：项目管理 java开源编辑：程序博客网时间：2024/05/17 22:31

PhoneGap：作为原生App，Java（这里面是指Android的）与JavaScript 的通信桥梁，使得我们的混合开发更加得心应手，我是与Android结合的混合开发。

但在这里不得不吐槽一下PhoneGap这个坑：更新速度很快，但是学习资料的更新却远远跟不上节奏。而且必须按照它的套路走，而且就算按着套路走也可能会出错，

最后还是得靠自己摸索。。。。

好了，不说那么多了，下面介绍PhoneGap自定义插件的使用（也可以说是CordovaPlugin），主要分以下步骤：

1）下载最新版的cordova.jar，我在使用的是cordova3.5.0.jar 版本的，把下载的 cordova-x.x.x.jar导入到工程的libs目录下来。

说明：这个cordova.jar 是用于Android原生Java语言这边使用的，有了这个架包就可以在Android这边编写自定义的插件。

2）把cordova.js，cordova_plugin.js 这两个JavaScript文件复制到www文件目录下面。

说明：这两个js文件是用于JavaScript调用插件中方法使用。

3）在www文件目录下新建一个 plugins 文件夹目录。

说明：用于存放自定义插件的JavaScript文件

4）编写自定义插件中的 java 代码部分：FirstPlugin.java

<span style="font-size:14px;">package com.customcordovaplugin.plugin;import org.apache.cordova.CallbackContext;import org.apache.cordova.CordovaPlugin;import org.json.JSONArray;import org.json.JSONException;/** * Created by long on 2016/5/10. */public class FirstPlugin extends CordovaPlugin {    @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext)            throws JSONException {        //检查方法名，例如我们定义一个名为sayHello的方法        if("sayHello".equals(action)){            /**             * 关于回调函数             * 成功就执行 callbackContext.success(param)，从而触发成功回调函数             * 失败就执行 callbackContext.error(param)，从而触发失败回调函数             * 如果不需要回调函数，那么就没必要调用这两个方法             */            //获取第一个参数，如果有多个参数的话可以使用索引号分别获取            String message = args.getString(0);            //检查输入值是否为空，如果为空值就会调用 callbackContext.error()方法            //这会导致失败回调函数被调用            if(message!=null && message.length()>0){                callbackContext.success("Hello: "+message+"!");            }else{                callbackContext.error("输入值为空！");            }            //最后还需要返回逻辑值 true 来表明方法存在            return true;        }        //否则，如果方法名不符，那么就返回false        //在网页的 JavaScript 程序中调用时就会导致“MethodNotFound”错误        return false;    }}</span>

5）编写自定义插件中的 JavaScript 部分：firstplugin.js

<span style="font-size:14px;">cordova.define("firstplugin_id",    function(require, exports, module) {    //引入必要的类        var exec = require('cordova/exec');        //创建一个JavaScript类        function FirstPlugin(){};                //为其添加一个方法，在方法中调用exec()方法        FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){        exec(successCallback, failureCallback,        'FirstPlugin', 'sayHello', [name]);        };                //公共的对象是 FirstPlugin 实例        module.exports = new FirstPlugin();    });</span>

6）编写程序入口html文件：index.html

<span style="font-size:14px;"><!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <meta name="format-detection" content="telephone=no" />        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /><script type="text/javascript" src="cordova.js"></script><script type="text/javascript" src="plugins/firstplugin.js"></script>        <title>Simple</title>    </head>    <body onload="onLoaded()">        <label for="inputName">请输入名字: </label><input type="text" id="inputName">        <input type="button" onclick="clickHandler()" value="sayHello" />        <script>        //当DOM加载完毕，注册deviceready事件        function onLoaded(){        //注册deviceready事件监听，指定deviceready事件处理函数        document.addEventListener("deviceready",onDeviceReady,false);        }        //成功回调函数        function onSuccess(data){        alert(data);        }        //失败回调函数        function onError(err){        alert(err);        }        //deviceready 事件处理函数，PhoneGap 完成加载后调用该函数        function onDeviceReady(){        //启动所有input元素        var nodelist = document.getElementsByTagName('input');        var nodeLen = nodelist.length;        for(var i=0;i<nodeLen;i++){        nodelist[i].disabled = false;        }        }        //按钮单击事件处理函数        function clickHandler(){        //获取输入文本框中的字符，并将其作为参数传递给sayHello()方法        inputName = document.getElementById("inputName");        var dialog = com.mine.FirstPlugin;        dialog.sayHello(inputName.value, onSuccess, onError);        }        </script>    </body></html></span>

说明：

<span style="font-size:14px;">        var dialog = com.mine.FirstPlugin;    <span style="font-family: Arial, Helvetica, sans-serif;">是在后面讲到的cordova_plugins.js文件中配置的</span>        dialog.sayHello(inputName.value, onSuccess, onError);</span>

<span style="font-size:14px;">调用的这个sayHello方法就是调用了 firstplugin.js 文件中的这个方法：</span>

<span style="font-size:14px;"><pre name="code" class="javascript">        //为其添加一个方法，在方法中调用exec()方法        FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){        exec(successCallback, failureCallback,        'FirstPlugin', 'sayHello', [name]);        };</span>

7）接下来就是配置config.xml文件，在res下面新建xml文件夹，并且将config.xml 放到该文件夹下面，config.xml 代码如下：

<span style="font-size:14px;"><widget xmlns     = "http://www.w3.org/ns/widgets"        id        = "io.cordova.helloCordova"        version   = "2.0.0">    <feature name="FirstPlugin">        <param name="android-package" value="com.customcordovaplugin.plugin.FirstPlugin"/>    </feature></widget></span>

说明：value的值就是 FirstPlugin.java 文件的路径及名称

8）配置cordova_plugin.js 文件，cordova_plugins.js代码如下：

<span style="font-size:14px;">cordova.define('cordova/plugin_list',function(require, exports, module){module.exports = [{"file": "plugins/firstplugin.js",       //表示注册和连接JavaScript文件的位置"id": "firstplugin_id",                 //表示唯一的标示"clobbers": ["com.mine.FirstPlugin"]    //表示可以引用的接口(用于html中调用JavaScript的方法（自定义）)}module.exports.metadata = {"firstplugin_id": "1.0",          //插件的版本号}});</span>

到这里，PhoneGap自定义插件的工作完成了，PhoneGap的学习到处是坑，大家学习的时候细心点。