下面是安装phoengap自带的插件
cordova plugin add org.apache.cordova.device 安装对应的device插件 cordova plugin list 列出已经安装的插件 cordova plugin remove org.apache.cordova.device 删除 device 插件 |
在phoengap2.9中我们已经讲过了phonegap自定义插件,但是3.0以后有一些区别
下面主要给大家讲讲 phoengap3.0以上如何自定义插件
首先我们看看安装完成的默认目录结构:
说实话,使用命令行方式创建并导入到eclipse里面之后这个目录结构并不是很清晰,变化较大。
下面我们正式进入插件开发:
1.我们来创建一个自定义的插件,在你的硬盘中如我的G盘创建一个目录如下(说明:可以任意盘) 这里我们新建了一个 org.apache.cordova.echo的文件夹 当然这个名字可以随意,不过我们可以仿照他的默认的插件命名规则来
2. org.apache.cordova.echo,这个目录就是存放你自定义插件的根目录,在这个目录下面我们先新建这么几个文件 src文件 www 文件 和 plugin.xml 如下图
3.新建完成以后我们打开 src目录,然后在下面新建 android 目录如下图
4.新建完成android目录以后我们打开 在里面新建一个 Echo.java 如下图(注意java类名的命名规则)Echo.java里面的代码如下 一个简单的调用返回代码,和以前开发中写法一样的
这里的代码就是需要执行的插件代码,作用是通过客户端传递的参数再返回给客户端,其中execute方法是必须的,供客户端调用。
package org.apache.cordova.echo;
import org.apache.cordova.api.CallbackContext;
import org.apache.cordova.api.CordovaPlugin;
import org.apache.cordova.api.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class Echo extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("echo")) { //action=echo
String message = args.getString(0); //HelloMobileWorld
message=message+"这是原生代码";
this.echo(message, callbackContext);
return true;
}else{
callbackContext.error("这不是一个echo操作");
return false;
}
}
private void echo(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
5.找到org.apache.cordova.echo目录下刚才创建一个www目录,并在这个目录下创建一个js文件,取名叫echo.js,用来提供客户端调用java代码的桥梁,这个js代码如下所示:
至于其他的图function变量,我们完全可以自己定义
var cordova=require('cordova');
var Echo =function(){
Echo.prototype.echo=function(success,error,str){
cordova.exec(sucess,error,'Echo','echo',str)//'Echo'对应我们在java文件中定义的类名,echo对应我们在这个类中调用的自定义方法,str是我们客户端传递给这个方法的参数,是个数组
}
}
var echo=new Echo();
module.exports=echo;
6. 下一步是要写一个plugin.xml文件,用于命令行去进行插件的注册,在org.apache.cordova.echo文件夹下建立一个plugin.xml文件,刚才我们已经新建好了,代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="org.apache.cordova.echo"
version="0.0.1">
<name>Echo</name>
<description>Echo Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,echo</keywords>
<js-module src="www/echo.js" name="echo">
<clobbers target="echo" />
</js-module>
<!-- android -->
<platform name="android">
<source-file src="src/android/Echo.java" target-dir="src/org/apache/cordova/echo" />
<config-file target="res/xml/config.xml" parent="/*">
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.echo.Echo"/>
</feature>
</config-file>
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</config-file>
</platform>
</plugin>
其中js-module指向的就是我们刚才所写的js文件的路径,src指向www/echo.js,name属性自己定义,clobbers代表我们在客户端调用的时候的实例名。
下面最重要的platform节点代表每个平台下的配置,
<source-filesrc="src/android/Echo.java"target-dir="src/org/apache/cordova/echo" />
src代表Java源文件的地址,target-dir代表你要拷贝到项目中的地址
<config-file target="res/xml/config.xml"parent="/*">
<feature name="Echo">
<param name="android-package" value="org.apache.cordova.echo.Echo"/>
</feature>
</config-file>
这个是使用命令行之后添加到config文件中的节点,其中<param name="android-package"value="org.apache.cordova.echo.Echo"/>中的value代表从插件中Java文件的路径及类名
以上就是plugin.xml文件,至此,我们已经完成了一个自定义插件的编写,整个插件文件夹下面的目录结构如下:
7. 下面使用命令行将这个插件添加到你的项目中去 在nodejs下面切换到你的项目目录中去
注意一定要写您的 org.apache.cordova.echo对应目录
8. 表示插件已经加入到了你的项目当中,再看看我们的项目结构,你会发现src下面多了我们刚才写的源码,以及config.xml和cordova_plugin.js的变化
在assets的www目录下的plugins多出了我们刚才写的js文件
在cordova_plugins.js中多了一段关于插件注册的代码
这些都是命令行cordova plugin add自动生成的,不用管,当然如果你不想使用命令行方式或者不具备命令行环境,你也可以手动修改以上文件
至此,我们的项目中可以调用自定义代码了
在index.html中写入以下代码
<script>
function onDeviceReady(){
alert('执行');
/*
window.echo("echo1111", function(echoValue) {
alert(echoValue);
});
*/
test(function(succ){
alert('成功'+succ);
},function(err){
alert('失败'+err);
},['HelloMobileWorld','testWorld']);
}
function test(success,error,option){
alert('执行test');
cordova.exec(success, error, "Echo", "echo", option);
}
</script>