Phonegap自定义插件(cordova3.4)

最新推荐文章于 2019-01-08 05:37:08 发布

xiaoluo5238

最新推荐文章于 2019-01-08 05:37:08 发布

阅读量1k

点赞数

文章标签： Phonegap 插件 Android cordova3.4

本文链接：https://blog.csdn.net/xiaoluo5238/article/details/38711331

版权

最近接触Phonegap，想写写Phonegap的插件，发现中文相关资料甚少，以后要敢于去看英文资料，因为，我是从事IT的。

我用的是cordova3.4，也没有用命令的形式生成项目的。

用到的cordova.jar和cordova.js下载目录：http://download.csdn.net/detail/xiaoluo5238/7793119

开发插件有如下三个步骤

1、插件JAVA类的编写。

2、配置文件config.xml的编写。

3、对应的js的编写。

一、插件Java类的编写

Phonegap的版本升级太快了，而且很多都不是兼容以前的版本的。cordova3.4版本的JAVA插件类要继承CordovaPlugin类（在此之前，你要保证你的项目已经导入cordova.jar）,然后重写方法：

public boolean execute(String action, JSONArray data, CallbackContext callbackContext)

参数详解：action为标志，一个插件根据action来区分不同的功能。

data为Phonegap中js传入的参数，是JSONArray格式的。

callbackContext是回调函数，由JAVA向js传数据。

下面是我写的一个示例Hello.java

package com.xiaoluo.plugin;

import android.util.Log;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * @Author: xiaoluo
 * @Version: 1.0 add
 * @File: Hello.java
 * @Date: 2014/8/20
 * @Time: 20:23
 */
public class Hello extends CordovaPlugin{
    public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {
            if(action.equalsIgnoreCase("echo1")){//当action 为echo1时
                   callbackContext.success("echo1 Success");
                return true;
            }
        else if(action.equalsIgnoreCase("echo2")){
                Log.v("xiaoluo","coming echo2");
                if(data.getInt(0)==0){
                    Log.v("xiaoluo","coming 0");
                    callbackContext.error("传入是0，这是错误提示");
                }
                else {
                    Log.v("xiaoluo","coming 1");
                    callbackContext.success("传入不是0，这是成功提示");
                }
                return true;
            }
        return false;
    }//end execute
 }//end class

二、配置文件config.xml的编写

一般运用开始是没有这个文件的，你要自己手动建一个（如果用命令生成Phonegap项目的话，是有这个目录的），放于res->xml中，文件目录如下

在config.xml中主要是配置

<feature name="Hello"><!--name 是插件的名字，在js中调用时用到-->
        <param name="android-package" value="com.xiaoluo.plugin.Hello"/><!--values 是包的名-->
    </feature>

config.cml主要做的就是让JAVA类与js的调用映射起来。下面是一个示例（config.xml）：

<widget xmlns     = "http://www.w3.org/ns/widgets"
        id        = "io.cordova.helloCordova"
        version   = "2.0.0">


    <feature name="Hello">
        <param name="android-package" value="com.xiaoluo.plugin.Hello"/>
    </feature>
</widget>

三、对应的js编写:

在js中主要是要重写写一个方法cordova.exec，前提你包含进来了cordova.js;

cordova.exec有5个参数，具体含义的在下面这里示例中有详细介绍。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="cordova.js"></script><!--注意这个不能script简写-->
    <script>
        function Cl1(){
            cordova.exec(function(mes){alert(mes);},//成功时调用
                    function(err){alert(err);},//失败时调用
                    "Hello",//插件的名字，在config.xml中创建的
                    "echo1",//action在JAVA代码中的标志,可以说是区分不同的方法名,如果没有对应的action，会返回false
                    []//发送到插件的参数
            );
        }//end Cl1()

        //action为echo2，传入参数为0
        function Cl2_0(){
            cordova.exec(function(mes){alert(mes);},//成功时调用
                    function(err){alert(err);},//失败时调用
                    "Hello",//插件的名字，在config.xml中创建的
                    "echo2",//action在JAVA代码中的标志,可以说是区分不同的方法名,如果没有对应的action，会返回false
                    ["0"]//发送到插件的参数
            );
        }//end
        //action为echo2，传入参数为1
        function Cl2_1(){
            cordova.exec(function(mes){alert(mes);},//成功时调用
                    function(err){alert(err);},//失败时调用
                    "Hello",//插件的名字，在config.xml中创建的
                    "echo2",//action在JAVA代码中的标志,可以说是区分不同的方法名,如果没有对应的action，会返回false
                    ["1"]//发送到插件的参数
            );
        }//end
    </script>
</head>
<body>
    <div style="margin-top: 200px;text-align: center;">
           <button οnclick="Cl1()">按钮1</button><br/>
        <button οnclick="Cl2_0()">按钮2_0</button>
        <button οnclick="Cl2_1()">按钮2_1</button>
    </div>
</body>
</html>

至此，插件开发完毕，看看上面示例整合起来的具体效果：

学习Phonegap的中文网站:http://docs.phonegap.com/zh/3.4.0/index.html（有点坑）

英文网站：http://docs.phonegap.com/en/3.4.0/index.html（肯下来，还行）

本文示例下载：http://download.csdn.net/detail/xiaoluo5238/7793819