cordova自定义插件


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

cordova的安装

  1. 下载node.js,安装完成后你可以在命令行中使用node和npm.
  2. 安装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目录的变化

添加之后的目录

使用增加的插件

可以在官网查到 cordova官网camera插件

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

使用位置

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

<button id="test">test</button>
示例

在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,代码都有注释,如下:

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

成功!!

成功效果

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

自定义 Cordova插件(基础篇)的更多相关文章

  1. 自定义Cordova插件(基础篇)

    cordova自定义插件 注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装 下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用 ...

  2. Android H5混合开发(2):自定义Cordova插件

    前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...

  3. Cordova入门系列(四)自定义Cordova插件--showToast

    前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封 ...

  4. 自定义 Cordova插件详解

    一.Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合 ...

  5. 自定义Cordova插件详解

    一.Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合 ...

  6. Eclipse插件基础篇一

    名词翻译 有一些名词在翻译的过程中可能会出现歧义,在这里统一一下. アーキテクチャ=architecture=架构 プラットフォーム=platform=平台 コンポーネント=component=组件 ...

  7. cordova学习-基础篇

    Cordova 学习笔记(一):快速开始 1.安装cordova Cordova安装可以通过node.js从npm上获取.npm install -g cordova 通过这个命令可以安装cordov ...

  8. 小猪猪逆袭成博士之C++基础篇(二) 常量、处理类型、自定义头文件

    小猪猪逆袭成博士之C++基础篇(二) const .auto. decltype 上一章我们介绍了一些常用的类型和常见的问题,下面再介绍一些学习的时候不是特别常用但是在实际工程中很有用的一些东西. 一 ...

  9. Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中

    一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...

随机推荐

  1. 2019-oo-第二次总结

    这一单元是关于模拟电梯运行,考验多线程的一个单元,难度由简入入深,从多线程单部电梯,到优化,再到多线程多部电梯,难度一次次的提高. 一.多线程单部电梯(傻瓜调度) 1.设计策略 这一次我只额外的开了一 ...

  2. Tomcat配置Web默认页面

    1.在web.xml中配置要加载的首页 <welcome-file-list> <welcome-file>Tiring-room/index.jsp</welcome- ...

  3. vue-devtools的安装与使用

    安装 vue.js devtools vue官方中文文档:http://www.uihtm.com/vue/v2/guide/index.html# 安装 vue.js devtools 前提是Goo ...

  4. 使用 AudioContext 播放音频 解决 谷歌禁止自动播放音频

    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || ...

  5. JS33个概念

        JavaScript开发者应懂的33个概念 简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇 ...

  6. python数据类型之集合类型

    一.集合的作用 知识点回顾:可变类型是不可hash类型,不可变类型是可hash类型 作用:去重,关系运算 定义:可以包含多个元素,用逗号分割,集合的元素遵循三个原则: 1.每个元素必须是不可变类型(可 ...

  7. Fiddler抓包【5】_Fiddler过滤

    1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...

  8. Linux安全之SSH 密钥创建及密钥登录

    1.首先进入Linux系统的用户目录下的.ssh目录下,root用户是/root/.ssh,普通用户是/home/您的用户名/.ssh,我们以root用户为例: cd .ssh #如果没有 自己创建 ...

  9. 从网卡发送数据再谈TCP/IP协议—网络传输速度计算-网卡构造

    在<在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP>里面提到 单个TCP包每次打包1448字节的数据进行发送(以太网Ethernet最大的数据帧是1518字节,以 ...

  10. 论文速读(Yongchao Xu——【2018】TextField_Learning A Deep Direction Field for Irregular Scene Text)

    Yongchao Xu--[2018]TextField_Learning A Deep Direction Field for Irregular Scene Text Detection 论文 Y ...