首先需要把Ionic的環境搭好，這裡我就不廢話了，相信看到這篇文章的各位都已經是使用過Ionic的人了

直接上教程

1.建立外掛

通過命令列建立外掛

 格式：plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version

PS：

--name：外掛名稱

--plugin_id：外掛id

--plugin_version：外掛版本

plugman create --name ShowToastPlugin --plugin_id com.jamingx.showtoastplugin --plugin_version 1.0.0

建立外掛後，就能看到對應的目錄下面有這個外掛的資料夾

外掛的目錄結構：

2.編寫android端外掛的程式碼（主要就是編寫java程式碼和js程式碼）

作為一個Android程式猿，推薦使用Android Studio進行開發

首先新建一個Android專案，這個我就不多說

上圖就是建立好的Android專案

我們本次就開發一個比較簡單的外掛，就是呼叫Android系統的Toast。

由於是要開發Ionic的外掛，所以首先是要引入相關的框架，首先我們要下載相關的框架：

下載

這個就是下載好的壓縮包，我們進行解壓

解壓完將看到以下的目錄結構，我們主要使用的是framework裡面的東西

接下來我們就把framework資料夾複製到我們剛剛建立的Android專案的根目錄

如上圖，複製到這個目錄下來

接著下，我們切換到Android Studio進行配置框架

1）：開啟Android專案根目錄下的settings.gradle進行編輯

2）：新增 ’:framework’ 

3）：點選 Sync Now 進行同步重新整理

此時我們app資料夾裡面的使用framework資料夾的內容，還需要將它們關聯起來

如下圖操作

然後一直ok就行了

接下來我們開始編寫java程式碼了

先建立一個類，這個我也不多說了

讓這個類繼承CordovaPlugin類（CordovaPlugin類是需要引入和關聯framework才有的）

接下來我們複寫一下execute()方法

上面的程式碼主要就是彈出Toast（注：execute不是在主執行緒，我們需要切換到主執行緒才能彈出Toast）

程式碼：

package com.jamingx.ionicshowtoastplugin;

import android.util.Log;
import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import org.json.JSONArray;
import org.json.JSONException;

public class ShowToastPlugin extends CordovaPlugin {
    private static final String SHOWTOAST = "showToast";

    /**
     * 執行函式，對應js的 cordova.exec() 方法
     * @param action          The action to execute.
     * @param args            The exec() arguments.
     * @param callbackContext The callback context used when calling back into JavaScript.
     * @return
     * @throws JSONException
     */
    @Override
    public boolean execute(final String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
        Log.e("ShowToastPlugin","ionic 外掛");
        if (action.equals(SHOWTOAST)){
            showToast(args.getString(0));
        }
        return super.execute(action, args, callbackContext);
    }
    /**
     * 初始化
     * @param cordova
     * @param webView
     */
    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);
    }
    private void showToast(final String text){
        cordova.getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(cordova.getContext(),text,Toast.LENGTH_SHORT).show();
            }
        });
    }
}

接下來我們把java程式碼放到外掛目錄下的src目錄（例如我放在 src/android/ShowToastPlugin.java）

在外掛目錄的的www目錄下編寫js程式碼（www/ShowToastPlugin.js）：

程式碼：

var exec = require('cordova/exec');

var showToastPlugin = {};

var showToast_api = function (arg0, success, error) {
    exec(success, error, 'ShowToastPlugin', 'showToast', [arg0]);
};

showToastPlugin.showToast = function(arg){
	showToast_api(arg,function(success){
		console.log("success:" + success);
	},function(error){
		console.log("error:" + error);
	})
};

module.exports = showToastPlugin;

3.配置外掛（plugin.xml）

程式碼：

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.jamingx.showtoastplugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ShowToastPlugin</name>
    <js-module name="ShowToastPlugin" src="www/ShowToastPlugin.js">
        <clobbers target="cordova.plugins.ShowToastPlugin" />
    </js-module>
	
	<platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
      <feature name="ShowToastPlugin">
        <param name="android-package" value="com.jamingx.ionicshowtoastplugin.ShowToastPlugin"/>
      </feature>
    </config-file>
 
    <source-file src="src/android/ShowToastPlugin.java" target-dir="src/com/jamingx/ionicshowtoastplugin/ShowToastPlugin"/>

  </platform>
	
</plugin>

PS：

name -> 外掛名稱（對應js檔案的exec（）第3個引數）

js-module -> clobbers target -> 呼叫時的名稱

config-file -> param -> 外掛的完整類名

source-file -> src="src/android/ShowToastPlugin.java" (外掛的java檔案)

source-file -> target-dir="src/com/jamingx/showtoastplugin/ShowToastPlugin"（拷貝到的目錄，一般和包名對應）

最後開啟命令列cd到外掛的目錄，npm init 初始化外掛即可。

這樣，一個外掛就開發完成了，現在我們進行測試

新增外掛命令

ionic cordova plugin add （path）

例如：

ionic cordova plugin add E:\IonicProjects\Plugins\ShowToastPlugin

移除外掛命令

ionic cordova plugin remove 外掛id（一開始建立的那個id）

例如：

ionic cordova plugin remove com.jamingx.showtoastplugin

4.測試外掛

首先我們建立一個ionic專案

ionic start TestShowToastPlugin --v4 --skip npm

PS：

TestShowToastPlugin ：專案名稱（自定義）

--skip-npm：跳過npm安裝

接著選擇blank的模板

選擇 y

進度條走完以後，然後一路按照自己的需求選擇即可。

接著cd 到剛剛建立的目錄

執行命令：cnpm install --save

PS：如果沒有 cnpm 命令，請先安裝：npm install -g cnpm

至此，專案就建立完畢了。

接下來我這裡開始用到的軟體是WebStorm

首先把外掛新增到專案進去

執行命令：

ionic cordova plugin add E:\IonicProjects\Plugins\ShowToastPlugin

新增完成以後，接下來開始測試外掛功能

我們測試的功能就是點選一個按鈕彈出Toast

編輯src/pages/home/home.ts

如圖增加程式碼：

declare let cordova: any;

showToast(text){
    cordova.plugins.ShowToastPlugin.showToast(text);
  }

接著編輯src/pages/home/home.html

新增一個按鈕

<button (click)="showToast('Test Show Toast')">ShowToast</button>

邏輯很簡單，就是點選ShowToast按鈕就呼叫了 showToast(text) 方法

然後編譯執行專案：

ionic cordova run android  

PS：此時需要插上Android手機，並且啟用除錯模式

執行結果：

至此，Ionic自定義外掛就完成了

外掛地址：