PhoneGap 4.2.0-0.24.2(Cordova 4.3.0)插件指南
1. 前言
利用phonegap的扩展可以实现用web API调用手机的本地功能,如二维码扫描,拍照等。而由于 phonegap 升级较快,在 3.X 之后改变了它的插件机制,所有调用手机原生的功能全部以外部插件的形式提供,创建 phonegap 项目之后不再能够直接调用系统功能 API 如 camera ,device 等,所以必须以插件的形式引入到项目中来,才能够使用。
2. 使用第三方插件
> cordova plugin searchkeyword(搜索相关keyword插件)
> cordova plugin addorg.apache.cordova.device
> cordova plugin add org.apache.cordova.console
> cordova plugin ls
插件可以从很多地方安装:
第三方插件库:http://plugins.cordova.io/#/
插件名(从plugin repository下载):cordova plugin addorg.apache.cordova.console
git地址:cordovaplugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
本地地址:cordova plugin add d:\cordova-3.3.0\cordova-plugin-camera
本地文件:cordova plugin add plugin.tar.gz
指定版本
cordova plugin add org.apache.cordova.console@0.2.1
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
等等
3. 自定义插件
(1) 新建class文件(插件类),继承CordovaPlugin,重写execute()方法:
Echo.java
import android.util.Log;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import org.json.JSONArray;
import org.json.JSONException;
/**
* Created by Rickyon 3/9/2015.
*/
public class Echo extends CordovaPlugin {
//初始化
@Override
public voidinitialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);
// yourinit code here
}
@Override
publicboolean execute(String action, JSONArray args, CallbackContext callbackContext)throws JSONException {
if(action.equals("echo")) {
String message = args.getString(0);
this.echo(message, callbackContext);
return true;
}
returnfalse;
}
private voidecho(final String message, final CallbackContext callbackContext) {
/**
* Theplugin's JavaScript does not run in the main thread of the WebView interface;
* instead,it runs on the WebCore thread, as does the execute method.
* If youneed to interact with the user interface, you should use the followingvariation:
*/
cordova.getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
if(message != null && message.length() > 0) {
Log.e("messageis","......................"+message);
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty stringargument.");
}
}
/**
* Usethe following if you do not need to run on the main interface's thread,
* but donot want to block the WebCore thread either:
*
*cordova.getThreadPool().execute(newRunnable() {
* public void run() {
* ...
* callbackContext.success(); // Thread-safe.
* }
*});
*/
});
}
}
(2) 在JS中调用Native code:
(注:cordova.exec(successcallback, failcallback, service, action, array);为JavaScript调用Nativ code的入口,其通过匹配service在config.xml文件中对应的文件位置(包),找到对应的Java文件,并执行里面的execute方法。其中successcallback和failcallback分别为成功或者失败时要调用的function,service为插件名,action为js要完成的动作,array为Json信息)
echo.js
window.echo = function(str, callback) {
cordova.exec(callback, function(err){callback('Nothing to echo.'); }, "Echo", "echo", [str]);
}
(3) 在index.html中调用js代码:
(注:1、addEventListener为cordova中的API事件监听器;2、得监听deviceready事件,否则插件不起作用。)
index.html
<script>
document.addEventListener("deviceready",onDeviceReady, false);
function onDeviceReady() {
window.echo("Hello,Plugin!", function(echoValue) {
alert(echoValue == "Hello,Plugin!");
});
}
</script>
(4) 在config.xml中注册插件:
(注:feature的name为上面cordova.exec()中Service,一般使用java文件名。而com.oocl.myapplication.echo为Echo.java文件的位置。Param的name等于onload,表示app的webview加载时也加载。)
config.xml
<!--Plugins -->
<featurename="Echo">
<param name="android-package"value="com.oocl.myapplication.plugins.Echo" />
<param name="onload" value="true" />
</feature>