在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');
网友评论