[ios开发Cordova插件] - 支持入参及调回的插件开发

引言:

本文仅针对ios开发者,初次涉及cordova插件开发
插件开发前首先确认你已配置好cordova的开发环境,并已创建了ios工程
见前篇[ios开发Cordova插件] - 安装及项目创建

当然如果你不创建cordova的ios工程,也可以开发插件.
但我更希望看我文章的人能够在cordova工程下进行开发,并理解各项cordova配置项的作用.而不是在某某文件下建oc文件在某某文件下建配置文件的单纯PY交易,开发完成后依然一脸懵逼

这里我们做一个oc及js互相伤害的小demo
js调用oc弹出一个带入参的ActionSheet插件点击确定按钮后回调至js给他们一个自定义msg,并弹出html的alert

教程目录如下,请根据自己进度自行选择阅读
1.创建ios插件源文件
2.实现插件的OC代码编写(包括OC回调JS)
3.配置config.xml文件
4.简述Cordova插件运作原理
5.写JS代码来调用我们的插件进行测试
6.将oc方法映射成js代码上,并将插件打包供h5开发人员使用

总目录:Cordova插件开发及打包完全指北[ios]

一.创建ios插件源文件

首先找到Plugins文件夹,该文件夹下存放的是所有插件的源码文件
创建我们的插件文件夹 com.amCordova.amAlert文件夹

插件文件夹的命名规范还是要遵守一下的,类似bundleID很好理解

692D47AD-C755-4C28-A6C3-4775BE6525FA.png

在刚创建的文件夹下新建代码文件,继承cordova框架的CDVPlugin

F028C9C1-6143-4479-BF57-3163F31824BD.png

改动一下import

因为.h文件飘红了!cordova框架还是有bug的,毕竟是山寨我们原生的东西,傻逼弄个疤！

#import 

@interface AMAlertHelper : CDVPlugin

@end

二.实现插件的OC代码编写(包括OC回调JS)

在AMAlertHelper.m实现alert调用及回调js方法
.h里需要声明方法这里就不多BB了

-(void)showAlertWithTitle:(CDVInvokedUrlCommand *)command{
    
    if (command.arguments.count>0) {
        //获取到入参数组中的第一个元素
        //自由约定入参数组的顺序
        NSString* title = command.arguments[0];
        
        //创建alertVC
        UIAlertController* alertVC = [UIAlertController alertControllerWithTitle:title message:nil preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction* action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            //创建一个回调对象并附上String类型参数
            CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"Hey!I'm OC!"];
            //通过cordova框架中的callBackID回调至JS的回调函数上
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        }];
        [alertVC addAction:action];
        [self.viewController presentViewController:alertVC animated:YES completion:nil];
    }else{
        //如果没有入参,则回调JS失败函数
        CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"没有入参alert title"];
        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }
    
}

方法的入参必须是CDVInvokedUrlCommand对象,我们经常用到有:
callbackID对应我们需要回调js时,指定发送的函数id
_arguments对应JS调用我们时给我们的入参

三.配置config.xml文件

为了让JS能够调用我们的OC类,我们必须配置config.xml文件
注意:是Staging下的config文件
添加如下代码

四.简述Cordova插件运作原理

这里简单解释下为什么要配置config.xml文件及cordova插件原理,依葫芦画瓢的可以直接跳过
当我们自己做原生的UIWebView于JS做交互时,可以通过注入模型的方式来做
我们会在UIWebView 加载完成的代理中写上如下代码

self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 AMAlertHelper * ocAlertmodel  = [[AMAlertHelper alloc] init];
 self.jsContext[@"AMAlertModel"] = ocAlertmodel;
 ocAlertmodel.jsContext = self.jsContext;
ocAlertmodel.webView = self.webView;

这样WebView中就有了我们的ocAlertmodel对象,那么当JS代码有调用ocAlertmodel对象的方法,则会进入到模型的实例方法中,完成JS对OC的调用
想深入了解的可以去看看OC与JS交互,有时间的话我会更一发

cordova插件同理,配置了config.xml后,cordova则会在编译时,将我们的插件类以模型方式注入到它的WebView中,并且对象名称就是我们配置的name属性
JS在调用时就直接使用该对象名进行调用

五.写JS代码来调用我们的插件进行测试

回到Staging下的index.html文件,直接替换如下代码



    
        AMAlert

到此为止,简易插件的开发已经完成了,最终效果走一下

插件开发及OC回调效果.gif

六.将oc方法映射成js代码上,并将插件打包供h5开发人员使用

完成以上这些只是插件开发好了,然而问题是

js调用oc插件是通过字符串形式的,我们不能这么低端,要让h5开发者通过js语言直接调用插件
h5的开发人员并没有安装x-code那么高端大气上档次的软件,我们需要将插件单独打包给他们

详情见[ios开发Cordova插件] - 插件打包及映射js代码