引言:
本文仅针对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开发人员使用
</br>
一.创建ios插件源文件
首先找到Plugins文件夹,该文件夹下存放的是所有插件的源码文件
创建我们的插件文件夹 com.amCordova.amAlert文件夹
插件文件夹的命名规范还是要遵守一下的,类似bundleID很好理解
</br>
</br>
在刚创建的文件夹下新建代码文件,继承cordova框架的CDVPlugin
</br>
</br>
改动一下import
因为.h文件飘红了!cordova框架还是有bug的,毕竟是山寨我们原生的东西,傻逼弄个疤！
#import <Cordova/CDVPlugin.h>
@interface AMAlertHelper : CDVPlugin
@end
</br>
</br>
二.实现插件的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调用我们时给我们的入参
</br>
</br>
三.配置config.xml文件
为了让JS能够调用我们的OC类,我们必须配置config.xml文件
注意:是Staging下的config文件
添加如下代码
<feature name="ocAlertModel">
<param name="ios-package" value="AMAlertHelper" />
</feature>
</br>
</br>
四.简述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交互,有时间的话我会更一发
</br>
cordova插件同理,配置了config.xml后,cordova则会在编译时,将我们的插件类以模型方式注入到它的WebView中,并且对象名称就是我们配置的name属性
JS在调用时就直接使用该对象名进行调用
</br>
</br>
五.写JS代码来调用我们的插件进行测试
回到Staging下的index.html文件,直接替换如下代码
<!DOCTYPE html>
<html>
<head>
<title>AMAlert</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">
//调用OC插件方法
function alertShow() {
//以字符串形式调用OC注入模型的实例方法
//通过cordova 将我们的模型名称,方法名,参数,成功回调的func及失败回调的func 传入
cordova.exec(alertSuccess,alertFail,"ocAlertModel","showAlertWithTitle",["Hey,I'm JS!"]);
}
//调用成功的回调函数
function alertSuccess(msg) {
alert(msg);
}
//调用失败的回调函数
function alertFail(msg) {
alert('调用OC失败: ' + msg);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:17px;" onclick="alertShow();">调用OC插件</button> <br>
</body>
</html>
</br>
到此为止,简易插件的开发已经完成了,最终效果走一下
</br>
</br>
六.将oc方法映射成js代码上,并将插件打包供h5开发人员使用
完成以上这些只是插件开发好了,然而问题是
- js调用oc插件是通过字符串形式的,我们不能这么低端,要让h5开发者通过js语言直接调用插件
- h5的开发人员并没有安装x-code那么高端大气上档次的软件,我们需要将插件单独打包给他们
