Mobile Application►Cordova

[Cordova] Cordova插件開發

前言

之前一個Cordova的專案需要製作GIF的功能，因為沒有現成插件的所以自己試著寫了一個，目前只做了Android版本。

在這邊只放了部分內容而完整檔案放在GitHub上。

此插件為兩年前寫的，所以一些細節可能與現在版本不同！

結構

由於Cordova像是一層接口，所以必須寫js端的接口以及Java原生內容，而這邊則是直接在Java端製作好GIF再將路徑經由接口回傳。

Example

首先可以先去官方網站上下載範例做修改。

1
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

plugin.xml

在plugin.xml修改插件相關的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="cordova-plugin-gif"       //這邊id是給外部安裝的名稱
        version="1.0.0">
  <name>GIF</name>
  <js-module src="www/GIF.js" name="GIF"> //js接口檔案的位置及名稱
    <clobbers target="window.plugins.gif" />  //外部使用的接口名稱
  </js-module>
  <platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
      <feature name="GIF">
        <param name="android-package" value="jeno5980515.cordova.GIF"/>
      </feature>
    </config-file> 
    //平台上需要用到的設置
    <config-file target="AndroidManifest.xml" parent="/*">
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    </config-file>
    //需要用到的其他檔案
    <source-file src="src/android/libs/commons-codec-1.10.jar" target-dir="libs" />
    <source-file src="src/android/AnimatedGifEncoder.java" target-dir="src/jeno5980515/cordova/"/>
    <source-file src="src/android/GIF.java" target-dir="src/jeno5980515/cordova/"/>
  </platform>
</plugin>

接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var PLUGIN_NAME = "GIF";
function GIF(){
}
//呼叫原生的結構 
//cordova.exec(successCallback, errorCallback, 插件名稱, 插件動作, [參數陣列]);
GIF.prototype.finish = function(successCallback,errorCallback,data){
	cordova.exec(successCallback, errorCallback, PLUGIN_NAME, "finish", [] );
}
GIF.install = function () {
	if (!window.plugins) {
		window.plugins = {};
	}
	window.plugins.gif = new GIF();
 	return window.plugins.gif;
};
cordova.addConstructor(GIF.install);

Java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class GIF extends CordovaPlugin {
	@Override
	public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    	//判斷進來的動作為何
		if ( action.equals("finish") ){
			...
			String arg1 = args.getString(0);  //取得剛剛傳進來的參數
			...
			//將內容傳回callback
			callbackContext.success("XXX");
			return true ;
		} else {
			return false ;
		}
		return true ;
	}
}

安裝

如此一來經由指令即可安裝至專案中。

1
cordova plugin add 來源

GitHub

cordova-plugin-gif

參考

android-gif-encoder