最近接触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