1. 程式人生 > >Ionic開發自定義外掛

Ionic開發自定義外掛

1:安裝plugman,在終端輸入

npm install -g plugman

2:新建一個外掛myEcho

plugman create --name 《Name》 --plugin_id 《pluginID》 --plugin_version 《version》
《Name》替換為 myEcho;
《pluginID》 替換為 com.lulee007.myEcho
《version》 替換為 0.0.1
在終端輸入:plugman create --name myEcho --plugin_id com.lulee007.Echo --plugin_version 0.0.1

3:進入myEcho專案中新增一個android平臺

plugman platform add --platform_name <platform>
把<platform>替換為 android
plugman platform add --platform_name android

這時候檢視我們的myEcho目錄下的 src會新增一個目錄android裡面會有一個java檔案:myEcho.java

4:plugin.xml配置文化修改

id: 外掛的標識
name:外掛的名稱
description:描述資訊
js-module:js檔案指向 www/myEcho.js
platform:支援的平臺
source-file:src當前檔案路徑地址,target-dir當Build應用的時候會安裝到指定的目錄下
示例:

<source-file src="src/android/myEcho.java" target-dir="src/com/lulee007/myEcho/myEcho" />
<source-file src="src/android/libuhf-tools.so" target-dir="libs/armeabi/" />
<source-file src="src/android/okhttp-2.5.0.jar" target-dir="libs/" />

再看下myEcho.js檔案:

var exec = require('cordova/exec')引入cordova下的exec
exec(success, error, "myEcho", "coolMethod", [arg0]); success:呼叫成功時的回撥函式 error:調用出錯時的回撥函式 "myEcho":外掛名稱 "coolMethod":執行外掛裡的方法 [arg0]:可選引數,執行方法的引數陣列

最終修改如圖:
這裡寫圖片描述

接著修改myEcho.java檔案:
在execute方法裡有個判斷,

action.equals("coolMethod")跟myEcho.js檔案的exec裡面的coolMethod對應,表示是否執行我們所對應的方法如果不是則直接返回false結束
String message = args.getString(0)接收傳過來的引數,可多個
callbackContext.success()回撥

5:安裝外掛
進入專案目錄輸入:

cordova plugin add 外掛目錄

進入專案的plugins資料夾內檢視是否安裝成功

呼叫:

 window.plugins.myEcho("echo my text",
    function(data){
      alert(data);
    },
    function(error){
      alert(error);
    });

如果要對外掛進行更新需要進行移動:

cordova plugin remove com.lulee007.myEcho
cordova plugin add 外掛目錄