1. 安裝插件管理器
$npm install -g plugman
2. 創(chuàng)建插件
$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]
參數(shù)說明:
pluginName: 插件名稱，eg：testPlugin
pluginID: 插件id, eg: com.cordova.testPlugin
version: 版本號, eg: 1.0.0
variable NAME=VALUE: 擴(kuò)展參數(shù)，如說明或者作者
3. 為插件添加平臺
$cd ./testPlugin
$plugman platform add --platform_name ios
4. 生成package.json
$npm init
此時插件目錄結(jié)構(gòu)應(yīng)該是這樣的
testPlugin
├── package.json
├── plugin.xml
├── src
│ └── ios
│ └── testPlugin.m
└── www
└── testPlugin.js
可以注意一下plugin.xml中的內(nèi)容
clobbers中target的值是JS調(diào)用Native的接口
config-file標(biāo)簽中內(nèi)容會被配置到具體項目的config.xml中，而value中的值testPlugin其實對應(yīng)的是Native的映射類testPlugin。JS調(diào)插件時，其實是通過runtime實例化了一個testPlugin對象，并objc_msgSend方法名，這樣testPlugin.m中的方法就被調(diào)用了
source-file表示testPlugin.js的路徑
5. 創(chuàng)建一個ionic項目
$ionic start IonicDemo blank //創(chuàng)建一個名為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，當(dāng)然這只是一個空項目，模擬器中也就顯示一個空頁面。下一步，我們把自定義插件添加進(jìn)項目中，并讓它能被調(diào)用！Just do it!
7. 添加自定義插件到項目中
$ionic cordova plugin add ../testPlugin
這里的自定義插件testPlugin路徑跟項目IonicDemo在同一層，所以直接../testPlugin即可，當(dāng)然路徑也可以在別的位置，比如Github，那么插件路徑則需要作相應(yīng)的修改！
8. 在Xcode中打開項目
此時在項目中能夠看到,Staging/www/plugins目錄下多了testPlugin.js，它應(yīng)該是這樣的
plugins
├── com.cordova.testPlugin
│ └── www
│ └── testPlugin.js
而項目Plugins目錄下多了testPlugin.m，它是不完整的，手動添加一個testPlugin.h，它應(yīng)該是這樣的
#import <Cordova/CDVPlugin.h>
@interface testPlugin : CDVPlugin
@end
Staging/www/cordova_plugins.js多了一些信息，它應(yīng)該是這樣的
{
"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多了一個標(biāo)簽，它應(yīng)該是這樣的
<feature name="testPlugin">
<param name="ios-package" value="testPlugin" />
</feature>
至于這些信息的意思這里不作解釋，有興趣可以看我寫的另一篇《Cordova自定義插件配置》
附：
9. 測試插件
這里我們修改Staging/www/index.html，替換成以下內(nèi)容
<!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>
在模擬器中運行項目，點擊按鈕，屏幕中是不是出現(xiàn)一個彈框了！至此，一個自定義插件就完成了！
它是如何做到的呢？
第一步：Html中JS調(diào)用 cordova.plugins.testPlugin.coolMethod("hello ionic", success, error);并給這個函數(shù)傳遞了三個參數(shù)，字符串，成功回調(diào)，失敗回調(diào)
第二步：cordova.plugins.testPlugin.coolMethod函數(shù)調(diào)起了Native中testPlugin.m的實例方法- (void)coolMethod:(CDVInvokedUrlCommand*)command，并把字符串傳了過去
第三步：coolMethod方法直接把字符串包裝成結(jié)果回傳給了JS中success,然后success函數(shù)被調(diào)起！
這樣就完成了JS與Native的互相調(diào)用~
ionic項目常用插件命令
$ionic cordova plugin list //列出所有已安裝的插件
$ionic cordova plugin remove helloPlugin //從ionic項目中刪除插件
$ionic cordova plugin add 插件路徑 //安裝插件到ionic項目，插件路徑可以是Git地址
ionic項目常用命令
$ionic start ProjectName [sidemenu|tabs|blank] //通過模板創(chuàng)建項目
$ionic serve //瀏覽器預(yù)覽
$ionic cordova platform add ios/android //添加平臺
$ionic build ios/android //編譯
$ionic cordova emulate ios/android –lc //模擬器運行
$ionic cordova run ios/android –lc //真機(jī)運行
$ionic build --prod //打包成www文件夾
$ionic cordova prepare ios //拷貝www目錄資源到ios工程下
附：
其它問題
$sudo chmod -R 777 * //如果打開項目遇到權(quán)限問題則需要先給項目權(quán)限
