有时候需要使用android原生底层的控件或者方法,在cordova有很多插件供我们使用,通过简单的几步就可以开发简单的cordova吐司(toast)插件
创建插件目录结构
### ToastPlugin文件夹目录接口
|-- src
|-- android
|-- ToastPlugin.java // android入口
|-- www
|-- ToastPlugin.js // 插件入口
|-- plugin.xml // 插件配置
plugin.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!-- id属性:插件的id标识符 -->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="com.test.toastplugin"
version="1.0.0">
<name>Toast</name>
<description>简单插件</description>
<license>Apache 2.0</license>
<keywords>cordova, toast</keywords>
<repo></repo>
<issue></issue>
<!-- src www目录下的js文件 -->
<js-module src="www/ToastPlugin.js" name="ToastPlugin">
<!-- target是调用的全局对象 -->
<clobbers target="ToastPlugin" />
</js-module>
<!-- android -->
<platform name="android">
<config-file target="res/xml/config.xml" parent="/*">
<feature name="ToastPlugin" >
<!-- value 类名的路径包含命名空间 和下面的target-dir路径一样 -->
<param name="android-package" value="com.test.toastplugin.ToastPlugin"/>
</feature>
</config-file>
<!-- 引入src/android目录下的源文件 -->
<source-file src="src/android/ToastPlugin.java" target-dir="src/com/test/toastplugin" />
</platform>
</plugin>
ToastPlugin.js
var exec = require('cordova/exec');
function ToastPlugin() { }
ToastPlugin.prototype.showToast = function (aString) {
/**
* 参数: 成功回调结果, 失败回调结果, 服务名(跟plugin.xml的js-module的name一致), actions, 传参
*/
exec(function (result) { }, function (result) { }, "ToastPlugin", "showToast", [aString]);
}
var toastplugin = new ToastPlugin();
module.exports = toastplugin;
ToastPlugin.java
package com.test.toastplugin;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaInterface;
import android.util.Log;
import android.widget.Toast;
import org.json.JSONArray;
import org.json.JSONException;
public class ToastPlugin extends CordovaPlugin {
public static final String TAG = "toastplugin";
public ToastPlugin() {
}
// 插件初始化时调用
public void initialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);
Log.v(TAG, "初始化");
}
public Boolean execute(final String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
final int duration = Toast.LENGTH_sHORT;
if (action.equals("showToast")) {
cordova.getActivity().runOnUiThread(new Runnable() {
public void run() {
Toast toast;
try {
toast = Toast.makeText(cordova.getActivity().getApplicationContext(), args.getString(0), duration);
toast.show();
}
catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
);
}
return true;
}
}
execute()
函数里面第三个参数callbackContext
,可以返回结果给js入口的回调使用
callbackContxt.success("success msg");
callbackContext.error("error message");
这样就一个简单的吐司插件就封装完成了,接下来在项目引入插件,在工程目录下执行
# 此时插件文件夹在工程目录下
cordova plugin add ./ToastPlugin
# 然后cordova compile 老版本 cordova build
页面调用接口
必须监听deviceready完成后才能调用
document.addEventListener('deviceready', function() {
document.getElementById("btnOpenCamera").onclick = function() {
ToastPlugin.showToast("hello world");
}
}, false);