学习中。。。嗯。。
Cordova插件的开发还是挺简单的,目前只做了Android的,iOS部分有时间补上。
Cordova插件开发主要分为四个部分:
- 用本地语言编写插件主体功能
- 在
assets/plugins
目录下添加js描述文件 - 在
asserts/cordova_plugins.js
中添加描述文件 - 在
config.xml
(Android中路径为res/xml/config.xml
)中注册
好吧。。。一个一个来吧。。。
现在写一个Android中的Toast插件(因为只要一句话)
1.用本地语言编写插件主体功能
嗯,这里是Java。。
在合适的包下创建Class,继承CordovaPlugin
类并覆盖execute
方法,在execute方法中编写插件的主体功能
package me.hran.cordova.toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
/**
* Created by Hran on 2015/4/9.
*/
public class ToastPlugin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if ("show".equals(action)) {
showToast(args.getString(0), args.getInt(1));
}
return super.execute(action, args, callbackContext);
}
private void showToast(String text, int type) {
if (type == 1) {
android.widget.Toast.makeText(cordova.getActivity(), text, android.widget.Toast.LENGTH_LONG).show();
} else {
android.widget.Toast.makeText(cordova.getActivity(), text, android.widget.Toast.LENGTH_SHORT).show();
}
}
}
2.在assets/plugins
目录下添加js描述文件
文件路径:
assets/plugins/me.hran.cordova.toast/toast.js
代码:
/**
* Created by Hran on 2015/4/8.
*/
//me.hran.cordova.toast.Toast为插件id,要跟cordova_plugins.js中的id一致
cordova.define("me.hran.cordova.toast.Toast", function(require, exports, module){
var exec = require("cordova/exec");
module.exports = {
show: function(content, type){
//参数1:成功回调function
//参数2:失败回调function
//参数3:feature name,与config.xml中注册的一致
//参数4:要传递的参数,json格式
exec(null,null,"Toast","show",[content,type]);
}
}
});
3.在asserts/cordova_plugins.js
中添加描述文件
在module.exports = []
中添加
{
"file": "plugins/me.hran.cordova.toast/toast.js",//第二步中js描述文件地址
"id": "me.hran.cordova.toast.Toast", //与第二步中使用的id一致
"clobbers":[
"navigator.toast" //将本插件绑定到。。。上
]
}
4.在config.xml
中注册插件
在widget节点下添加
<feature name="Toast">
<!--配置Android本地代码-->
<param name="android-package" value="me.hran.cordova.toast.ToastPlugin"/>
</feature>
5.在js文件中调用
在合适的地方调用
navigator.toast.show(text, type);
完成~navigator.toast
为第三步中clobbers中定义的,show
为第二步中module.exports
中定义的方法,多个方法都可以添加在这里
创建一个安装包吧
- 新建一个空(wen)项(jian)目(jia)
- 把我们第一步中写的本地代码(
Toast_plugin.java
)放到src/android/
目录下 - 把我们第二步中写的
toast.js
放到www/
目录下 修改
toast.js
文件,只保留function(require, exports, module)
中的代码,即:var exec = require("cordova/exec"); module.exports = { show: function(content, type){ exec(null,null,"Toast","show",[content,type]); } }
在项目根目录添加
plugin.xml
文件,代码如下:<?xml version="1.0" encoding="UTF-8"?> <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" <!-- 插件的Id,安装后注册的Id为此id加js-moudle的name属性 --> id="me.hran.cordova.toast" version="0.0.1"> <name>Toast</name> <description>Cordova Toast Plugin</description> <license>Apache 2.0</license> <keywords>cordova,toast</keywords> <!-- js文件的地址,安装后路径为:plugins/插件Id/src属性值 --> <js-module src="www/toast.js" name="Toast"> <!-- 跟第三步中asserts/cordova_plugins.js中填的一样 --> <clobbers target="navigator.toast" /> </js-module> <!-- android --> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <!-- config-file中包含的这段会原封不动的插入到config.xml文件中 --> <feature name="Toast"> <param name="android-package" value="me.hran.cordova.toast.ToastPlugin"/> </feature> </config-file> <!-- 本地代码,有多个文件就写多个source-file,src对应本项目,target对应安装后的目录,注意分隔符别写成包格式(x.xx.xxx) --> <source-file src="src/android/ToastPlugin.java" target-dir="src/me/hran/cordova/toast" /> </platform> <!-- 其他平台的代码 --> </plugin>
现在的文件结构:
Project --src --android --ToastPlugin.java --www --toast.js --plugin.xml
好了,加上.gitignore和readme.MD什么的打包打包扔到git上吧
测试一下安装包
找个没装过这个插件的项目,用CLI工具执行
cordova plugin add your-git-repository-address //example cordova plugin add https://github.com/zhuangluda/Cordova-Plugin-Toast.git
执行一下第五步,看看对不对