cordova跨平台app开发02_自定义插件开发与安装

Posted 2020-09-17 看海8801

视频地址:http://t.cn/RacmXiy

 

cordova的自定义插件由js、原生代码文件（java、oc）、plugin.xml三部分组成。

cordvoa提供了命令来创建插件模版项目。

创建插件模版

1.     pluman的安装

npm install –g plugman

2.     在d:\\cordovaplugins创建一个名称为helloplugins，id为com.zql. helloplugins,版本号为1.0.0的插件

cd D:\\cordovaplugins

plugman create --name helloplugins --plugin_id  com.zql.helloplugins --plugin_version 1.0.0

 

给插件增加android 平台

cd helloplugins

plugman platform add --platform_name android

给插件增加ios平台

plugman platform add --platform_name ios

 

插件模版目录结构

src 目录为原生代码文件

www 为前台js

plugin.xml为插件配置文件

 

模版代码创建完成后，还需要修改

1      修改plugin.xml

1.1      修改js-module配置。clobbers配置了调用js方法的对象。cordova.plugins.helloplugins太长了调用起来太麻烦，修改为helloplugins

<js-module name="helloplugins" src="www/helloplugins.js">
    <clobbers target="cordova.plugins.helloplugins"/>
</js-module>

 

<js-module name="helloplugins" src="www/helloplugins.js">
    <clobbers target="helloplugins"/>
</js-module>

1.2      修改<platform name="android"></ platform>配置中的source-file。

将target-dir="src/com/zql//helloplugins"。修改为target-dir="src/ com/zql/plungins "。  com/zql/plungins为java文件的包名

 

插件开发

Js开发

一个插件可以配置多个js方法，通过exec的第四个参数来区分

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

var func1 = function(){};

func1.prototype.show = function(arg0, success, error) {
    exec(success, error, "helloplugins", "show", arg0);
};

func1.prototype.show1 = function(arg0, success, error) {
    exec(success, error, "helloplugins", "show1", arg0);
};


module.exports = new func1();

通过helloplugins.show(args,successcallback,errcallback);

helloplugins.show1(args,successcallback,errcallback);调用。

这里的helloplugins为plugin.xml中js-model下的clobbers配置的值。

 

Andorid原生代码开发

public class helloplugins extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("show")) {
            String message = args.getString(0);
            this.result(message, callbackContext);
            return true;
        }
        if (action.equals("show1")) {
            String message = args.getString(0);
            this.result(message, callbackContext);
            return true;
        }
        return false;
    }

    private void result(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }

}

继承了 CordovaPlugin 类，并重写 execute 方法，使用 action 来判断我们在 javascript 中调用的方法名，成功的话调用callbackContext.success(message)，失败调用 callbackContext.error(message) 方法，分别对应 javascript 文件中的success 和 error 回调函数。

 

插件的安装

复制插件文件夹到项目跟目录

cd 项目路径

cordova plugin addhelloplugins

 

插件删除

cd 项目路径

cordova plugin rm插件id