cordova自定义插件

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

一 .cordova安装

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

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

二.安装plugman

cordova需要用plugman来创建自定义插件  命令：npm install -g plugman

三.用cordova创建android工程

1.创建cordova工程

现在电脑上新建一个cordova文件夹 ，在文件中执行命令: cordova creatr dialog com.jcy.android

文件夹中会多一个文件夹这就是你的cordova工程

dialog 是工程名 com.jcy.android 是cordova工程的包名

创建插件

创建成功后的目录：

插件目录

2.生成android工程

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

命令:cordova platform add android

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

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

生成android工程的目录

工程目录

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

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

导入工程1

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

导入工程2

目录结构

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

四.创建自定义插件

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

创建自定义插件

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

--name dialog-plugin --> 插件名

--plugin_id dialog-plugin --> 插件ID

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

生成插件的目录如下

toast-plugin

。src

    。android

        。android的目录

    。www

编写ToastDemo.java用于被调用

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

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

代码：

package com.jcy.android;

import android.app.AlertDialog;

import android.content.DialogInterface;

import android.content.Intent;

import android.provider.MediaStore;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaArgs;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONException;

import static android.media.MediaRecorder.VideoSource.CAMERA;

public class CustomDialog extends CordovaPlugin {

@Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext)throws JSONException {
if("show".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();
                    //Toast.makeText(cordova.getContext(),"点击了确定",Toast.LENGTH_SHORT).show();
                    openCamra();
                    callbackContext.success("点击了确定");
                }
});
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
    public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();
              //Toast.makeText(cordova.getContext(),"点击了取消",Toast.LENGTH_SHORT).show();
               callbackContext.error("点击了取消");
                }
});
            builder.create().show();
              return true;
        }
return super.execute(action, args, callbackContext);
    }
private void openCamra(){
CordovaPlugin cordovaPlugin =null;
        Intent camera =new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        cordova.startActivityForResult(cordovaPlugin,camera,CAMERA);
    }
}

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

文件复制路径

编辑plugin.xml文件

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

<?xml version='1.0' encoding='utf-8'?>
<plugin id="dialog-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>dialog-plugin</name>
    <js-module name="dialog-plugin" src="www/dialog-plugin.js">
        <clobbers target="CustomDialog" />
    </js-module>
    <!--添加Android平台  -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">  
            <!-- JS调用时的名字 -->
            <feature name="CustomDialog">  
                <!-- value：的值是对应的插件中CustomDialog.java存放的路径 --> 
                <param name="android-package" value="com.jcy.android.CustomDialog"/>
            </feature>  
        </config-file>  
        <!-- src:是插件里存放对应.java的路径， target-dir:安装插件时把.java文件存放的位置，要和上面的value路径对应 -->
        <source-file src="src/android/CustomDialog.java" target-dir="src/com/jcy/android" />
    </platform>
</plugin>

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

修改为：

varexec =require('cordova/exec');
// ToastShow： 是plugin.xml文件中的feature标签 name属性
// show：是js中调用的方法名// [arg0]: 表示一个参数，[arg0,arg1]:表示两个参数
exports.show =function(arg0, success, error)
{ 
 exec(success, error,'CustomDialog','show', [arg0]);
};

五.初始化插件

进入到插件目录，初始化插件命令 npm init

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

初始化插件

六.向项目中添加自定义插件

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

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

然后输入 cordova plugin add D:\newDialog\dialog-plugin

D:\newDialog\dialog-plugin 新建插件的目录

添加成功

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

先在 index.html 中加

<button id="dialog" style="font-size:24px">弹窗</button >

在index.js 调用

示例

注意 :CustomDialog.show("参数"，"success","error");
1.suceess:成功回调
2.error:失败回调
3.顺序一定不能错！！！！
成功！

示例

七.注意

1.命令最好用管理员运行

2.提示 Android target 和Gradle 未安装

image

缺少环境变量

新建变量名：Android_Platform_Tools 变量值：Android sdk 目录下找到 platform-tools 全路径加进去

再将 Android_Platform_Tools 添加到Path中

完美解决！

基础内容大概就这些大家有疑问可以在评论中问，看到了会回复，有错误也欢迎指出，共同学习。

cordova自定义弹窗教程插件