Ionic(ionicframework)是一個開源的高級的Html5混合型移動App開發框架,ionic基於HTML5和AngularJS，使得它非常容易打造絢麗的、交互式的移動應用程序。但有些功能受限於硬件，需要使用各個平臺的特有功能，這時可以通過插件來實現，本文就如何為ionic webapp開發自定義插件做引路。
工具/原料
nodejs v0.12.4
IntelliJ IDEA
mac 或 windows
環境說明
nodejs的安裝，Ionic安裝這裡不做說明，默認大家都安裝配置好了環境。
安裝plugman新建插件
安裝cordova插件管理工具，plugman
在終端中輸入：
npm install -g plugman
安裝命令與安裝結果如下：
新建一個插件myEcho，用彈出框來顯示我們的內容。
plugman create --name
把其中的
[--path
在終端中輸入：
plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1
執行命令後會在當前目錄下生成一個文件夾，我這裡的目錄是在桌面下的myEcho.
向myEcho項目中添加一個android平臺
plugman platform add --platform_name
把
接著在終端中繼續輸入：
cd myEcho
然後輸入：
plugman platform add --platform_name android
這時候查看我們的myEcho目錄下的 src會新增一個目錄android裡面會有一個java文件：myEcho.java
插件項目修改配置
項目結構組成：
src 對應不同的平臺，www 放我們的 javascript 文件，plugin.xml 是插件的配置文件。
先來看看配置文件：plugin.xml
解釋一下關鍵的幾個元素：
id: 插件的標識，即一開始我們新建插件輸入的 ID，com.lulee007.myEcho
name：插件的名稱，新建插件時輸入的名稱，myEcho
description：描述信息
js-module：對應我們的 javascript 文件，src 屬性指向 www/myEcho.js
platform：支持的平臺，這裡僅有一個 android，這是剛才我們通過“ plugman platform add --platform_name android ”添加進來的。
其中android下的config-file：
這裡是android插件的配置信息，當安裝到應用時，會添加到目標平臺android下的 res/xml/config.xml 文件中，並將 src/android/myEcho.java，複製到 android 的 package 包中。
看下javascript文件：myEcho.js
文件內容很簡單，第一句是引入cordova下的exec庫
第二句是我們插件的執行插件方法，
exec(success, error, "myEcho", "coolMethod", [arg0]);
success:調用成功時的回調函數，
error:調用出錯時的回調函數，
"myEcho"：插件名稱，
"coolMethod"：執行插件裡的方法，
[arg0]：可選參數，執行方法的參數數組。
這裡我們把“exports.coolMethod”改為“window.plugins.myEcho”
並在“exports.coolMethod”上面添加一行：
window.plugins = window.plugins {};
同樣把“coolMethod”也改為“echo”。
最終修改後的js文件內容如圖：
接著修改myEcho.java文件
可以看到myEcho繼承自CordovaPlugin，並重載了execute方法。
在execute方法裡有個判斷，action.equals("coolMethod")，這表示如果執行的是我們的方法那就繼續執行內部的邏輯並返回true，如果不是則直接返回false結束。
這裡我們修改下方法：“coolMethod”為“echo”,並把方法coolMethod名稱修改為echo。
最終修改後的java文件內容如下：
安裝測試插件
這裡用事先準備好的ionic項目myFirstApp來測試我們的插件。
這裡不再贅述ionic項目的創建，具體可以參考我的另一篇經驗。
直接在裡搜索：如何用ionicframework進行混合移動應用開發
第一篇就是。
打開終端，在終端中輸入：
cd myFirstApp
切換到myFirstApp目錄下
輸入：
cordova plugin add ../myEcho
顯示已經安裝myEcho插件到ios和android平臺下
打開myFirstApp目錄，可以看到在plugins目錄下多了一個com.lulee007.myEcho目錄。
打開myFirstApp目錄下的www/js/controllers.js
添加如下代碼到最後“PlaylistCtrl”位置：
window.plugins.myEcho("echo my text",
function(data){
alert(data);
},
function(error){
alert(error);
});
重新build然後run進行調試：
在終端裡輸入：
ionic build android
然後輸入：
ionic run --device android
執行命令後結果如下圖：
這時android設備上已經運行了我們的應用：
隨便點擊list的一個項，會彈出一個對話框，內容是“echo my text”
最後如果我們在測試中需要對插件進行更新，這時候只需要執行命令：
cordova plugin remove com.lulee007.myEcho
這裡的“com.lulee007.myEcho”就是我們最開始新建插件的時候的插件ID。
重新安裝還是這個命令：
cordova plugin add path/to/your/plugin/dir
把“path/to/your/plugin/dir”替換為自己的插件的目錄就好了。