1 增加android的平臺

對於一個ionic專案，在主目錄下通過以下命令列增加android平臺。

cordova platform add android

然後在platforms目錄下就會出現一個android資料夾：

之後可以使用配置了android開發環境的eclipse選中上圖android目錄開啟該專案；也可以使用Android Studio開啟上圖android目錄，這時候需要要配置gradle,直接選擇確定下載即可（此時建議開啟全域性代理），注意專案的路徑中不能含有非ascii碼字元（例如中文），否則gradle會build失敗。

本例使用Android Studio來演示，eclipse環境下只要找到對應的檔案即可。

2 使用Android Studio開發外掛原始碼

2.1 介紹專案目錄

開啟專案後，專案目錄如下：

該專案有兩個模組，第一個是CordovaLib，裡面是cordova庫的程式碼，我們就不用管了（如果是用eclipse開啟這會顯示為一個單獨的專案）

第二個模組便是我們自己的專案了，就如普通的android專案目錄一樣。我們在專案主目錄WWW目錄下的程式碼都被原封不動的拷貝到assets/www目錄下，又額外添加了一些cordova js庫，這些檔案我們也不用管。

2.2 開發外掛原始碼

如下圖，新建一個org.apache.cordova.hello包，改包名可隨意取。然後在改包下新建一個HelloPlugin.java檔案：

HelloPlugin的程式碼如下：

package org.apache.cordova.hello;

import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * Created by duocai on 2017/4/10.
 */
//所有的自定義plugin都需要繼承CordovaPlugin這個類
 

public class HelloPlugin extends CordovaPlugin {

  //然後需要複寫這個execute方法
  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
    throws JSONException {

    if (action.equals("hello")) {
      String text = "";
      for (int i = 0; i < args.length(); i++) {
        text += args.getString(i) + "\n"; //這取決於js程式碼傳進來的引數型別。
      }
      Toast.makeText(this.cordova.getActivity(), text, Toast.LENGTH_LONG).show();
      callbackContext.success("success: " + text);//使用回掉的方法，返回資訊
      //callbackContext.error("dd"); //對應有返回錯誤的方法
      return true;
    }

    return false;
  }
}

execute有三個引數，這個對應js的呼叫程式碼會更好理解（詳見2.4部分）：

cordova.exec(callbackContext.success, callbackContext.error, PluginName, action, args);

其中action就對應action；args在js端就是普通的js陣列；callbackContext.success, callbackContext.error分別是成功和失敗時的兩個回掉函式，前面java程式碼中：

callbackContext.success("success: " + text);//使用回掉的方法，返回資訊

這一行就呼叫了第一個回掉函式。

PluginName的意義就是指定了當前的java檔案（詳見2.3本分）

2.3 在配置檔案中配置HelloPlugin：

2.1的目錄結構中，我們可以看到res/xml目錄下有一個config.xml配置檔案，開啟檔案增加配置如下：

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <!-- xmlns若是報找不到檔案錯誤也不用管-->
    <name>HelloCordova</name>
    <description>
        An Ionic Framework and Cordova project.
    </description>
    <author email="[email protected]" href="http://example.com.com/">
      Your Name Here
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="loglevel" value="DEBUG" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="SplashScreenDelay" value="2000" />
    <preference name="FadeSplashScreenDuration" value="2000" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <!-- 前面為自動生成，含義由名字可以看出個大概>

    <!--新增配置檔案 name="HelloPlugin"指定了js端呼叫時需要傳遞的PluginName引數-->
    <feature name="HelloPlugin">
      <!--value的值為剛剛開發的HelloPlugin檔案的路徑-->
      <param name="android-package" value="org.apache.cordova.hello.HelloPlugin" />
    </feature>

</widget>

2.4 通過js程式碼呼叫外掛

/**
 * Created by duocai on 2016/9/6.
 */
angular.module('ctrl.camera', [])

  .controller('CameraCtrl', function($scope) {
    var success = function(data) {
      alert(data);
    }

    //引數與前面的java程式碼對應如下
    //js: cordova.exec(callbackContext.success, callbackContext.error, PluginName, action, args);
    //java: public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
    // 此外 js 多餘的 PluginName 在2.3的配置檔案中配置
    //<feature name="HelloPlugin"> // PluginName
      //<param name="android-package" value="org.apache.cordova.hello.HelloPlugin" />
    //</feature>
    cordova.exec(success, null, "HelloPlugin", "hello", ["hello", "world", "!!!"]);
  });

其餘沒有註釋的部分是angular controller的語法，就不再贅述。

至此就利用cordova的庫完成了通過js程式碼呼叫原生java程式碼。

2.5 效果演示

其中下面小黑框是java程式碼的輸出，上面大黑框是js程式碼的輸出。

3 配置為符合ionic外掛格式的外掛

我們都知道使用在開發ionic專案時，是不需要上面那樣在android studio中使用外掛的。這是cordova 的外掛進行了進一步的封裝，知道了上面的過程後，我們就知道ionic的外掛格式要求到底幹了什麼事。

在開發之前需要做一點準備，每次執行cordova build android 的時候，都會複寫platforms/android目錄下檔案。所以我們將剛剛的android專案目錄改名為android plugin development。然後在執行：

cordova platform add android

來增加 android 平臺

3.1 外掛目錄

​

按上圖所示建一個外掛目錄。src和www無所謂怎麼建，但這樣建條理更清晰，plugin.xml一定要在其所在的位置。

3.2 各個檔案內容

1. HelloPlugin.java就是上面的檔案直接拷貝過來即可

2. plugin.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <plugin id="org.cordova.HelloPlugin" version="0.0.1"
           xmlns="http://apache.org/cordova/ns/plugins/1.0"
           xmlns:android="http://schemas.android.com/apk/res/android">
     <name>HelloPlugin</name>
     <description>Description</description>
   
     <!-- js 部分 -->
     <!-- plugin 'org.cordova.HelloPlugin'(看上面id) 下 定義module HelloPlugin -->
     <!-- 配置後會將HelloPlugin.js配置到android專案assets/www/plugins 目錄下，做了語法補充完整，
       有興趣可以自己開啟看看 -->
     <js-module name="HelloPlugin" src="www/HelloPlugin.js">
       <clobbers target="HelloPlugin"/>
     </js-module>
   
     <!--android 部分就是
     1. 在第2部分提到的res/xml/config.xml新增plugin配置
     2. 將對應的檔案拷貝到對應的目錄下-->
     <platform name="android">
       <config-file parent="/*" target="res/xml/config.xml">
         <!--新增配置檔案 name="HelloPlugin"指定了js端呼叫時需要傳遞的名稱引數-->
         <feature name="HelloPlugin">
           <!--value的值為剛剛開發的HelloPlugin檔案的路徑-->
           <param name="android-package" value="org.apache.cordova.hello.HelloPlugin" />
         </feature>
       </config-file>
       <source-file src="src/android/HelloPlugin.java" target-dir="src/org/apache/cordova/hello"/>
     </platform>
   </plugin>

3. HelloPlugin.js

   /**
   * Created by admin on 2017/4/10.
   */
   var exec = require('cordova/exec');
   
    // 符合格式要求可在其它js檔案中呼叫該模組
    module.exports = {
   
      show: function (message) {
     //基本上等同於前面第2部分所說的cordova.exec()
        exec(null,null, "HelloPlugin", "hello", [message]);
      }
   
    };

4. 呼叫外掛，依然以前面的CameraCtrl為例

     /**
   * Created by duocai on 2016/4/10.
   */
   angular.module('ctrl.camera', [])
   
    .controller('CameraCtrl', function($scope) {
      HelloPlugin.show("hello world !!!") // HelloPlugin在前面的plugin.xml裡配置
    });

3.3 執行結果

4 進一步分析

1. 比較第二部分和第三部分，如果是要自己寫外掛的化，不如待到前端寫的差不多了，然後直接轉移到android studio專案來寫，如第二部分那樣擴充套件原生程式碼，並通過js呼叫。修改少量的js程式碼和html。這樣做使得擴充套件功能變得簡單，但是這樣做的後果是沒有多平臺。
2. 比較第二部分和第三部分，可以得出js-module不是必須配置的，配置之後則可以使用cordova進一步封裝的語法來呼叫。針對於自己的外掛，我們可以直接呼叫cordova.exec(), 但是這樣做的後果是模組不分離。

5 對於ionic2的說明【2017-6-22更新】

angular升級到angular2，ionic也隨之升級。那麼針對於ionic2該如何使用自定義外掛呢？這裡只說使用是因為cordova並沒有升級，所以它的工作原理和外掛的編寫並不會有所改變，只是使用方式要發生變化。那麼到底如何使用呢。

1. ionic2自帶的外掛，我看了一下使用npm管理到@ionic-native空間下，又進行了一層封裝，這對於自定義外掛來說，使用成本較高，不推薦。
2. 在前面所說的在android studio中直接程式設計是否依然有效呢。答案當然是依然有效。Typescript在編譯時依然會編譯成js es5的語法，所以在android studio中，依然只能看到普通的js程式碼，在這裡面使用cordova.exec()方法的效果當然是與ionic1中一樣了。（但是編譯後的js檔案難讀，對程式設計不友好，這裡也不推薦使用）
3. 除了ionic內建外掛的使用方式（這是一種好的方式）外，還有沒有其它使用方式呢，答案是有的，而且方法很多，下面會說一種推薦的方法。

下面會以ionic2 tabs樣式的初始專案做一個講解。

5.1 繼續在android stuio中編寫

當我們使用android studio如上所示開啟專案時，目錄結構依然不變，不過我們自己寫的程式碼都被編譯到assets/www/build/main.js 這個檔案中，這個檔案很長也很難閱讀，我們可以通過搜尋直接定位要修改的位置（搜尋方法名，類名之類的），例如我搜索ionic2 tabs樣式初始專案中ContactPage這個類定位到如下位置：

var ContactPage = (function () {
    function ContactPage(navCtrl) {
        this.navCtrl = navCtrl;
    }
    return ContactPage;
}());

接下來在建構函式(建構函式會在頁面初始載入時被呼叫)中新增前面2.4所說的直接呼叫（前提是要像第2部分所說的配置好）

var ContactPage = (function () {
    function ContactPage(navCtrl) {
        this.navCtrl = navCtrl;
        var success = function(data) {
          alert(data);
        }
        cordova.exec(success, null, "HelloPlugin", "hello", ["hello", "world", "!!!"]);
    }
    return ContactPage;
}());

之後，編譯執行，效果如下圖所示，與前面所展示無異。但是現在這個js檔案不像是ionic1中的直接拷貝而是編譯形成的，難以閱讀，也不可能被再複用，所以不推薦使用這種方式。僅供大家瞭解一下外掛進一步是怎麼工作的。

5.3 封裝cordova外掛並在ionic2中呼叫（推薦）

封裝外掛，前面第三部分說的非常清楚，封裝方式與前面無異。額外補充一點就是前面好像忘了說明這個外掛是怎麼用的。使用方式很簡單，例如將前面HelloPlugin目錄放在當前專案的目錄下，然後使用命令列：
ionic plugin add HelloPlugin
命令格式是ionic plugin add 外掛目錄路徑，剛剛這個例子使用相對路徑。
新增好外掛後，接下來說明如何在ionic2中使用，前面已經說了使用方式有很多種，接下來說明一種推薦的，以ionic2 tabs樣式初始專案src/pages/contact/contact.ts這個元件為例，它原始如下所示：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController) {
  }

}

然後為了使用HelloPlugin外掛，應當做如下修改：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// 利用declare語法宣告HelloPlugin物件，不需要初始華。這個語法有點像C++裡的宣告語法。
declare let HelloPlugin;
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController) {
    // 這裡使用就像前面第三部分所說的一樣，但是為了在Typescript中使用HelloPlugin這個全域性變數，需要前面的宣告，不然typescript編譯時會報錯，因為找不到HelloPlugin
    HelloPlugin.show("hello world !!!")
  }
}

然後說面一下HelloPlugin這個變數名字是從哪裡來的。看前面3.2.2 plugin.xml配置檔案中的如下部分:

<--就是在這裡配置的-->
<js-module name="HelloPlugin" src="www/HelloPlugin.js">
        <clobbers target="HelloPlugin"/>
      </js-module>

這種使用外掛的方式非常簡單，只需在檔案的開始部分使用
declare let 物件名
來宣告這個物件就可以在typescript中直接使用，你完全可以把他當成是一種import，來引用你在外掛中定義的全域性物件。所以這是一種推薦的使用方式。
最後效果如下：

5.4 剛剛的declare是怎麼工作的。

我們都知道一個html檔案如果引用了多個js檔案，那麼全域性變數在這些檔案中是可以直接相互引用的。剛剛的declare所做的事情就是：儘管我沒有初始化這個物件，但是我會在其它某個檔案中，宣告並初始化這個全域性物件，所以接下來檔案中typescript要繞過對這個物件的檢查。
我們看一下編譯後main.js檔案（前面提到過）：

var ContactPage = (function () {
    function ContactPage(navCtrl) {
        this.navCtrl = navCtrl;
        // Test Hello plugin
        HelloPlugin.show("hello world !!!");
    }
    return ContactPage;
}());

然後在整個js檔案中，再也找不到第二個HelloPlugin。所以前面的declare let HelloPlugin在typescript中實現就是告知Typescript忽略接下來對Helloplugin的語法檢查，將其原封保留即可。
等到編譯成js檔案，就完全和ionic1是一樣的環境了。

5.5 最後歡迎讀者提出或指出一些問題，我有時間的時候會做出補充，謝謝！！！