最近一值在使用phonegap + html5 + js来开发移动端,相对原生开发效率确实高,也很方便。不过phonegap提供对原生调用的插件有限,比如二维码扫描、附件打开、文件上传等等,这些phonegap是没有提供的。所以就需要自定义插件来满足自己的需求,今天就简单记录下phonegap插件的开发。
实现一个吐司效果(Toast),直接上代码:
新建ToastPlugin类继承CordovaPlugin
package com.plugins.toast;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONException;
/**
* Toast效果插件
* 继承CordovaPlugin,并重写execute方法
*/
public class ToastPlugin extends CordovaPlugin {
/**
*
* @param action The action to execute.
* @param args The exec() arguments, wrapped with some Cordova helpers.
* @param callbackContext The callback context used when calling back into JavaScript.
* @return
* @throws JSONException
*/
@Override
public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
if ("showShort".equals(action)) {
Toast.makeText(cordova.getActivity(), "我是一条短吐司!", Toast.LENGTH_SHORT).show();
} else if("showLong".equals(action)) {
Toast.makeText(cordova.getActivity(), "我是一条长吐司!", Toast.LENGTH_LONG).show();
}
return super.execute(action, args, callbackContext);
}
}
配置res/xml/config.xml文件
<feature name="Toast">
<param name="android-package" value="com.plugins.toast.ToastPlugin" />
</feature>
如果想偷懒的话这样就可以使用了,直接在页面调用
<div>
<a href="#" οnclick="showToast()">显示Toast</a>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function showToast() {
cordova.exec(null, null, "Toast", "showShort", []);
}
</script>
部署就可以实现效果。
其实也可以封装成js方法调用,实现分三步,第一,首先在assets/www/plugins文件夹中创建com-samulle-plugin-toast/www文件夹,然后创建toast.js文件,代码为:
cordova.define("com-samulle-plugin-toast.toast", function(require, exports, module) {
var exec = require('cordova/exec');
exports.show = function(arg0, success, error) {
exec(success, error, "Toast", "showShort", [arg0]);
};
});
第二步,在assets/www中的cordova_plugins.js配置模块,在module.exports中添加:
{
"id": "com-samulle-plugin-toast.toast",
"file": "plugins/com-samulle-plugin-toast/www/toast.js",
"pluginId": "com-samulle-plugin-toast",
"clobbers": [
"Toast"
]
}
然后在module.exports.metadata中添加
"com-samulle-plugin-toast": "1.0.0"
第三步,页面调用
<div>
<a href="#" οnclick="showToast()">显示Toast</a>
<a href="#" οnclick="Toast.show()">显示</a>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function showToast() {
cordova.exec(null, null, "Toast", "showShort", []);
}
</script>
好了,整个插件的开发过程就是这样的。如有不足之处还望指出。