Cordova自定义插件开发以及SDK集成

  • 1. 创建插件
  • 2. 修改plugin.xml
  • 3. 修改TestSdkDemo.java
  • 4. 分析TestSdkDemo中的代码
  • 5. 分析TestSdkDemo.js
  • 6.修改TestSdkDemo.java
  • 7. 修改TestSdkDemo.js
  • 8.插件使用
  • 9. 成果展示
  • 10. 参考文档


1. 创建插件

plugman crate --name [插件名]  --plugin_id [插件id] --plugin_version[插件版本号]

cordova 使用cordova插件_xml


初始化pakage.json,一路回车即可,后续修改可打开package.json进行修改

cordova 使用cordova插件_android_02


cordova 使用cordova插件_java_03


为插件添加平台

// plugman platform add --platform_name [平台]
plugman platfrom add --platform_name android

cordova 使用cordova插件_java_04

2. 修改plugin.xml

cordova 使用cordova插件_android_05

3. 修改TestSdkDemo.java

建议使用android studio项目打开这个文件,这样就有环境进行代码编写

cordova 使用cordova插件_android_06


修改包名为org.apache.cordova.testsdkdemo

cordova 使用cordova插件_android_07

4. 分析TestSdkDemo中的代码

cordova 使用cordova插件_cordova 使用cordova插件_08


在这里分析excute方法:

  1. action表示js调用方法传入的“动作”,在excute方法内部将action的值与提供给内部方法绑定在一起,可以看到在判断action的值等于"coolMethod"时调用coolMethod方法。JS部分action是必须要传入的。
  2. args表示外部js调用传入的一些参数,以数组存储。可以看到通过使用ags.getString(0)来取出下标为0的元素的值;如果外部没有传值,则为null,可以看到在coolMethod方法中对message进行非null判断和长度判断。JS部分args非必须传入的。
  3. callback用于回调结果给js,在js部分,需要传入一个success函数和一个error函数用于处理callback回调的结果,默认情况下,callbackContext.success()对应JS部分传入的success方法,callbackContext.error()对应JS部分传入的error函数。JS部分success函数和error函数是必须要传入的。

5. 分析TestSdkDemo.js

由于我不是搞前端的,对前端这些库也不太懂,这里就简单介绍一下。

cordova 使用cordova插件_android studio_09


exports.coolMethod=function()表示coolMethod作为函数提供给外部使用,外部可以通过【插件名.方法】的方式进行调用,例如,TestSdkDemo.coolMethod("haha",success,error)。函数接受三个参数,分别是arg0、success、error。

arg0表示传入的参数集合,外部调用coolMethod方法可以传入多个参数,这些参数都被arg0合入。

success为callback回调成功的函数,对应上面所说的callbackContext.success();

error为call回调失败的函数,对应上面所说的callbackContext.error().

exec对应着我们在TestSdkDemo.java中看到的excute方法,依次传入参数,其中,‘TestSdkDemo’表示我们的插件名,‘coolMethod’表示我们传进去的action,这里就对应着上面我们所讲的action的值的由来,[arg0]表示以数组形式将arg0传进去,对应着上面的args.

ps:exec函数中的参数列表不要写错顺序,以及success,error,‘TestSdkDemo’(插件名),‘coolMethod’(动作值)这几个值不能少。

6.修改TestSdkDemo.java

修改TestSdkDemo.java,提供一个显示Toast方法给外部调用。

cordova 使用cordova插件_android_10


修改excute方法

cordova 使用cordova插件_cordova 使用cordova插件_11

7. 修改TestSdkDemo.js

为外部js调用show方法提供js调用接口

cordova 使用cordova插件_cordova 使用cordova插件_12

8.插件使用

cordova项目安装插件

cordova plugin add D:\nodejs\node_projects\PluginDemo2\TestSdkDemo

给cordova项目中的index.html添加button

cordova 使用cordova插件_cordova 使用cordova插件_13


在cordova项目中的index.js中添加事件监听,调用TestSdkDemo.show。

cordova 使用cordova插件_cordova 使用cordova插件_14

9. 成果展示

cordova 使用cordova插件_android studio_15


写得不好,还请各位看官多多担待,后续还会写如何使用cordova插件来集成第三方sdk的文章。