前言

Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能。

但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了。



这个“自定义”不是指由Android端任意定义,一般需要各端(H5、原生)讨论来决定,如:插件的名称、action等。

模拟需求

插件信息:
插件名称:MyPlugin
插件id: com.test.MyPlugin
插件版本:1.0.0
action: aaa 插件交互方式:当h5调用时,原生toast弹出h5传入的数据,并返回响应的结果。

创建插件

使用上一篇文章的目录(Android H5混合开发(1):构建Cordova 项目)

  1. 我们在TestCordova目录下,创建存放自定义插件的目录Plugins

  2. 打开终端,输入命令,进入Plugins目录

  3. 创建插件

    按照约定的插件参数,开始创建插件
plugman create --name MyPlugin --plugin_id com.test.MyPlugin --plugin_version 1.0.0

创建成功,如下图所示:



/src/目前是空目录

4. 查看www/MyPlugin.js文件



'MyPlugin'指的是Android端实现该插件的.java类名

'coolMethod'指的是action的名称,此处我们需要修改成约定的 ‘aaa’

修改后,如下图:



5. 查看配置文件plugin.xml



id="com.test.MyPlugin" 是指插件id;

version="1.0.0" 是指插件版本;

MyPlugin 是指插件名称;

<js-module 标签指定公共JavaScript接口的路径;(即描述H5与原生的接口对应关系)

<clobbers 标签指定了H5端调用插件时的对象,字符串可简化,此处我们改成“xyz”(真实项目中,此文本应根据约定,去定义,此处为了突出演示,所以定义成 xyz)



6. 根据配置文件,生成java代码

使用终端,输入命令,进入MyPlugin目录

cd MyPlugin

使用终端,输入命令,生成java代码

plugman platform add --platform_name android

查看默认的模板脚本(具体实现,后续介绍),如下图:

  1. build 插件

    通过终端,输入命令,会创建package.json文件
npm init

根据需要,终端中填写package.json的相关属性。

因为,此Demo只是演示,所以没有填写属性,全部直接点击了回车(即:默认值)。



创建的package.json文件,如下图所示:





至此,插件创建完成。

将插件导入Cordova工程的安卓项目中

1.通过终端,执行命令,进入cordova工程目录/TestPlugin/myapp/

cd cordova项目目录路径

2.通过终端,执行命令,将插件加入到各平台的项目中

cordova plugin add 插件的本地路径

问题原因:gradle版本权限的问题

解决办法:设置gradle权限

终端命令:chmod +x platforms/android/gradlew

  1. 使用AndroidStuido打开安卓项目,目录:/myapp/platforms/android/



    经过了cordova plugin add命令,我们可以看到,在/assets/www下面,已经包含了我们导入的插件信息。

    3.1 cordova_plugins.js 的module.exports(数组) 描述了插件列表的信息(用到的插件都需要在module.exports数组里面配置):



    3.2 Myplugin.js描述了单个插件的具体信息(代码没什么变化,其实就是直接拷贝过来的):



    3.3 /res/xml/config.xml 也导入了该插件的相关信息:



    3.4 /src/下自动导入了Java模板代码MyPlugin.java:

  2. 安卓端插件功能开发

    其实,也就是在MyPlugin.java类中按照需求实现相关的功能:
import android.widget.Toast;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext; import org.json.JSONArray;
import org.json.JSONException; public class MyPlugin extends CordovaPlugin { @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("aaa")) {
String message = args.getString(0);
this.aaa(message, callbackContext);
return true;
}
return false;
} private void aaa(String message, CallbackContext callbackContext) {
//弹框
Toast.makeText(cordova.getActivity(),"aaa",Toast.LENGTH_LONG).show();
//h5端传给我什么参数,此处再传回去
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}

5.H5端开发测试页面,然后同步(或拷贝)给安卓项目使用

直白点,就是H5端做好开发,将WWW目录的内容同步给我们的/assets/www/即可。但是,此处只是个简单的Demo,所以没必要麻烦H5端了,咱们自己写代码实现吧:

5.1首先打开assets/www/index.html文件,删掉多余的注释



5.2注释掉标签中的第一个

5.3中加入一个button,设置点击事件

5.4编写javascript,h5端调用我们自定义插件的方式:xyz.aaa(...)



index.html完整代码:

<!DOCTYPE html>
<html>
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
--><meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<br><br><br>
<button onclick="test()">aaa click</button><br><br><br>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script > function test(){
xyz.aaa("AAA",function(msg){
alert('原生返回了:'+msg);
},function(e){
alert(e);
})
}
</script>
</body>
</html>
  1. 连上手机,运行androidstudio,点击【aaa click】按钮,如下图:

总结

本篇文章,主要演示了cordova插件的自定义过程和插件的使用,比较基础,没有涉及过多复杂的事情,如果有不明白的地方,建议去官网多查查资料。

https://cordova.apache.org/docs/en/latest/

需要使用Cordova童鞋,最好先跟着例子多练习几遍,熟能生巧。

后续会介绍更多的Cordova使用技巧。

本次Demo的源码下载地址:https://pan.baidu.com/s/1YmMw2zO7goF7MDViB1wZ2Q


Android H5混合开发(1):构建Cordova 项目

https://www.cnblogs.com/qixingchao/p/11654454.html

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

https://www.cnblogs.com/qixingchao/p/11652418.html

Android H5混合开发(3):原生Android项目里嵌入Cordova

https://www.cnblogs.com/qixingchao/p/11652424.html

Android H5混合开发(4):构建Cordova Jar包

https://www.cnblogs.com/qixingchao/p/11652431.html

Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

https://www.cnblogs.com/qixingchao/p/11652438.html

Android H5混合开发(2):自定义Cordova插件的更多相关文章

  1. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  2. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  3. Android H5混合开发(4):构建Cordova Jar包

    前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...

  4. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

  5. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  6. Android + HTML5 混合开发

    摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一 ...

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

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

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

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

  9. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

随机推荐

  1. 长短时记忆神经网络(LSTM)介绍以及简单应用分析

    本文分为四个部分,第一部分简要介绍LSTM的应用现状:第二部分介绍LSTM的发展历史,并引出了受众多学者关注的LSTM变体——门控递归单元(GRU):第三部分介绍LSTM的基本结构,由基本循环神经网络 ...

  2. Terminal MultipleXer---终端复用器tmux基本使用

    Terminal MultipleXer---终端复用器tmux 使用场景:1.scp大文件 2:编译大文件 3:多窗口对比文件 1.安装tmux [root@localhost ~]# yum in ...

  3. RocketMQ初入门踩坑记

    本文主要是讲在Centos中安装RocketMQ并做简单的示例.如果你按照本文安装100%是可以成功的,如果按照阿里官方的说明,那只能呵呵了~ 安装 官方地址为:https://rocketmq.ap ...

  4. Dropout原理与实现

    Dropout是深度学习中的一种防止过拟合手段,在面试中也经常会被问到,因此有必要搞懂其原理. 1 Dropout的运作方式 在神经网络的训练过程中,对于一次迭代中的某一层神经网络,先随机选择中的一些 ...

  5. 记一次arch滚挂后,更换lts内核

    背景 因为arch的滚动升级模式,每天pacman -Syu已经是一种习惯了(虽然我是使用yay的),升级过程中会连内核一起升级,但不会立刻生效,通常要等到下次重启时才会生效. 因为此前使用的是有一点 ...

  6. Windows下如何调试驱动程序

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 一.配置Windbg使用双机调试 win10中“windbg+vm ...

  7. CSDN VIP如何添加自定义栏目

    几个月前我也开始在csdn上开了博客,一来给自己加几个少的可怜的流量,再者,让公众号的原创文章获得更多的曝光,让有需要的同学看到. 写过csdn博客的同学都知道,默认只有打赏c币功能:也没有专门广告位 ...

  8. 02-13 Softmax回归

    目录 Softmax回归 一.Softmax回归详解 1.1 让步比 1.2 不同类之间的概率分布 1.3 目标函数 1.4 目标函数最大化 二.Softmax回归优缺点 2.1 优点 2.2 缺点 ...

  9. 04-12 scikit-learn库之随机森林

    目录 scikit-learn库之随机森林 一.RandomForestClassifier 1.1 使用场景 1.2 代码 1.3 参数 1.4 属性 1.5 方法 二.RandomForestRe ...

  10. spring源码系列8:AOP源码解析之代理的创建

    回顾 首先回顾: JDK动态代理与CGLIB动态代理 Spring中的InstantiationAwareBeanPostProcessor和BeanPostProcessor的区别 我们得知 JDK ...