1、安装Cordova
sudo npm install -g Cordova
2、使用Cordova 创建打包工程
cordova create 项目名称 BundleID 工程名字
//例如cordova create GameSDK com.gamesdk.YLe GameSDK
创建bundleId为com.gamesdk.YLe的名为GameSDK 的工程
3、增加平台
cd MyApp
cordova platform add browser(平台)
cordova platform add ios 增加iOS平台
image.png
这时候已经生成了打包的工程信息
4、安装plugman
sudo npm install -g plugman
5、使用plugman生成插件框架
plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]
例子：
plugman create --name GameSDKPlugin --plugin_id cordova-plugin-gamesdkplugin --plugin_version 1.0.0
6、进入插件平台，生成平台插件
//进入插件目录
cd Game
//增加平台android 和 iOS
plugman platform add --platform_name android
plugman platform add --platform_name ios
我们只看iOS部分的，此时插件模板建立完毕。
7、初始化插件
npm init
结果在此过程中出现的提示
image.png
8、将插件增加到cordova项目
进入到cordova的项目下面
cordova plugin add 插件所在的目录
将插件添加到iOS的项目中
9、将插件打包到iOS平台里面
cordova build ios
我们 将插件打包到ios的项目中。
我们可以查看Staging->www->plugins下面我们会看到添加到ios项目工程里的插件
我们整个的过程基本完成了。
接下来我们就制作插件。
插件制作
上面我们已经制作了插件，但是插件的内容我们还未来写，接下来我们来看这个插件。
我可以看到我们才开始的文件的结构是这样的：
image.png
接下来我们就要操作修改文件：
GameSDKPlugin.h
#import <Cordova/CDV.h>
@interface GameSDKPlugin : CDVPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end
GameSDKPlugin.m
传递2个参数并返回2个结果
/********* GameSDKPlugin.m Cordova Plugin Implementation *******/
#import "GameSDKPlugin.h"
@implementation GameSDKPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
NSLog(@"coolMethod use");
CDVPluginResult* pluginResult = nil;
NSString* name = [command.arguments objectAtIndex:0];
NSString* userNo = [command.arguments objectAtIndex:1];
if (name != nil && [name length] > 0 && userNo != nil && [userNo length] > 0) {
// pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsArray:@[name, userNo]];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
@end
解释：
1、文件生成了一个CDVPluginResult 的对象，这个对象存放着此次调用的结果，我们可以看到这个对象中除了状态之外还有返回的参数。
2、回调，我通过commandDelegate 将结果回调给www/下的xxx.js文件，根据是success还是failure回调相应的结果。
3、我们可以看返回的状态值都有什么
typedef enum {
CDVCommandStatus_NO_RESULT = 0,
CDVCommandStatus_OK,
CDVCommandStatus_CLASS_NOT_FOUND_EXCEPTION,
CDVCommandStatus_ILLEGAL_ACCESS_EXCEPTION,
CDVCommandStatus_INSTANTIATION_EXCEPTION,
CDVCommandStatus_MALFORMED_URL_EXCEPTION,
CDVCommandStatus_IO_EXCEPTION,
CDVCommandStatus_INVALID_ACTION,
CDVCommandStatus_JSON_EXCEPTION,
CDVCommandStatus_ERROR
} CDVCommandStatus;
4、我们可以看给最终对象添加返回值的时候的参数的方法：
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsString:(NSString*)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsArray:(NSArray*)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsInt:(int)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsNSInteger:(NSInteger)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsNSUInteger:(NSUInteger)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsDouble:(double)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsBool:(BOOL)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsDictionary:(NSDictionary*)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsArrayBuffer:(NSData*)theMessage;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsMultipart:(NSArray*)theMessages;
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageToErrorObject:(int)errorCode;
YLeGameSDKPlugin.js
为了再plugin.xml 中区分其中标签的不同，我们就讲js的文件名字修改，这样可以看出不同。
var exec = require('cordova/exec');
function GameSDK() {};
GameSDK.prototype.coolMethod = function (name,userNo, success, error) {
exec(success, error, 'GameSDKPlugin', 'coolMethod', [name,userNo]);
};
var gameSDKModel = new GameSDK();
module.exports = gameSDKModel;
plugin.xml
这是插件的配置文件
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-gamesdkplugin" version="1.0.0"
xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>GameSDKPlugin</name>
<js-module name="YleGameSDKPlugin" src="www/YleGameSDKPlugin.js">
<clobbers target="YleGameSDKPlugin" />
</js-module>
<platform name="ios">
<config-file parent="/*" target="config.xml">
<feature name="GameSDKPlugin">
<param name="ios-package" value="GameSDKPlugin" />
</feature>
</config-file>
<header-file src="src/ios/GameSDKPlugin.h" />
<source-file src="src/ios/GameSDKPlugin.m" />
</platform>
</plugin>
在iOS的工程中，我们的调用如下：index.html
<!DOCTYPE html>
<html>
<head>
<title>TestPlugin</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function gameSdkPlugin() {
YleGameSDKPlugin.coolMethod("YLe","001",alertSuccess,alertFail);
}
function alertSuccess(msg) {
alert(msg);
}
function alertFail(msg) {
alert('调用OC失败: ' + msg);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:17px;" onclick="gameSdkPlugin();">调用gameSdkPlugin</button> <br>
</body>
</html>
我们最后的结果是：
image.png
github
插件： cordovaIosPlugin
插件demo：cordovaIosPluginDemo
注意：
使用例子的时候最好重新引入一下，因为我是在本地做的，引入的路径是本地的，可能出现调不起的状态。
另外：
查看当前的项目所有的插件：
cordova plugin list
结果：
cordova-plugin-gamesdkplugin 1.0.0 "GameSDKPlugin"
cordova-plugin-whitelist 1.3.3 "Whitelist"
删除插件：
cordova plugin rm cordova-plugin-gamesdkplugin
删除插件直接使用你生成的Id就好了也就是你上面list的这些插件的插件ID。
好了，我这接下来就是去VUE项目中调用插件了.
补充
有些喜欢使用箭头函数的，我又改了一下。
YLeGameSDKPlugin.js
GameSDK.prototype.coolMethod = (name,userNo, success, error) => {
exec(success, error, 'GameSDKPlugin', 'coolMethod', [name,userNo]);
};
调用也做了相应修改
YleGameSDKPlugin.coolMethod("YLe","001",msg=>{alert(msg)},err=>{alert("调用OC失败"+ msg)});
