Cordova入门系列（四）自定义Cordova插件--showToast

时间：2022-10-18 15:20:02

前三篇Cordova入门系列，简单讲解了Cordova，以及如何调用Cordova插件，今天我们讲解一下如何自己做一个插件。

　　自定义插件，就是自己写一些安卓java代码，然后和js代码以及配置文件，封装成一个cordova插件。通过js代码，调用安卓java代码，从而实现调用原生的东西。只不过这些调用原生的行为是我们为了我们自己特定的需求写的，而不是Cordova官方的。。。

　　自定义插件的结构：　　

　　|---pluginName                        
　　　　|---src
　　　　　　|---android
　　　　　　　　|---XXX.java

　　　　　　|---ios
　　　　|---www
　　　　　　|---xxx.js
　　　　|---plugin.xml

　　我们今天做一个名字叫showToast的插件，用户点击的时候，会调用安卓原生的Toast去显示。目录结构如下：

　　Cordova入门系列（四）自定义Cordova插件--showToast

　　

　　先看showToast.js

 
cordova.define("myPlugins.showToast", function(require, exports, module) {

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

    var myFunc = function(){};

    // arg1：成功回调

    // arg2：失败回调

    // arg3：将要调用类配置的标识,要在feature中配置的

    // arg4：调用的原生方法名

    // arg5：参数，json格式

    myFunc.prototype.show=function(success, fail) {

        exec(success, fail, "ShowToast", "show", []);

    };

    var showtoast = new myFunc();

    module.exports = showtoast;

});
 

　　再看ShowToast.java

 
package myPlugin;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONArray;

import org.json.JSONException;

import android.app.Activity;

import android.widget.Toast;

public class ShowToast extends CordovaPlugin {

    @Override

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

        Activity activity = cordova.getActivity();

        if("show".equals(action)) {

            Toast.makeText(activity, "this is my plugin showToast", Toast.LENGTH_SHORT).show();

        }

        callbackContext.success("toast success");

        return true;

    }

}
 

　　plugin.xml

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

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"

    xmlns:android="http://schemas.android.com/apk/res/android"

    id="myPlugins.showToast"

    version="0.0.1">

    <name>showToast</name>

    <description>this is the plugin witch use js to call Toast</description>

    <js-module src="www/showToast.js">

        <clobbers target="myPlugins.showToast"/>

    </js-module>

    <platform name="android">

        <source-file src="src/android/ShowToast.java" target-dir="src/myPlugin"/>

        <config-file target="res/xml/config.xml" parent="/*">

            <feature name="ShowToast">

                <param name="android-package" value="myPlugin.ShowToast"/>

            </feature>

        </config-file>

        <config-file target="AndroidManifest.xml" parent="/*">

            <uses-permission android:name="android.permission.READ_PHONE_STATE" />

        </config-file>

    </platform>

</plugin>
 

　　安装这个插件到项目中，cordova plugin add “插件的路径”

　　然后调用：

 
myPlugins.showToast.show(

    function(msg){

        console.log(msg);

    },

    function(msg){

        console.log(msg);

    }

);
 

相关文章