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工程。
第二步:找到刚刚创建好的android工程导入。
至此就已经把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,代码都有注释,如下:
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
效果图如下,输入信息时有括号的按照括号里面的输入,没有的可以跳过。
六.向项目中添加自定义插件
上面基本上就完成了一个简单的自定义插件的制作,接下来把插件添加到之前创建的Android工程中测试,制作是否成功。
添加的方法和上面一样,先进入到platforms目录下
然后输入 cordova plugin add D:\newDialog\dialog-plugin
D:\newDialog\dialog-plugin 新建插件的目录
添加成功
然后在Android studio中调用测试。调用方式通俗的讲就是dialog-plugin.js文件中的那两个参数。
先在 index.html 中加
在index.js 调用
注意 :CustomDialog.show("参数","success","error");
1.suceess:成功回调
2.error:失败回调
3.顺序一定不能错!!!!
成功!
七.注意
1.命令最好用管理员运行
2.提示 Android target 和Gradle 未安装
缺少环境变量
新建 变量名:Android_Platform_Tools 变量值 :Android sdk 目录下找到 platform-tools 全路径加进去
再将 Android_Platform_Tools 添加到Path中
完美解决!
基础内容大概就这些 大家有疑问可以在评论中问,看到了会回复,有错误也欢迎指出,共同学习。