PhoneGap 4.2.0-0.24.2(Cordova 4.3.0)插件指南

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>