Cordova自定义iOS插件 调用原生sdk

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 

@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

这是插件的配置文件

  GameSDKPlugin
  
    
  
  
    
      
        
      
    
    
    
  

在iOS的工程中，我们的调用如下：index.html

    
        
        
            
            
            
    
    
        调用gameSdkPlugin 

    

我们最后的结果是：

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)});

注意：

亲身体验，这个YLeGameSDKPlugin.js里面的方法不要使用=>箭头函数，这个函数会导致低版本的ios开机是白屏，这好像是由于低版本的ios对ES6低版本的语法不支持，不能解析造成的，注意将箭头函数改成function的方式使用.