最近公司给了用iOS给cordova写插件的任务,网上查了下相关资料还是挺少的,而且都很老了,经过一番探索,终于搞定了,再次记录一下,希望能帮到有同样需求的伙伴们!
下面是本人对编写cordova插件的过程,有不足之处欢迎指出!1.安装plugman (前提是先安装node.js)
打开终端,输入命令: npm install -g plugman
2.创建插件
plugman create --name 插件名 --plugin_id 插件ID --plugin_version 插件版本号
例子 plugman create --name WLToast --plugin_id cordova-plugin-WLtoast --plugin_version 1.0.0
输入完上方命令后,会在默认安装路径(我的是desktop)会生成一个WLToast的文件夹,文件里面包含三个
分别为
plugin.xml :关于插件的一些配置信息,例如插件名称、插件id、版本号和平台信息等。如下图所示:
src文件夹,里面主要包含两个文件夹分别是ios和android,里面放着ios和安卓所需要的类、资源等文件,现在还未添加平台,所以目前src文件夹是一个空文件夹,下面第三步中会提到添加平台。
www文件夹,里面包含一个WLToast.js文件,里面是对插件入口方法进行到处,以便在ionic项目中js文件中可以调用
3.添加平台信息
打开终端,cd到插件目录 依次执行
plugman platform add --platform_name android
plugman platform add --platform_name ios
执行上方命令后,你会发现src文件夹中多出了ios和android两个文件夹,文件夹下分别是WLToast.m文件和WLToast.java文件。因为对安卓开发不熟,所以只对ios进行分析,其实原理是一样的。
ios文件夹下面只有一个WLToast.m文件,做过ios原生开发的都清楚,iOS项目中一个类一般由一个.h和一个.m文件组成,这里命令行帮我们把这2文件整合到一起了,所以为了好理解,我这里把它拆成了两个文件.
拆开后.h文件
#import
#import "CustomAlert.h"
@interface WLToast : CDVPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end
.m
#import "WLToast.h"
@implementation WLToast
- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
CustomAlert *alert = [[CustomAlert alloc]initWithFrame:[UIScreen mainScreen].bounds];
alert.delegate = self;
[alert alertShow];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
}
@end
补充一下 :上方导入CustomAlert.h文件及其代理,是我用原生代码封装好的一个建议提示框,因为提示框里面用到了代理协议,所以我们需要在WLToast.h中也要声明这个代理。WLToast这个类其实就相当于原声代码与js过度的一个类,cordova起到桥梁作用(也属于本人理解)。然后我们把我们索要传递的值都可以在这个类中所声明的方法中进行传递。
4.生成package.json文件
执行完上方命令后,插件并未完整,一个插件必须要package.json这个文件,不然安装不上,
cd 到插件路径下,plugman createpackagejson [插件路径]
点击enter键,直到yes结束 如果顺利执行,插件基本生成。
5.安装插件
cd到onic项目中,执行
cordova plugin add [插件路径]
如果返回
Installing "cordova-plugin-WLToast" for ios
Adding cordova-plugin-WLToast to package.json
Saved plugin info for "cordova-plugin-WLToast" to config.xml
表示插件安装成功,安装成功后 最好执行
cordova build ios 命令检测插件代码模块是否正确
6.插件调用
在ionic项目中js,
if(window.cordova)
cordova.plugins.WLToast.coolMethod('arg',function(succeed){
},function(error){
});
网友评论