cordova 插件开发

从事基于cordova开发混合APP也快一年了，一直没有自己“亲自操刀”写一个插件，因为网上插件太丰富了，可耻了。

今天完整的记录一次插件开发。

cordova环境6.4.0

第一步安装：plugman

npm install -g plugman

第二步：创建插件

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]

plugman create --name TestDialog --plugin_id com.testadialog --plugin_version 0.0.1

创建好了以后进入该文件夹

然后该文件里面会自动帮我们创建好一系列文件

test-plugin-dialog

如下目录结构

-src

---android

-----TestDialog.java

-www

---TestDialog.js

-plugin.xml

如图：

第三步：理解plugin.xml文件

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="com.testa_dialog" version="0.0.1"><name>TestDialog</name>//存放js接口文件 <js-module name="TestDialog" src="www/TestDialog.js"><clobbers target="cordova.plugins.TestDialog"/></js-module>//对应插件的平台<platform name="android"><config-file parent="/*" target="res/xml/config.xml"><feature name="TestDialog"><param name="android-package" value="com.testa_dialog.TestDialog"/></feature></config-file><config-file parent="/*" target="AndroidManifest.xml"/><source-file src="src/android/TestDialog.java" target-dir="src/com/testa_dialog/TestDialog"/></platform>
</plugin>

第四步：安装插件

cordova plugin add ./TestDialog

第五步：成功安装插件后，我们把android工程导入android studio中，第一次导入可能需要一些时间，耐心等待。如果实在等待不了，请FQ。

第六步：理解cordova-plugin.js文件

图中的id对应是JS 接口文件中的cordova.define()中的一个参数;如下所示

cordova.define("com.testadialog.TestDialog", function(require, exports, module) {
var exec = require('cordova/exec');exports.coolMethod = function(arg0, success, error) {exec(success, error, "TestDialog", "coolMethod", [arg0]);
};});

clobbers中的cordova.plugins.TestDialog是js 全局变量，配合你的js插件接口使用。

在你的js文件中，如果需要调用coolMethod方法，即：

cordova.plugins.TestDialog.coolMethod()//调用该方法

第六步：具体编写插件

exec函数中的参数：
success:即native层成功回调
error:即native层失败回调
第三个参数：即对应java类
第四个参数：即navtive对应的方法
第五个参数：传递给native层的变量
分别对应android中的：

转载于:https://www.cnblogs.com/niunai007/p/7020559.html

cordova 插件开发相关推荐

cordova插件开发
Cordova开发自定义插件 Android cordova插件 plugin.xml 添加jar包依赖的两种方法比如supportv4的包转载于:https://www.cnblogs.com/ ...
Cordova进阶：插件开发
前言我本来没想这么快进入这一块的,但是Cordova居然没有跳转原生的方法,还把js桥断了,这也就算了,还没有官方插件,于是想来想去只有自己写个插件了,也方便以后调用.但是我才刚入门,不会写,所以记 ...
Cordova在左，Capacitor在右
自本人简书文章迁移https://www.jianshu.com/p/33c21660f50e Cordova(Webview)是第一代的混合式应用技术代表,ReactNative/Weex/Nati ...
【Cordova】Cordova第一个插件的创建与使用
[Cordova]Cordova第一个插件的开发与使用 Cordova插件开发目标说明首次尝试创建一个cordova项目创建一个插件项目并编辑为cordova项目添加插件修改cordova ...
Ionic+Cordova开发环境搭建
Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式.其中Ionic是一个前端框架,集成了AngularJs在里面,有很好很漂亮的UI控件.Cordova本身就是 ...
Ionic初学之Ionic3（Cordova）插件制作与添加
现在制作APP都流行混合开发,Ionic是个不错的选择,但是很多原生的功能,混合开发是无法实现的,这时候就要根据功能来制作Cordova插件来实现,下面就记录第一次制作Cordova插件的步骤和遇到的 ...
Cordova插件使用和开发学习笔记
Cordova插件使用和开发学习笔记 1. Cordova插件开发 1.1 环境搭建 1.2 插件初始化 1.3 插件完善 1.4 plugin.xml 2. Cordova插件使用 2.1 创建项目 ...
H5 App开发工具 WeX5
WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能"一秒打开"!对跨平台多前端应用开发的支持极好,一次开发,多平台运行 . WeX5采用混合应用( ...
海康摄像头监控视频播放详解
2019.12.09 更新(重要!!!) 一,此博文及对应代码写于2018年初,基于海康SDK V5.3.3.2版本(当时最新版本),只适用于2019年前海康监控设备:(海康监控产品更新换代,旧版SD ...

cordova 插件开发

cordova 插件开发相关推荐

最新文章

热门文章