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();
}

           

大功告成