Cordova插件开发流程

插件开发简介:插件的开发大体上分为查询类插件,操作类插件,请求类插件.每种插件一般需要不同的处理及返回方式.大部分插件的开发基本上都是在android源码的基础上继承CordovaPlugin类,使用CallBack对象返回结果。

Android环境下

1、准备工作

在android原生的基础上进行cordova插件开发，可以在android上代码实现相应的功能后把代码集成进cordova工程，也可以直接在cordova工程中开发相应的代码。

以在cordova工程中为例:具体操作步骤如下 @cordova环境配置
cordova环境配置的基础是JDK环境变量和SDK环境变量都已经配置完成

1.配置cordova环境,安装nodejs
2.创建cordova工程

cordova create hello com.example.hello HelloWorld

3.添加平台,首先要进入到工程的根目录下(如果添加android平台如下)

cordova platform add android

4.运行app,运行到手机上或者模拟器上
注:app编译或者运行的时候会下载gradle环境,需要网络通畅(尽量能够翻墙);

cordova run android

2.插件开发

cordova的环境准备和工程创建完成后就可以进行下一步了,现在需要配置工程中的开发插件的环境.

插件的环境配置在开发阶段是xml和js文件的定义. @cordova插件配置
例如要开发一个前端js传参让android弹出一个Toast的插件

1.定义插件对于前端js的调用方法

在主工程中找到Project\platforms\android\assets\www\plugins目录(插件的实现方法定义区),在目录下新建cordova-plugin-toast/www目录(二级目录),目录中新建toast.js文件,js中的代码如下:

cordova.define("cordova-plugin-toast.toast", function(require, exports, module) {
	var exec = require('cordova/exec');
	exports.showToast= function(success, error,args) {
    exec(success, error, "Plugin_Toast", "showToast", [args]);
		};
	});

1.在这段js中,define括号后面的cordova-plugin-toast是插件的id,在"."后的toast是插件的name,exports后跟的是插件对前端js所暴漏的方法,方法里的三个参数分别是插件调用成功后的处理,失败后的处理,以及传递的参数.

2.方法里面的exec方法是cordova环境下调用原生android的入口,其中第二个参数是要调用的原生android类的feature的name,第三个参数在原生的代码中定义用来弹出toast的动作,这个在插件开发下一步中会用到.

扫描二维码关注公众号，回复： 4516105 查看本文章

2.定义前端js的调用方式

在主工程中找到Project\platforms\android\assets\www目录下,找到cordova_plugins.js文件,在module.exports = […]的数组中添加我们自定义插件的内容,代码如下

 {
            "id": "cordova-plugin-toast.toast",
            "file": "plugins/cordova-plugin-toast/www/toast.js",
            "pluginId": "cordova-plugin-toast",
            "clobbers": [
                "cordova.toast"
            ]
        }

上述代码中:
“id”:就是第一步中我们定义的插件的id和name的组合
“file”:是对应的第一步中的toast.js所在的相对路径
“pluginId”:插件的id
“clobbers”:把插件封装进cordova.toast对象,方便js调用

注意:每个插件的定义以逗号隔开,否则工程运行时会提示插件初始化错误.

3.开发具体的android功能

1.在android的src下新建com.cordova.toast目录,新建Plugin_Toast类.并且继承CordovaPlugin类,代码如下

	package com.cordova.toast;

import android.widget.Toast;

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;
import org.json.JSONObject;

public class Plugin_Toast extends CordovaPlugin {

 @Override
 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

  switch (action){
   case "showToast":
        JSONObject params = args.getJSONObject(0);
       Toast.makeText(cordova.getActivity(),params.getString("context"),Toast.LENGTH_LONG).show();
       JSONObject jsonObject = new JSONObject();
      jsonObject.put("reslut","I am back");
      callbackContext.success(jsonObject);
      break;
 }
  return true;
 }
}

参数简介
1.action:第一步中js传递的调用动作
2.callbackContext对象用来对结果进行返回,成功时使用success返回,失败使用error返回.

4.连接android原生与cordova环境

在主工程中找到Project\platforms\android\res\xml目录下,找到config.xml文件,在widget标签下添加feature标签,如下

  <feature name="Plugin_Toast">
    <param name="android-package" value="com.cordova.toast.Plugin_Toast" />
  </feature>

参数介绍:
name: 第一步中使用的feature的name,相当于把android类暴露给cordova环境
value: android类所在的相对位置

到现在为止,一个完成的插件开发就完成了,现在只需要在前端的页面中调用就行了.

调用插件

在主工程中找到Project\platforms\android\assets\www目录下,找到index.html,使用如下方法便可以调用插件并且拿到返回结果

      var showToast = function(){
        cordova.toast.showToast(
        function(res){ console.info(JSON.stringify(res));},
        function(err){console.info(err);},
        {"context":"I am a Toast!"} );
        }