准备工作
- 安装 node.js 主要使用了node.js 的包管理工具npm，这个笔者就不详细介绍了，相信作为一个开发者，不管前后端对这个东西都不会说完全不认识。
npm 安装完成了以后可以执行 npm -v 验证下是否安装成功
npm 安装成功
- 安装 plugman (全局安装)
npm install -g plugman
一般安装完成会出现这样的界面:
plugman 安装完成
安装完可以执行 plugman -v 验证下是否安装成功
如安装成功:
plugman 安装成功
到这一步基本准备工作已完成，下面就可以开始开发你的插件了。
创建插件
1. cd <到你需要存放插件的地方>
为了方便找到和演示，我直接在桌面创建了一个MyPlugins的文件夹, 这一步可以省略，至于为什么，请看第二步就明白了。
插件存放文件夹
2. 执行一下命令创建插件
以 MyPlugin 为例
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]
参数:
pluginName: 插件名字
pluginID: 插件id, egg : coolPlugin
oversion: 版本, egg : 0.0.1
directory:一个绝对或相对路径的目录，该目录将创建插件项目
variable NAME=VALUE: 额外的描述，如作者信息和相关描述
egg : plugman create --name MyPlugin --plugin_id com.charls.MyPlugin --plugin_version 0.0.1
创建成功以后MyPlugins文件夹下会出现一个MyPlugin的文件夹:
插件创建成功
文件结构目录如下:
插件文件目录
3. 为插件添加支持平台
- cd 到你的插件根目录
- 执行一下命令:
plugman platform add --platform_name <platform>
egg : plugman platform add --platform_name ios
你会发现这个时候插件的目录发生了变化:
添加了支持平台的目录结构
- .m 文件当然就是你实现功能的原生代码
- .js 文件就是开放给前端js调用的接口代码
4. 编写你的插件实现功能
打开 MyPlugin.m 文件，编写一下代码；
或者根据你的喜欢写自己的功能，因为单个文件不好编辑，所以你也可以先在一个demo中编辑功能代码并测试功能是否有效。
不过对js开发的类一定要继承CDVPlugin
/********* MyPlugin.m Cordova Plugin Implementation *******/
#import <Cordova/CDV.h>
@interface MyPlugin : CDVPlugin {
// Member variables go here.
}
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end
@implementation MyPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
[self showAlert];
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}
- (void)showAlert {
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"恭喜你，调用插件成功了!" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
UIAlertAction *sureAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
[alert addAction:cancelAction];
[alert addAction:sureAction];
[self.viewController presentViewController:alert animated:YES completion:nil];
}
@end
5. 创建package.json文件
plugman createpackagejson <directory>
egg: plugman createpackagejson
然后需要你根据提示填写相关的内容，最后生成一个这个插件的描述信息文件。
如图: 最后，输入yes就行了
创建package.json文件
6. 注意项
基本到了这一步，一个简单的插件已经创建完了, 下面就是验证工作了。
不过，还有些地方应该注意的。
plug.xml
-
clobbers中的target限制了你如何调用插件 -
config-file中的内容会被配置到工程的config.xml中 -
source-file指定了插件的路径
使用插件
新建或打开一个cordova项目,然后执行:
cordova plugin add <你的插件(名称\路径\git地址)>
egg: cordova plugin add /Users/charls/Desktop/MyPlugins/MyPlugin
新增iOS平台
cordova platform add ios --save
如果不出意外的话:
插件安装成功
再看看工程中的plugins目录是否存在这个插件
插件安装成功plugins
修改index.html 和 index.js
修改index.html
修改index.js
然后执行:
cordova run ios
最后运行效果:
运行效果
网友评论