Create Cordova Plugin

创建一个cordova plugin

开发文档 创建cordova plugin流程如下(项目地址):

1 首先安装plugman, 通过plugman创建plugin, 创建plugin时指定的name只是项目的名称,cordova安装plugin时需要指定的是此处的plugin_id

npm install -g plugman

plugman create --name HelloCordovaPlugin --plugin_id hello.cordova.plugin --plugin_version 0.0.1

注意--name 是两个-

2 在www/Hello-Cordova-Plugin.js中添加一个sayHello方法, 代码如下:

1
2
3
  window.sayHello = function(success, error) {
    cordova.exec(success, error, "HelloCordovaPlugin", "sayHello", []);
  }

3 cordova.exec(successCallback, failureCallback,“service”,“action”, [])中调用了HelloCordovaPlugin, action为sayHello,所以得在plugin.xml中声明service为HelloCordovaPlugin,并为其指定对应的继承于CordovaPlugin的类.在src下创建src/com/plugin/HelloCordovaPlugin.java文件,plugin.xml文件中配置如下(feature声明了一个叫做HelloCordovaPlugin的service,其对应的class为com.plugin.HelloCordovaPlugin, 每创建一个新的java文件,得用source-file指定该文件的路径):

1
2
3
4
5
6
7
8
  <platform name="android">
    <config-file target="config.xml" parent="/*">
      <feature name="HelloCordovaPlugin">
        <param name="android-package" value="com.plugin.HelloCordovaPlugin"/>
      </feature>
    </config-file>
    <source-file src="src/com/plugin/HelloCordovaPlugin.java" target-dir="src/com/plugin"/>
  </platform>

4 HelloCordovaPlugin类得继承CordovaPlugin类, 程序的入口为execute, 其中action即为cordova.exec()中调用的action,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  package com.plugin;

  import org.apache.cordova.CordovaPlugin;
  import org.apache.cordova.CallbackContext;
  import org.json.JSONArray;
  import org.json.JSONException;
  import org.json.JSONObject;

  public class HelloCordovaPlugin extends CordovaPlugin {

    //程序的入口
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
      if (action.equals("sayHello")) {
        String message = "Hello, World";
        this.sayHello(message, callbackContext);
        return true;
      }
      return false;
    }

    private void sayHello(String message, CallbackContext callbackContext) {
      if (message != null) {
        callbackContext.success(message);
      } else {
        callbackContext.error("Can't be empty");
      }
    }
  }

5 使用该插件,创建一个cordova项目, Demo项目和插件处在同一个目录中

cordova create HelloCordovaPluginDemo

cordova platform add android

cordova plugin add ../HelloCordovaPlugin

6 打开HelloCordovaPluginDemo项目,在www/index.html中添加一个button, 代码如下:

1
  <button id="say-hello">SayHello</button>

7 在www/js/index.js中给该button添加一个点击事件, callback中的参数result是调用插件后响应的结果,代码如下:

1
2
3
4
5
6
7
8
9
  var callback = function(result) {
    alert(result);
  }

  var sayHello = document.getElementById("say-hello");

  sayHello.addEventListener("click", function() {
    window.sayHello(callback, callback);
  })

8 编译cordova项目并运行

cordova build

cordova run

9 点击button,弹出Hello,World 表明插件调用成功

Comments