Cordova插件使用和开发学习笔记

  • 1. Cordova插件开发
    • 1.1 环境搭建
    • 1.2 插件初始化
    • 1.3 插件完善
    • 1.4 plugin.xml
  • 2. Cordova插件使用
    • 2.1 创建项目
    • 2.2 添加平台
    • 2.3 添加插件
    • 2.4 调用插件
    • 参考

注意:文中范例主要基于Windows+Android+JAVA开发,只有部分涉及iOS。

1. Cordova插件开发

插件的开发可以参考cordova文档-创建插件

1.1 环境搭建

插件开发需要nodejs+npm环境,我们直接官网下载即可。
随后打开CMD,npm安装cordova 以及 plugman
npm install -g cordova
npm install -g plugman

1.2 插件初始化

打开CMD,根据以下命令创建插件,插件id一般是cordova-plugin-[插件名称]。

或者我们自己创建的插件也可以直接使用包名作为id,com.*.*。

包名默认和id一致,所以id是 cordova-plugin-[插件名称] 格式的按照代码规范,在插件初始化完成后也需要修改包名。

plugman create --name [插件名称] --plugin_id [插件id] --plugin_version [插件版本号]

接下来,我们要向插件中添加平台,首先cd命令进入插件文件夹,然后使用以下命令。
plugman platform add --platform_name [平台 android/ios]

可以看到在插件src下创建了android文件夹,并生成了js与插件交互用的java文件,
并且在plugin.xml中添加了name属性为android的platform标签,并且已经有一些默认设置,生成的java文件也已经在这里声明。


(蓝框中的内容是可以做一些规范性调整的,比如clobbers标签中的target可以修改为MyPlugin,这样我们在调用的时候可以少些一点代码;feature中的value可以改成我们规范性的包名,比如com.company.myplugin;还有source-file中MyPlugin.java的target-dir可以修改为src/com/company/myplugin/MyPlugin.java)

下面是修改后的plugin.xml

当然,还要注意同步修改MyPlugin.java文件,修改package声明,如下:

下面我们直接在Cordova项目中引入这个插件,引入插件的命令在上面也提到了,在项目根目录下执行以下命令
cordova plugin add [插件路径/地址]

我们看到有报错,需要package.json文件,我们进入插件根目录执行下面的命令即可。

plugman createpackagejson [插件路径]

需要关注一下name是否需要修改,也可以直接回车,最后输入yes即可。
下图中我们修改了一下插件的名称。

接下来,再测试是否可以往cordova项目中添加插件,可以看到已经成功添加。

(我们看到插件的包名与我们在plugin.xml中设置的内容保持一致)

1.3 插件完善

我们的插件当然不是只有一个架子就可以的。

我们可以直接在当前已经添加插件的项目中编写功能,完成之后再将插件相关文件放到插件文件夹中。

例如Java文件、res下的布局相关文件、jar包等,然后修改plugin.xml。

或者说我们已经在原生项目中将插件的功能开发完成,也可以直接拷到插件文件夹中,修改plugin.xml。

1.4 plugin.xml

对插件来说,plugin.xml是重中之重,即便你的插件功能再完善,如果没有在plugin.xml中将各个文件声明出来,执行添加插件语句时不会复制到主项目中去。
具体各个标签的功能作用可以参考官网Cordova插件-Plugin.xml

2. Cordova插件使用

移动端的开发方式有以下三种:

  1. 纯Web开发(Web APP)
  2. 纯原生开发(Native App)
  3. 混合开发(Hybrid App)

Cordova就是一种混合开发的技术,与Cordova类似的还有Uni-app、Flutter等技术。

混合开发让我们的移动开发更加灵活,增加开发效率。

这里我们先简单说明一下如何搭建Cordova环境,首先需要安装node.js,然后使用如下npm命令安装Cordova

npm install -g cordova

现在我们就可以使用Cordova插件了,大致有以下几个步骤,Android端以及iOS端是类似的。

2.1 创建项目

其实创建一个Cordova项目是比较简单的,需要注意Cordova版本,最好是最新版。

(iOS端最新版Cordova解决了上架审核时的UIWebView问题)

Windows打开CMD、MAC则是打开终端窗口,执行以下命令:
cordova create [文件夹名称] [APP ID/包名] [应用名称]
例如:
cordova create testCordova com.company.testCordova 测试Cordova

2.2 添加平台

进入上一步创建的文件夹,根据你想要添加Android还是iOS执行以下命令
cordova platform add android/ios
例如我们想在上一步创建的项目中添加Android平台:
cd testCordova
cordova platform add android

可以看到自动添加了 cordova-plugin-whitelist 插件。

2.3 添加插件

添加插件也是比较简单的,也只需要一条命令

cordova plugin add [插件地址/插件名称/路径]

可以看到,我们有多种方式添加插件。

可以根据插件的在线地址,一般是git地址,不过这种方式一般由于网络问题很慢,可以直接下载压缩包到本地使用。

或者插件的名称,这适用于上传到npm的插件,可以查看Cordova官方都收录了哪些插件Cordova收录插件

或者插件在本机的路径,这里也有一个小技巧,可以直接将插件文件夹拖动到终端窗口,就会生成文件夹的绝对路径,Android以及iOS都适用。

我们这里可以添加我们上面创建的插件。

2.4 调用插件

插件的调用很简单,我们想要调用一个插件,需要查看两个地方,plugin.xml以及插件www文件夹下的[插件名称].js。

如果需要调用我们上面创建的插件,需要在js中使用如下语句:

MyPlugin.coolMethod(seccess, error)

那么这条语句是怎么来的呢?我们先来看plugin.xml需要注意的地方,可以看到红框中标出了MyPlugin,这也是我们之前做过修改的,Cordova默认生成的是 cordova.plugins.* 这种格式。

(js-module元素定义了js的名字,它将在应用开始时自动加载。它定义了向Cordova公开的js接口。clobbers元素指明了暴露出的js对象。本例中,MyPlugin插件通过一个MyPlugin对象向Cordova应用公开。)

接下来,再看插件www文件下的js文件,我们可以看到方法名以及所需要的参数,参数缺失是否会引发空指针等异常需要看插件代码是否做了非空校验等。

我们可以看到 MyPlugin.js 中定义了 MyPlugin 插件所暴露的方法,我们再来 MyPlugin.java 中看一下方法的逻辑。

可以看到,execute方法统一接收js传递的调用请求,再去判断调用哪个方法。

Cordova默认生成的 coolMethod 方法从js接收一个参数message,判断message是否为空,
如果不为空,返回一个success回调,把message回传给js,
如果message为空,返回一个error回调,回传一个错误信息。

我们可以简单调用一下这个方法,看看效果如何。

可以看到,我们在Cordova默认生成的 index.html 的基础上,添加了一个按钮来调用插件方法 以及一个p标签展示插件回传给js的内容。


然后我们直接在模拟器运行,点击按钮,可以看到,p标签被修改为js传递给插件的内容。

在测试期间,我还发现了一个问题,即便我们不传参数,也会进入成功回调。

参考

  1. Cordova中文网
  2. Android开发者指南

Cordova插件使用和开发学习笔记就记录到这里,希望可以帮到大家。

Cordova插件使用和开发学习笔记相关推荐

  1. 高性能Cordova App开发学习笔记

    高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...

  2. Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件

    Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件 插件是由PolyWorks加载的动态链接库(DLL文件),然后查询Polyworks模块,以确定它们具有哪些功能,提供给 ...

  3. 小狐狸横版游戏开发学习笔记(上)

    小狐狸横版游戏开发学习笔记(上) 目录 小狐狸横版游戏开发学习笔记(上) 1.关于如何创建Tilemap 2.关于地图格子之间出现间隙的问题 3.如何设置自己想要的控制按键 4.如何解决玩家移动过程中 ...

  4. ④ESP8266 开发学习笔记_By_GYC 【Ubuntu系统下ESP8266 开发环境搭建】

    目录 ④ESP8266 开发学习笔记_By_GYC [Ubuntu系统下ESP8266 开发环境搭建] 一.安装前准备 1.乐鑫官方的ESP-IDF 编程指南 2.ESP-IDF风格的ESP8266 ...

  5. 游戏开发学习笔记——lua脚本语言——安装、汉化与小测试(解决lua运行代码乱码问题)

    游戏开发学习笔记--lua脚本语言--安装.汉化与小测试 FOR THE SIGMA FOR THE GTINDER FOR THE ROBOMASTER 简介: Lua 是一种轻量小巧的脚本语言,用 ...

  6. ios开发学习笔记--Core Motion

    iOS开发学习笔记之CoreMotion-运动传感器 官网文档:CoreMotion Framework Reference 一.     简介 现在的苹果手机都基本有运动传感器,能够过获取到设备的加 ...

  7. Windows驱动开发学习笔记(七)—— 多核同步内核重载

    Windows驱动开发学习笔记(七)-- 多核同步 基础知识 并发与同步 分析 InterlockedIncrement 原子操作相关API 内核文件 多核同步 临界区 示例一:错误的临界区 示例二: ...

  8. Windows驱动开发学习笔记(六)—— Inline HOOK

    Windows驱动开发学习笔记(六)-- Inline HOOK SSDT HOOK Inline Hook 挂钩 执行流程 脱钩 实验一:3环 Inline Hook 实验二:0环 Inline H ...

  9. Windows驱动开发学习笔记(五)—— SSDT HOOK

    Windows驱动开发学习笔记(五)-- SSDT HOOK 系统服务表 系统服务描述符表 实验一:通过代码获取SSDT表地址 通过页表基址修改页属性 方法1:修改页属性 方法2:修改CR0寄存器 实 ...

最新文章

  1. [转]Linux下如何安装软件
  2. Erlang 之父去世,他留给程序员两点忠告
  3. 5. 最长回文子串——暴力法---动态规划解法---扩展中心法
  4. 咖啡馆的故事:FTP, RMI , XML-RPC, SOAP, REST一网打尽
  5. python源码精要(4)-C代码规范
  6. Label Studio 入门
  7. 阿里巴巴工程师:Java 编程技巧之数据结构
  8. Swing的设计是MVC的典范
  9. Fortinet:行走在网络和安全融合领域的最前列
  10. 详解Vue八大生命周期钩子函数
  11. 双光子荧光成像_有机双光子荧光染料在生物成像中的应用取得新进展
  12. python file tell_Python3 File tell() 方法
  13. 分析百度的中文分词结果
  14. Android9.0系统源码_编译刷机——从下载到编译
  15. html怎么设置取消隐藏,怎么取消wifi隐藏_取消隐藏wifi设置方法-192路由网
  16. 数据分析之乳腺癌预测
  17. Ngrok(内网穿透工具)使用教程详解
  18. 摄像头工作原理及结构介绍(一)
  19. 世界杯期间随想(摘自本人新浪微博)
  20. 【ZCMU1600】卡斯丁狗要吃糖葫芦

热门文章

  1. Python *args 用法笔记
  2. 牛客Mysql——SQL必知必会
  3. 正则表达式验证校验邮箱的格式
  4. linux shell脚本使用bc命令实现小数数值计算
  5. Golang中的fmt用法
  6. Source Insight3.5软件使用及配置
  7. Mysql---表管理
  8. 设计巧妙的保险丝熔断指示电路
  9. easyswoole环境配置
  10. TGame游戏新篇:2.2、插曲