官方
插件开发指南
Plugin.xml
因本人比较熟悉iOS , 所以创建的plugin 以iOS 为主, android 简单的涉及.
我们知道cordova plugin 是原生与html沟通的桥梁, cordova 可以说是一个webView,加载一个大的html 页面.相关的版面以html 网页的形式出现,而cordova plugin ,就好像你要打开手机的相机功能,单靠html是完成不了这个功能的.所以就需要cordova plugin的存在, 它异常的重要.
目标
这样添加plugin
希望我们最后这样使用就可以添加到cordova-plugin: (因未在registry.cordova.io中注册.暂指定备用URL)
cordova plugin add https://github.com/apache/cordova-plugin-console.git
- 也可以在https://github.com/apache/cordova-plugin-console.git => 后面加 #
在#字符后面附加备用git-ref，例如 标记或分支：
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
- 如果插件（及其plugin.xml文件）位于git repo中的子目录中，则可以使用:字符指定它。请注意，#仍然需要该 角色：
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
- 还可以将git-ref和子目录结合使用：
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
- 或者，指定包含该plugin.xml文件的插件目录的本地路径：
cordova plugin add ../my_plugin_dir
删除plugin
cordova plugin rm pluginName(可以打开本地plugin list 看, 也可以执行 cordova plugin list 看)
開始創建我們的Plugin
-
插件文件夹必须具有plugin.xml清单文件,所以我們可以简单地创建一个plugin.xml文件, 然后我们开始对里面的参数做一一讲解
plugin.xml
用工具打开plugin.xml.
netspay
Cordova Plugin netspay
peijue chen
cordova, plugin, enets, netspay
MIT
$GEOLOCATION_USAGE_DESCRIPTION
CFBundleURLName
bundle.id
CFBundleURLSchemes
netspaySchemes
到此我们的plugin.xml 就配置好了, 这里需要添加的文件就放到对应的文件夹下面就可以
目前我的结构类似这样
不单单这些
不单单这些
不单单这些
- 其中 LICENSE ,是许可证, 可以用txt 文件写一个,不要后缀,名字是: LICENSE就可以.
- package.json 可以说是配置文件吧.
- README.md , 可以写上这个plugin 怎么用之类的, 如果上传到gitHub , 它会插件的首页显示.
- src: 是放ios/android 原生代码的地方
- www: 放的是js 文件
package.json
// version/ name/description, 与plugin.xml中保持一致
// repository, 是你放到gitHub 上的仓库
// bugs 是gitHub的issues 讨论区
{
"version": "0.1.0",
"name": "cordova-plugin-netspay",
"cordova_name": "cordova-plugin-netspay",
"description": "cordova-plugin-netspay",
"license": "Apache 2.0",
"author": {
"name": "Joson",
"email": "[email protected]"
},
"repository": {
"type": "git",
"url": "https://github.com/PeiJueChen/cordova-plugin-netspay.git"
},
"bugs": {
"url": "https://github.com/PeiJueChen/cordova-plugin-netspay.git/issues"
},
"keywords": [
"cordova",
"plugin",
"netspay"
]
}
js 文件怎么写 , js 文件一般放在www 文件夹下, 这是规范
/**
*
* exec(callback, errorCallback, pluginName, actionName, argumentArray)
* callback 插件成功返回时调用，并将本机插件中的任何参数传递给它
* errorCallback在插件遇到错误时调用。我们在上面省略了这一点
* pluginName 是本机端的插件类名称。就是类名 (feature 下param 中的value , 它也要和原生代码中的类名对上.)
* actionName 是我们将在本机方面执行的操作。
* argumentArray 是传递给本机端的参数数组
*/
// prototype 屬於是為class 添加方法/屬於用到的
var exec = require('cordova/exec'),
cordova = require('cordova'),
// utils = require('cordova/utils'),
// 如果需要引用本地js, 已经在Plugin.xml 中
//
//
//PositionError = require('./PositionError');
var NetsPay = (function () {
// var platformId = cordova.platformId; // 'android' 'ios'
function NetsPay() {
// console.log("platformId: " + platformId + code);
}
// 建议加上cordova调用, 因为之后的版本cordova 提示说需要加cordova在前面调用
NetsPay.prototype.requestPay = function (echoValue, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, 'NetsPay', 'requestPay', [echoValue]);
};
return NetsPay;
})();
var netsPay = new NetsPay();
// 导出属性, 调试时, window. 就会有提示这个属性.
module.exports = netsPay;
下面看看 NetsPay 文件
- iOS
#import "NetsPay.h"
#import
#import
@interface NetsPay ()
@property (strong, nonatomic) NSString* requestPayCallbackId;
@end
@implementation NetsPay
- (void)requestPay:(CDVInvokedUrlCommand*)command
{
NSString* callbackId = [command callbackId];
self.requestPayCallbackId = callbackId;
// do something
[self pay:command];
// 说几点注意的, 传过来的参数可以根据 [command.arguments objectAtIndex:0]; 索引拿到
// 想调用回调时:
/*
CDVCommandStatus_OK , 这个值cordova 提供多种了,可以选择
NSDictionaray *dict = @{@"key":@"value"};
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
messageAsDictionary:dict];
[self.commandDelegate pluginResult callbackId:command.callbackId];
*/
// 如果call back 是异步调用,要
// [pluginResult setKeepCallback:[NSNumber numberWithBool:YES]];
}
*Android
package cordova.plugin.netspay;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class NetsPay extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("requestPay")) {
String message = args.getString(0);
this. requestPay(message, callbackContext);
return true;
}
return false;
}
private void requestPay(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
到此一个cordova plugin 就完成了
添加
- 建议先在本地使用, 因为本地安装时,如果写得有问题, 会安装提示失败及原因. 最后测试没问题再Push 到github .
-
可以把写好plugin 放在与测试工程同一级下, 执行:
cordova plugin add ../cordova-plugin-netspay(插件文件夹名, 要让他能够找到plugin.xml 文件)
如果你已经push 到github 可以执行
cordova plugin add github地址 --variable GEOLOCATION_USAGE_DESCRIPTION ="写上你想在xcode info.plist文件中对应key的value"
添加成功后.
使用
// cordova.plugins.netspay 这个名字是由
/*
clobbers中的target 来的
*/
try {
(window).cordova.plugins.netspay.requestPay({"hmac": "hmacfdsff3424"},
(s) => {
console.log('callback requestPay success', s);
}, err => {
console.log('callback requestPay err', err);
})
} catch (exception) {
console.log(' open requestPay error ', exception);
}
到此, 我们的cordova plugin 就创建结束, 如果想看关于swift怎么创建cordova插件, 请看我的另一篇文章:创建swift 版本的 cordova 插件,它会多几个注意点, 其实就是语法不同导致的.
补允: 如果是app 的使用者, 想添加pod ,可以在config.xml 中做以下配置 , ref