sencha touch下添加自定義cordova plugin的方法

首先，至於sencha touch和cordova環境的配置方法就不贅述了，可以查看官方API。

sencha 2.3.1Api：http://docs.sencha.com/touch/2.3.1/

cordova 3.3 Api：http://docs.phonegap.com/en/3.2.0/guide_cli_index.md.html#The%20Command-Line%20Interface;

創建一個Sencha touch  Android工程；

1.創建sencha APP工程

CMD切換到sencha touck的SDK目錄下，執行sencha generate app Exemple0121 d:/example;

其中Exemple0121爲你的工程名字， d：/example爲保存工程的路徑名字；

此時在D:/example下有了Exemple0121工程，目錄下還木有cordova的配置項，

2.完成cordova平臺初始化

a.切換到D:/example下執行sencha cordova init，完成cordova的初始化，

得到標準的cordova工程平臺

b.配置android工程。

修改cordova的平臺配置，找到sencha工程路徑下的cordova.local.properties目錄，用notepad++或者UE打開，

將默認的cordova.platforms=ios修改成你需要的，例如android平臺改爲，cordova.platforms=android；

切換到工程的cordova路徑下，執行cordova platform add android;

c.生成android APP.

執行sencha app build native,執行成功以後會在cordova/platforms路徑下生成android文件夾，這個就是需要的android工程了，可以通過eclipse導入工程，完整路徑爲:

D:\example\cordova\platforms\android。工程結果如下：

導入系統插件。

第一步，添加系統插件

首先插件的編寫方法，不在贅述。

cordova插件的主要代碼結構爲：將插件的js代碼放置在assets/www/plugins目錄下，同時配置cordova-plugin.js申明js插件接口，然後將插件的java接口代碼放置到src路徑下，在manifext文件下申明java插件接口。

sencha touch下仍保留這種結構思想，但是構建方法稍有不同，我們先導入一個系統的插件作爲樣例，

將cmd切換到cordova目錄下，執行cordova plugin add org.apache.cordova.console，添加系統插件console.

這時候在plugins目錄下就可以看到console插件了，然後重新build工程，退回example路徑執行sencha app build native;

第二步 創建自己的插件系統。

編寫好自己的myplugin.java和myplugin.js兩個文件，參見cordova自定義插件編寫方法;將console的文件夾複製一份，改名爲myplugin，文件夾下內容有：

在src/android/路徑下添加插件java代碼， myplugin.java代碼如下：

package org.apache.cordova.myplugins;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class MyPlugin extends CordovaPlugin{

	private String TAG = "MyPlugin";

	//excute函數必須繼承，其中action是js插件接口調用的java函數名稱，args爲需要傳遞的參數json數組。
	@Override
	public boolean execute(String action, JSONArray args,
			CallbackContext callbackContext) throws JSONException {
		// TODO Auto-generated method stub
		Log.d(TAG,"ACTION IS "+ action);
		return super.execute(action, args, callbackContext);
	}
	
}

在www/下添加插件js代碼，myplugin.js的代碼如下：

var exec = require('cordova/exec');
var MyExport = {};
	
	//具體的Export函數可以自行定義
	MyExport.handler = function() {
	}

	MyExport.handler.tojava = function(successCallback, errorCallback, options) {
		return exec(successCallback, errorCallback, "MyPlugin", "JScallAD", []);
		//MyPlugin爲對應的Java接口名稱；可以定義爲任務字符，但需要與java接口的配置文件一致。
		//JScallAD爲MyPlugin接口下對應的函數名稱，即MyPlugin.java中excute下的action字符串；
		//successCallback爲java端執行成功的回調，
		//errorCallback爲java端執行錯誤的回調。
		//[]爲需要傳遞的json字符串，即MyPlugin.java中excute下的args
		
	}
	module.exports = MyExport;

第三步，修改配置文件

a、修改插件js端配置參數，myplugin目錄下的package.json文件修改爲：

{
    "version": "0.1",//插件版本號
    "name": "org.apache.cordova.myplugin",//插件id
    "cordova_name": "MyPlugin",//插件在cordova下的名稱，與myplugin.js中exec的接口名稱，保持一致
    "description": "Cordova My Plugin",//修飾名稱，意義暫不明，任意定
    "license": "Apache 2.0",//照抄
    "keywords": [
        "cordova",
        "myplugin"//添加一個自己插件的簡稱，意義暫不明，先與js接口名稱保持一致
    ],
    "engines": []
}

b、修改build需要的配置文件，myplugin目錄下的plugin.xml文件：

<?xml version="1.0" encoding="UTF-8"?>

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="org.apache.cordova.myplugin"
			//插件id號，與package.json保持一致
			//版本號，與package.json保持一致
      version="0.1">

    <name>MyPlugin</name>//插件在cordova下的名稱，與myplugin.js中exec的接口名稱，保持一致
    <description>Cordova My Plugin</description>//插件描述，與package.json保持一致
    <license>Apache 2.0</license>
    <keywords>cordova,myplugin</keywords>//與package.json保持一致
    <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git</repo>
    <issue>https://issues.apache.org/jira/browse/CB/component/12320644</issue>

	//插件js接口文件配置信息，插件在android
	<js-module src="www/myplugin.js" name="myplugin">//src="www/myplugin.js"爲已經寫好的js文件路徑，“myplugin”暫不明，與js中調用的類名保持一致
        <clobbers target="myplugin" />//插件在js中調用的類名，
    </js-module>
	
	//android平臺配置信息
    <!-- android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="MyPlugin">//插件在java端的接口名稱，與之前文件中的接口名稱保持一致
                <param name="android-package" value="org.apache.cordova.Plugins.MyPlugin"/>//該插件接口對應的java代碼路徑
            </feature>   
        </config-file>
        
		//該插件需要的權限申明，根據需要自行定義
        <config-file target="AndroidManifest.xml" parent="/*">
            <uses-permission android:name="android.permission.RECORD_AUDIO" />
            <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        </config-file>
		
		//源文件的路徑和目標文件路徑，src爲已經編寫好的java代碼路徑，target-dir爲需要生成的android工程中該java源碼路徑，與上面的java代碼路徑保持一致
        <source-file src="src/android/MyPlugin.java" target-dir="src/org/apache/cordova/Plugins" />
        
    </platform>   

</plugin>

注：在真實工程案例中，請刪除以上代碼中的註釋文字，以免出錯

第四步，添加插件：

切換至example/cordova路徑下執行：cordova  plugin add plugins/myplugin，如果配置沒有錯誤，

重新Build工程，在example路徑下執行：sencha app build native，插件配置OVER.

插件測試

在example路徑下找到app.js文件，找到app啓動入口函數，調用自定義插件的函數接口，myplugin.handler.tojava(null,null,null),

	launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('Exemple0121.view.Main'));
	myplugin.handler.tojava(null,null,null);
    },

重新sencha app build native工程，在eclipse中啓動工程，app在啓動後會調用tojava函數，執行

 exec(successCallback, errorCallback, "MyPlugin", "JScallAD", []);

會找到定義的MyPlugin接口，調用該接口下的excute（action，args）函數，啓動的action爲“JScallAD”，args爲null,查看log如下

注意：cmd以sencha開頭的都是在example路徑下，以cordova開頭的命令都是在example/cordova路徑下，注意切換；

自己寫的js插件代碼和最終導入android工程的js代碼有區別，功能內代碼外部被

cordova.define("org.apache.cordova.myplugin.myplugin", function(require, exports, module) {...}包圍，

注意在自己的js代碼中不要添加，會造成redefine的異常。

剛接觸sencha touch 和cordova，可能有地方理解不是很準確，還望指正[email protected]