1. 安装插件管理器
$npm install -g plugman
2. 创建插件
$plugman create --name testPlugin --plugin_id com.cordova.testPlugin --plugin_version 1.0.0
$plugman create --name 插件名称 --plugin_id 插件id --plugin_version 插件版本号 [--path ] [--variable NAME=VALUE]
参数说明:
pluginName: 插件名称，eg：testPlugin
pluginID: 插件id, eg: com.cordova.testPlugin
version: 版本号, eg: 1.0.0
variable NAME=VALUE: 扩展参数，如说明或者作者
3. 为插件添加平台
$cd ./testPlugin
$plugman platform add --platform_name ios
4. 生成package.json
$npm init
此时插件目录结构应该是这样的
testPlugin
├── package.json
├── plugin.xml
├── src
│ └── ios
│ └── testPlugin.m
└── www
└── testPlugin.js
可以注意一下plugin.xml中的内容
clobbers中target的值是JS调用Native的接口
config-file标签中内容会被配置到具体项目的config.xml中，而value中的值testPlugin其实对应的是Native的映射类testPlugin。JS调插件时，其实是通过runtime实例化了一个testPlugin对象，并objc_msgSend方法名，这样testPlugin.m中的方法就被调用了
source-file表示testPlugin.js的路径
5. 创建一个ionic项目
$ionic start IonicDemo blank //创建一个名为IonicDemo的空项目
6. 为项目添加iOS平台
$cd ./IonicDemo
$ionic cordova platform add ios //添加iOS平台
$ionic build --prod //将项目打包成www文件夹
$ionic cordova prepare ios //拷贝www目录资源到iOS工程下
此时可以用Xcode运行项目了，项目路径 ./IonicDemo/platforms/ios/MyApp.xcworkspace，当然这只是一个空项目，模拟器中也就显示一个空页面。下一步，我们把自定义插件添加进项目中，并让它能被调用！Just do it!
7. 添加自定义插件到项目中
$ionic cordova plugin add ../testPlugin
这里的自定义插件testPlugin路径跟项目IonicDemo在同一层，所以直接../testPlugin即可，当然路径也可以在别的位置，比如Github，那么插件路径则需要作相应的修改！
8. 在Xcode中打开项目
此时在项目中能够看到,Staging/www/plugins目录下多了testPlugin.js，它应该是这样的
plugins
├── com.cordova.testPlugin
│ └── www
│ └── testPlugin.js
而项目Plugins目录下多了testPlugin.m，它是不完整的，手动添加一个testPlugin.h，它应该是这样的
#import <Cordova/CDVPlugin.h>
@interface testPlugin : CDVPlugin
@end
Staging/www/cordova_plugins.js多了一些信息，它应该是这样的
{
"id": "com.cordova.testPlugin.testPlugin",
"file": "plugins/com.cordova.testPlugin/www/testPlugin.js",
"pluginId": "com.cordova.testPlugin",
"clobbers": [
"cordova.plugins.testPlugin"
]
}
{
"com.cordova.testPlugin": "1.0.0"
}
Staging/config.xml多了一个标签，它应该是这样的
<feature name="testPlugin">
<param name="ios-package" value="testPlugin" />
</feature>
至于这些信息的意思这里不作解释，有兴趣可以看我写的另一篇《Cordova自定义插件配置》
附：
9. 测试插件
这里我们修改Staging/www/index.html，替换成以下内容
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<script src="cordova.js"></script>
<script>
function success(arg) {
alert('success callback-->'+arg);
}
function error() {
alert('error callback-->'+arg);
}
function test() {
cordova.plugins.testPlugin.coolMethod("hello ionic!", success, error);
}
</script>
</head>
<body>
<button onclick="test()" style="position: fixed; top: 50%; font-size: 30px">测试插件</button>
</body>
</html>
在模拟器中运行项目，点击按钮，屏幕中是不是出现一个弹框了！至此，一个自定义插件就完成了！
它是如何做到的呢？
第一步：Html中JS调用 cordova.plugins.testPlugin.coolMethod("hello ionic", success, error);并给这个函数传递了三个参数，字符串，成功回调，失败回调
第二步：cordova.plugins.testPlugin.coolMethod函数调起了Native中testPlugin.m的实例方法- (void)coolMethod:(CDVInvokedUrlCommand*)command，并把字符串传了过去
第三步：coolMethod方法直接把字符串包装成结果回传给了JS中success,然后success函数被调起！
这样就完成了JS与Native的互相调用~
ionic项目常用插件命令
$ionic cordova plugin list //列出所有已安装的插件
$ionic cordova plugin remove helloPlugin //从ionic项目中删除插件
$ionic cordova plugin add 插件路径 //安装插件到ionic项目，插件路径可以是Git地址
ionic项目常用命令
$ionic start ProjectName [sidemenu|tabs|blank] //通过模板创建项目
$ionic serve //浏览器预览
$ionic cordova platform add ios/android //添加平台
$ionic build ios/android //编译
$ionic cordova emulate ios/android –lc //模拟器运行
$ionic cordova run ios/android –lc //真机运行
$ionic build --prod //打包成www文件夹
$ionic cordova prepare ios //拷贝www目录资源到ios工程下
附：
其它问题
$sudo chmod -R 777 * //如果打开项目遇到权限问题则需要先给项目权限
网友评论