随着混合开发越来越受广大开发者的喜爱,由于上家公司的需求,有幸接触ionic3(之前一直是iOS开发),半年后离职来到现在公司,由于需求接触ionic1(ionic1和ionic3基本不一样)。时间虽然不还长,我想想说说我对这个的ionic开发的拙见。混合开发的优势在于可以快速实现UI,用html写页面比较方便,不用像原生开发为屏幕适配 而烦恼,站在公司的角度考虑,节约人力资源,不用再找一个安卓开发和一个ios开发了。当然也有缺点,没有原生代码开发流畅而且有些功能ionic现有技术无法实现。尤其是对于某些功能,例如多图选择,所以这个是时候我们需要用原生代码来构造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){
});
以上可能有不对的地方的 ,望大神指点,因为本人接触时间也不长,写这篇文章的目的,主要是为了加深对cordova插件的编写的印象,不足之处 请多多包含,走过路过的朋友们,望指点。。。
github地址:https://github.com/wangli1992/WLToastPlugin.git