plugman创建自定义cordova插件

文章转自http://blog.csdn.net/b2259909/article/details/52471178?locationNum=2，并在此文章基础上稍微作了写修改；

cordova 编写插件

一. 前提：cordova 安装OK

按照这里的指南安装cordova：http://cordova.apache.org/#getstarted

我自己创建了一个工程：

cordova create ABCD

进入工程目录：

cd ABCD

添加两个平台：

cordova platform add  ios  android

1
1

安装 plugman ：

npm install -g plugman

试试安装device插件：

cordova plugin add cordova-plugin-device

删除插件： 

cordova plugin rm cordova-plugin-device

以上都需要已经有Android 和 ios开发环境

测试工程建立完毕

二. 使用 plugman 创建插件模板

比如我们创建一个插件名为 MyMath，ID 为 SimpleMath ，版本号为 1.0.0的插件：

#创建插件
plugman create --name MyMath --plugin_id SimpleMath --plugin_version 1.0.0

#进入插件目录
cd MyMath

#plugin.xml 增加Android平台
plugman platform add --platform_name android

#plugin.xml 增加iOS平台
plugman platform add --platform_name ios

1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
生成的插件文件结构为：

|MyMath
----|src
---------|android
--------------MyMath.java
---------|ios
--------------MyMath.m
----|www
---------|MyMath.js
----plugin.xml

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

插件模板建立完毕

三. 修改模板

看看 plugin.xml 的内容

<?xml version='1.0' encoding='utf-8'?>
<plugin id="SimpleMath" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>MyMath</name>
<js-module name="MyMath" src="www/MyMath.js">
<clobbers target="cordova.plugins.MyMath" />
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="MyMath">
<param name="android-package" value="SimpleMath.MyMath" />
</feature>
</config-file>

<config-file parent="/*" target="AndroidManifest.xml" />
<source-file src="src/android/MyMath.java" target-dir="src/SimpleMath/MyMath" />
</platform>

<platform name="ios">
<config-file parent="/*" target="config.xml">
<feature name="MyMath">
<param name="ios-package" value="MyMath" />
</feature>
</config-file>

<source-file src="src/ios/MyMath.m" />
</platform>
</plugin>

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
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
*这里我只是做演示，并没有其他文件了。所以不去对 config-file 标签做自定义了，默认就好。如果需要对Android的 AndroidManifest.xml 做修改，可以在此标签做。主要是 **增加权限申明，注册activity，receiver** 等。*
上面这个文件我们只在Android平台修改这一句：

source-file src=”src/Android/MyMath.Java”
target-dir=”src/SimpleMath/MyMath”

为：

source-file src=”src/android/MyMath.java”
target-dir=”src/SimpleMath”

为什么修改这里： 因为如果不修改，MyMath.java会拷贝到src/SimpleMath/MyMath这个包下。等会对应不上，这个估计是plugman的bug吧。 这是小细节，你只要知道一个事情，在Android平台下，plugin.xml下的：

param name=”android-package” value=”SimpleMath.MyMath”

定义Android平台下的底层实现的 ***包名.类*** ： SimpleMath 是包名，MyMath 是类名 如果不对应，修改路径或者xml。
*如果后续开发有其他的类文件，so ，framework。请参考官方的插件添加xml标签*

这里有几个定义，最好理解一下：

clobbers ： 非常重要。前端工程师在使用的时候通过这个 clobbers 去调用www/MyMath.js的公开方法
feature 标签定义了 （服务名）name
param name=”ios-package” value=”MyMath” 定义iOS平台下的底层实现类名为 ： MyMath
param name=”android-package” value=”SimpleMath.MyMath” 定义Android平台下的底层实现的 包名.类 ： SimpleMath.MyMath

看看 www/MyMath.js

var exec = require('cordova/exec');

exports.coolMethod = function(arg0, success, error) {
exec(success, error, "MyMath", "coolMethod", [arg0]);
};

1
2
3
4
5
1
2
3
4
5

假设我们底层会实现两个方法：相加 和 相减 

这里改动一下。改为：

var exec = require('cordova/exec');
var myMathFunc = function(){};

myMathFunc.prototype.plus = function(arg0, success, error) {
exec(success, error, "MyMath", "Plus", arg0);
};

myMathFunc.prototype.minus = function(arg0, success, error) {
exec(success, error, "MyMath", "Minus", arg0);
};

var MYMATHFUNC = new myMathFunc();
module.exports = MYMATHFUNC;

1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

注意： 需要说明的是，这个cordova方法exec里的参数分别为：

【success】 ： 成功回调 

【error 】 ： 失败回调 

【MyMath】 ： 服务名（必须和 plugin.xml定义的服务名保持一致） 

【Plus】 ： Action 动作名。(底层实现根据Action字符串调用不同的方法) 

【arg0】： 参数，必须是数组。 可以是json的数据：[{“key”:”value”,”key”:”value”}] 

————— 也可以是[“value1”,”value2”,”value3”,…]

再次说明： 这个js有个module.exports ，我以为前端调用的时候是直接用

MYMATHFUNC.plus(arg0, success, error)

。不过测试发现，其实是要用 plugin.xml 定义的那个 clobbers ：

cordova.plugins.MyMath.plus(arg0, success, error)

四. 到这里就可以理一下思路

js 调用 –> cordova.plugins.MyMath.plus(arg0, success, error)

cordova的接口exec –> exec(success, error, “MyMath”, “Plus”, arg0);

调用底层实现各自平台(ios或者Android)下的类MyMath。

Android上会调用

public boolean execute(String action, CordovaArgs args, 

CallbackContext mCallbackContext) throws JSONException 

此时参数String action = “Plus”，入参可以从 args获得。

js入参如果是[“value1”,10,”value3”,…]，则可以使用：
第一个参数 ： args.getString(0) 

第二个参数 ： args.getInt(1) 

第三个参数 ：args.getString(2)…

js入参如果是[{“key”:”value”,”key”:”value”}]，则可以使用：
JSONArray jsonarray = new JSONArray(args.getString(0)); 

JSONObject json = jsonarray.getJSONObject(0); //再根据key取值

ios上会调用

-(void)Plus:(CDVInvokedUrlCommand*)command

此时参数由 command获得：

回调的ID： command.callbackId

js入参如果是[“value1”,10,”value3”,…]，则可以使用：
第一个参数 ： [command.arguments objectAtIndex:0] 

第二个参数 ： [command.arguments objectAtIndex:1] //需转int 

第三个参数 ： [command.arguments objectAtIndex:2]

js入参如果是[{“key”:”value”,”key”:”value”}]，则可以使用：
NSDictionary *dict = [command.arguments objectAtIndex:0]；

五.原生代码实现

现在为了实现这个底层的代码，我们先把这个插件添加到前面建好的工程：

cd ABCD 

~$ cordova plugin add ../MyMath 

Installing “SimpleMath” for android 

Installing “SimpleMath” for iOS

在添加插件时，提示 invaid package.json file，原来是MyMath目录下么有生成插件对应的package.json文件。这里利用plugman工具生成该文件：

plugman createpackagejson MyPath,中间会有一些提示，随便填写就好。之后如果生成的package.json文件不在MyPath目录下，则将其拷贝到该目录，然后重新添加插件到工程。

如果cordova plugina add MyPath命令执行过程中出现了downloading gradle的情况，可能会花很长时间去下载。这时可以找到“platforms\android\cordova\lib\builders”对应目录下GradleBuilder.js文件，在其中找到var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL']
|| 'https\\://services.gradle.org/distributions/gradle-3.3-all.zip';对应代码，将其替换为var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'gradle-3.3-all.zip';同时，在“platforms\android\gradle\wrapper”对应目录下添加“gradle-3.3-all.zip”。grade版本可能不同，这里只是举个例子。

Android

打开IDE,将cordova工程里 platforms/android 导入。编辑MyMath.java



修改为 ：

ios

双击 cordova工程里 platforms/ios/HelloCordova.xcodeproj,打开xcode工程，编辑MyMath.m



修改为 ：



这里我们规定 A-B > 0 ，底层返回成功的结果 ，A-B<=0 返回失败提示 

A+B < 100 返回成功结果 , A+B >=100 失败提示

六. 测试插件

js调用测试

index.js



index.html



在 cordova 目录ABCD下，分别替换 www下 index.html 和 js/index.js
执行 cordova prepare
在Android IDE工程直接运行。
在xcode中直接运行。

最后测试的工程下载链接：http://download.csdn.net/detail/b2259909/9625520