Cordova 自定義插件 以及 使用

一、創建插件

1.創建插件：找一個適合的文件路徑，執行cmd，輸入以下命令：

plugman create --name ToastPlugin --plugin_id com.example.toast --plugin_version 1.0.0

1. ToastPlugin 表示 插件的名稱
2. com.example.toast 插件id
3. 1.0.0 版本
   創建成功

2.使用Android studio 打開插件，在src目錄下新建android目錄，然後將寫好的java代碼copy到android目錄下，注意：一定要繼承CordovaPlugin 類，實現execute方法，完整代碼

package com.example.hello;
import android.app.AlertDialog;
import android.content.DialogInterface;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.widget.Toast;

public class ToastPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if ("showToast".equals(action)) {
            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());
            builder.setTitle("提示");
            builder.setMessage(args.getString(0));
            builder.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.success("點擊了確定");
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.error("點擊了取消");
                }
            });
            builder.create().show();
            return true;
        }
        return super.execute(action, args, callbackContext);

    }

    public void showToast( CallbackContext callbackContext){
        Toast.makeText(cordova.getActivity(), "點擊了我", Toast.LENGTH_SHORT).show();
        callbackContext.success("點擊成功回調");
    }
}

3.修改plugin.xml 添加android platform ，如下

  <!--添加Android平臺  -->
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <!-- JS調用時的名字 -->
            <feature name="ToastPlugin">
                <!-- value：ToastPlugin.java存放的路徑 -->
                <param name="android-package" value="com.example.hello.ToastPlugin" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml">
            <!-- 權限，此處爲示例 -->
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        </config-file>
        <!-- src:是插件裏存放對應.java的路徑， target-dir:安裝插件時把.java文件存放的位置，要和上面的value路徑對應 -->
        <source-file src="src/android/ToastPlugin.java" target-dir="src/com/example/hello" />
    </platform>

4.修改ToastPlugin.js，添加showToast方法，如下：

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

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'ToastPlugin', 'coolMethod', [arg0]);
};
// ToastShow： 是plugin.xml文件中的feature標籤 name屬性
// show：是js中調用的方法名
// [arg0]: 表示一個參數，[arg0,arg1]:表示兩個參數
exports.showToast = function(arg0, success, error){
    exec(success,error,'ToastPlugin','showToast',[arg0])
};

5.初始化插件，在插件的根目錄下，執行 npm init,然後一路Enter

創建成功

二、插件的使用

1.添加插件

// E:\cordova\ToastPlugin爲本地插件路徑
cordova plugin add E:\cordova\ToastPlugin

2.修改index.html 增加點擊事件

<p id="toast">點我提示Toast</p>

3.修改index.js,增加JS點擊事件處理

document.getElementById('toast').onclick = function(){
 cordova.plugins.ToastPlugin.showToast();
}

大功告成