cordova自定义android插件,自定义Cordova插件（基础篇）

cordova自定义插件

注意：存放自定义cordova插件目录不能有空格可能会报错

cordova的安装

下载node.js，安装完成后你可以在命令行中使用node和npm.

安装cordova使用node.js的npm工具。打开控制台输入

npm install -g cordova

-g是全局安装cordova。安装完成后就可以在命令行使用cordova命令。

安装plugman

cordova需要用plugman来创建自定义插件

命令：npm install -g plugman

用cordova创建android工程

1.创建cordova工程

首先在电脑中创建一个cordova工程的目录，然后进入到创建的目录里。之后就可以开始创建cordova工程，下面是创建工程的代码和实例图。

cordova create demo com.lmr.android

demo --> 工程名 —— com.lmr.android --> 包名

创建插件

创建成功后的目录：

插件目录

2.生成android工程

先进入到刚刚创建的cordova目录中，然后开始创建android工程。

cordova platform add android

android --> 创建的平台名也可以是iOS等

下图是创建成功的情况，失败的原因有可能是android的环境没有配好。

生成Android工程

生成android工程的目录

工程目录

生成之后我们开始导入到android studio中：

第一步：选择打开本地已有的android工程。

导入工程1

第二步：找到刚刚创建好的android工程导入。

导入工程2

导入之后目录如下：

目录结构

至此就已经把cordova插件开头的部分创建好了。

使用cordova官方提供的插件

首先进入到创建好的android工程目录下，然后再进行添加插件操作：

cordova plugin add cordova-plugin-camera

添加官方相机插件

添加成功后的Android目录的变化

添加之后的目录

使用增加的插件

使用插件的位置，在Android工程下找到index.html和index.js这两个文件。

使用位置

在index.html文件中添加一个测试按钮。

test

示例

在index.js文件中添加：

//前面的test是之前那个button的按钮，后面的test是方法名，给按钮注册点击事件

document.getElementById("test").addEventListener("click",test);

//点击事件绑定的方法

function test(){

//调用添加的camera插件

// onSuccess:是调用成功的返回事件；onFail：是调用失败的返回事件

navigator.camera.getPicture(onSuccess,onFail);

}

//成功的返回事件

function onSuccess() {

console.log("Camera cleanup success.")

}

//失败的返回事件

function onFail(message) {

alert('Failed because: ' + message);

}

然后运行起来项目，下面是我运行起来的效果。点击test按钮，会打开手机上的相机，效果图就不放了。

效果图

创建自定义插件

注意：创建插件是先cd到你要创建的目录下，存放自定义cordova插件目录不能有中午和空格可能会报错

先在电脑上创建一个cordova插件的目录，然后跳转到该目录，开始创建cordova插件。

创建自定义插件

plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0

--name toast-plugin --> 插件名

--plugin_id toast-plugin --> 插件ID

--plugin_version 1.0.0 --> 插件版本号

生成插件的目录如下

toast-plugin

src

android

android的目录

www

编写ToastDemo.java用于被调用

可以在刚刚创建的Android工程下面编写这个代码，具体代码如下：

execute方法是插件被调用时，会把操作和参数以及回调传递过来。

package com.lmr.android;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaArgs;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONException;

/**

* ToastDemo

*

* @author lmr

* @date 2018-08-19

*/

public class ToastDemo extends CordovaPlugin {

@Override

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

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

// 获取activity和context --> cordova.getActivity()和cordova.getContext()

Toast.makeText(cordova.getContext(),args.getString(0),Toast.LENGTH_SHORT).show();

return true;

}

return false;

}

}

把这个文件复制到刚刚生成的插件目录下

文件复制路径

编辑plugin.xml文件

修改plugin.xml,代码都有注释，如下：

toast-plugin

编辑www目录下的toast-plugin.js文件

打开后是这样的：

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

exports.coolMethod = function (arg0, success, error) {

exec(success, error, 'toast-plugin', 'coolMethod', [arg0]);

};

修改为

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

// ToastShow： 是plugin.xml文件中的feature标签 name属性

// show：是js中调用的方法名

// [arg0]: 表示一个参数，[arg0,arg1]:表示两个参数

exports.show = function (arg0, success, error) {

exec(success, error, 'ToastShow', 'show', [arg0]);

};

初始化插件

进入到插件目录，初始化插件

npm init

效果图如下，输入信息时有括号的按照括号里面的输入，没有的可以跳过。

初始化插件

向项目中添加自定义插件

上面基本上就完成了一个简单的自定义插件的制作，接下来把插件添加到之前创建的Android工程中测试，制作是否成功。

添加的方法和上面一样，先进入到platforms目录下

然后输入

// 插件的本地目录

cordova plugin add D:\CordovaPlugin\plugins\toast-plugin

添加成功

添加插件

然后在Android studio中调用测试。调用方式通俗的讲就是toast-plugin.js文件中的那两个参数。

ToastShow.show("123456");

示例

成功！！

成功效果

基础内容大概就这些，后面还会在写一个复杂一点的插件教程，大家有疑问可以在评论中问，看到了会回复，有错误也欢迎指出，共同学习。