cordova自定义弹窗教程插件

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工程的包名

cordova自定义弹窗教程插件_第1张图片
创建插件

创建成功后的目录:

cordova自定义弹窗教程插件_第2张图片
插件目录

2.生成android工程

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

命令:cordova platform add android

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

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

cordova自定义弹窗教程插件_第3张图片
生成android工程的目录

生成android工程的目录

cordova自定义弹窗教程插件_第4张图片
工程目录

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

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

cordova自定义弹窗教程插件_第5张图片
导入工程1

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

cordova自定义弹窗教程插件_第6张图片
导入工程2
cordova自定义弹窗教程插件_第7张图片
目录结构

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

四.创建自定义插件

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

cordova自定义弹窗教程插件_第8张图片
创建自定义插件
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);
    }
}

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


cordova自定义弹窗教程插件_第9张图片
文件复制路径

编辑plugin.xml文件

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



    dialog-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

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

cordova自定义弹窗教程插件_第10张图片
初始化插件

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

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

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

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

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

添加成功

cordova自定义弹窗教程插件_第11张图片
添加成功

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

先在 index.html 中加


在index.js 调用

cordova自定义弹窗教程插件_第12张图片
示例

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

cordova自定义弹窗教程插件_第13张图片
示例

七.注意

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

2.提示 Android target 和Gradle 未安装

cordova自定义弹窗教程插件_第14张图片
image

缺少环境变量

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

再将 Android_Platform_Tools 添加到Path中

完美解决!

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

你可能感兴趣的:(cordova自定义弹窗教程插件)