1. 程式人生 > >Cordova外掛開發

Cordova外掛開發

一、在Cordova中,通過JS呼叫native的介面進行原生代碼的呼叫和顯示,進行Hybird,而這樣的native的封裝使用了plugin的方式。

二、這些plugin從cordova.js該檔案中可窺端倪,諸如:

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.dialogs/www/notification.js",
        "id": "org.apache.cordova.dialogs.notification"
, "merges": [ "navigator.notification" ] }, ];

這樣的方式進行外掛的宣告。
並在編寫的外掛的js檔案中進行呼叫java程式碼:

cordova.define("plugins.WebToast", function (require, exports, module) {
    var exec = require('cordova/exec');
    /**
     * Provides access to notifications on the device.
     */
module.exports = { showToast: function (content, type) { exec(null, null, "WebToast", "showToast", [content, type]); } } })

這裡的exec即定義了在java中的showToast和引數等需要的東西。

三、自定義Toast的Cordova外掛實現

3.1、在src目錄下新建:plugins目錄,用來存放cordova外掛

在新建的你目錄下,新建“WebToast.java”類,繼承CordovaPlugin,覆寫其中的execute方法:

public class WebToast extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args,
            CallbackContext callbackContext) throws JSONException {

        if("showToast".equals(action)){
            showToast(args.getString(0),args.getInt(1));
        }
        callbackContext.success();
        return true;

    }

    private void showToast(String string, int type) {
        if(type==1){
            Toast.makeText(cordova.getActivity(), string, Toast.LENGTH_LONG).show();
        }else{
            Toast.makeText(cordova.getActivity(), string, Toast.LENGTH_SHORT).show();
        }
    }

}

3.2、在Cordova_plugin.js中進行外掛宣告

{
        "file": "plugins/webToast.js",
        "id": "plugins.WebToast",
        "merges": [
            "navigator.webtoast"
        ]
    },

這裡的宣告表明你在js方法中使用

function show(text, type) {
            navigator.webtoast.showToast(text, type);
        }

這樣的方式進行webToast.js中的showToast方法的呼叫。

3.3、在asserts/www下面建立“plugins”目錄,並編寫webToast.js檔案

cordova.define("plugins.WebToast", function (require, exports, module) {
    var exec = require('cordova/exec');
    /**
     * Provides access to notifications on the device.
     */
    module.exports = {
        showToast: function (content, type) {
            exec(null, null, "WebToast", "showToast", [content, type]);
        }
    }
})

這裡的showToast方法就是在js中被呼叫的方法,該方法執行了exec方法,exec方法詳解:

exec(null, null, "WebToast", "showToast", [content, type]);

第一個引數:成功的回撥;
第二個引數:錯誤的回撥;
第三個引數:外掛的名稱(在res/xml/config.xml中進行宣告);
第四個引數:執行的java中的方法名;
第五個引數:json形式的引數攜帶。

3.4、在res/xml/config.xml檔案中進行宣告

<feature name="WebToast">  
        <param name="android-package" value="plugins.WebToast"/>          
 </feature> 

其中feature的name是該外掛的名稱,params中value是外掛類的”包名.類名”。

3.5、編寫html檔案進行js引用並呼叫本地Cordova外掛

3.6、一個完整的專案結構

cordova_plugin

需要注意的地方就是要進行

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="plugins/webToast.js"></script>

的引用