cordova自定义插件流程

在H5 app开发过程中，有时候需要用到各种插件来调用底层设备，比如摄像头、返回键等功能，像这些都是比较常见的，而且这些插件也有现成的。但有时候需要用到的一些个性化的插件，比如如何分享链接到企业微信，在微信中，提供了JS-SDK来调用底层设备或者分享功能，但是如果使用cordova打包成apk之后，就无法使用，因此需要开发自定义插件，通过调用原生的方式来实现。下面介绍下在cordova工程中如何开发自定义插件。

一、安装plumam命令行工具

在命令行窗口输入：

npm install  -g  plugman

二、安装完之后创建插件

plugman create  --name pluginName  --plugin_id pluginID  --plugin_version version  [--path path]  [--variable NAME=VALUE]

参数说明：

• pluginName：插件名称，如WechatShare；
• pluginID：插件id, 如:info.2bowl.wechat.share；
• version：版本号, 如:1.0.0；
• path：插件存放的绝对或相对路径；
• variable NAME=VALUE：扩展参数，如说明或作者

示例：

plugman create  --name  WechatShare  --plugin_id info.2bowl.wechat.share  --plugin_version 1.0.0

三、添加platform

创建完插件后，切换到插件根目录下

cd WechatShare

然后添加android和ios平台

plugman platform add  --platform_name android

plugman platform add  --platform_name ios

之后可以看到在src目录下生成了ios和android两个目录，这里以android为例：

public  class  WechatShare  extends  CordovaPlugin  {

  @Override

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

    if  (action.equals("coolMethod"))  {

        String  message  =  args.getString(0);

        this.coolMethod(message,  callbackContext);

        return  true;

    }

    return  false;

  }

  private  void  coolMethod(String  message,  CallbackContext callbackContext)  {

    if  (message  !=  null  &&  message.length()  >  0)  {

        callbackContext.success(message);

    }  else  {

        callbackContext.error("Expected one non-empty string argument.");

    }

  }

}

默认生成的是coolMethod方法，这里可以将他给为我们自定义的方法名即可。例如我修改为shareMediaLink,修改完成之后，在shareMediaLink方法里写业务逻辑。

public  class  WechatShare  extends  CordovaPlugin  {

  @Override

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

    if  (action.equals("shareMediaLink"))  {

        String  message  =  args.getString(0);

        this.coolMethod(message,  callbackContext);

        return  true;

    }

    return  false;

  }

  private  void  shareMediaLink(String  message,  CallbackContext callbackContext)  {

    if  (message  !=  null  &&  message.length()  >  0)  {

        callbackContext.success(message);

    }  else  {

        callbackContext.error("Expected one non-empty string argument.");

    }

  }

}

修改完之后，切换到www目录下，修改WechatShare.js

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

exports.shareMediaLink  =  function  (arg0,  success,  error)  {

    exec(success,  error,  'WechatShare',  'shareMediaLink',  [arg0]);

};

四、创建package.json文件

这里利用npm init来自动生成package.json

{

"name":  "WechatShare",

  "version":  "1.0.0",

  "description":  "WechatShare",

  "cordova":  {

    "id":  "info.2bowl.wechat.share",

    "platforms":  [

      "android",

      "ios"

    ]

  },

  "keywords":  [],

  "author":  "5loong",

  "license":  "MIT"

}

五、安装已开发插件

如果已经创建了cordova工程，那么在cordova工程下执行如下命令：

cordova plugin add  E:\KuoYuApp\plugins\WechatShare

安装完之后，在项目中进行调用

cordova.plugins.WechatShare.shareMediaLink('test');

猫头鹰工作室 » 如何自定义Cordova插件