自定义Cordova插件详解

一、Cordova的基础点

在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识。

那Cordova插件的基础要点是什么呢?其实就是把原生代码调用方法映射为js的统一接口,供H5使用而已.

Cordova 自定义插件的官方文档

二、观察现有应用结构

打开任意一个基于Cordova技术的hybird app的开发目录,添加过平台(android、ios等)和安装过插件的话,你会发现结构大致是这样子的:

├── platforms
|    ├── android
|    ├── ios
|    └── ...
├── plugins
|    ├── org.apache.cordova.device
|    └── ...
├── config.xml
└── www

这里的 platforms 是我们应用支持的平台目录,plugins是我们安装的插件目录,config.xml 是应用的配置信息(应用名称、描述等),www 是我们的 web 工程目录。

也就是说,如果我们创建一个新的插件并安装,也会添加到plugins目录中,同时修改其它文件信息。那下一步就来开始进行验证。

三、使用plugman开发Cordova插件

一个独立插件的目录基本结构是这样的:

MyToast
├── src
|    ├── android
|    |    └── MyToast.java
|    ├── ios
|    └── ...
├── www
|    └── MyToast.js
└── plugin.xml

src存放的是各平台的原生代码,plugin.xml为插件描述及配置文件www是web工程目录(其实主要就是MyToast.js这个js中间件),我们可以手动创建这几个目录及文件,然而这并不是一个好的方式,因为效率不高,推荐的方式是使用plumam。 1、首先安装plumam命令行工具

npm install -g plugman

2、安装完之后,创建plugin

使用plumam创建插件的命令是:

plugman create --name pluginName --plugin_id pluginID --plugin_version version [--path path] [--variable NAME=VALUE]

参数说明:

pluginName:插件名称,如MyToast; pluginID:插件id, 如:org.demo.mytoast; version:版本号, 如:0.0.1; path:插件存放的绝对或相对路径; variable NAME=VALUE:扩展参数,如说明或作者,如woodstream

于是命令行中敲入以下代码: plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1 这样将会在当前目录创建一个MyToast插件,进入插件目录,打开plugin.xml查看,注意以下内容及说明:

plugin
- id:插件唯一标识
- version:版本号
- js-module
    src:js中间件相对文件地址(www目录下的那个js)
    name:模块名称
    clobbers/merges
        target:H5通过它调用js中间件方法(ts调用方法的前缀)
- platform
    name:对应平台android | ios
    source-file
        src:类名
        tartget-dir:插件文件复制到到原生项目位置
        feature
             name:js中间件通过它调用原生方法(包名)
        uses-permission:相关原生权限

也就是说,我们可以写这样一个插件,不写一句原生代码,只是为了设置权限和拷贝文件。

等你消化完plugin.xml文件后,敲入命令进入插件目录: cd MyToast 添加支持平台 plugman platform add --platform_name android plugman platform add --platform_name ios 这样,就会分别创建src/android/MyToast.javasrc/ios/MyToast.m两个文件,这里只演示android的代码,所以打开MyToast.java观察:

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("coolMethod")) {
        String message = args.getString(0);
        this.coolMethod(message, callbackContext);
        return true;
    }
    return false;
  }

  private void coolMethod(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

其中execute是必须的方法,是和www目录中的MyToast.js关联打交道用的,至于MyToast.jsMyToast.java怎么关联,是由Cordova解释plugin.xml处理的,内部细节不需要知道,只需按方法格式编写即可。CallbackContext为回调上下文,coolMethod为可选的默认生成的示例方法,一般里面就写原生的代码,我们把它改成我们想要的:showToast,然后补充基本的一些原生代码,最后文件变成这样:

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("showToast")) {
        String message = args.getString(0);
        this.showToast(message, callbackContext);
        return true;
    }
    return false;
  }

  private void showToast(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        Activity activity = this.cordova.getActivity();
        android.widget.Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

然后再打开www/MyToast.js修改如下:

  //showToast为安装后js调用的方法名,参数可以为任意多个
  exports.showToast = function(msg, success, error) {
      //"showToast"为给MyToast.java判断的action名
      exec(success, error, "MyToast", "showToast", [msg]);
  };

3、创建package.json文件 本来执行完上述步骤,一个插件就完成了的,但后来的Cordova版本要求添加一个package.json来管理插件,而plumam没有给我们创建这样一个文件,于是我们手动创建,借助npm init命令创建package.json。里面的参数从plugin.xml拿过来便是:

{
 "name": "MyToast",
  "version": "0.0.1",
  "description": "demo",
  "cordova": {
    "id": "com.demo.mytoast",
    "platforms": [
      "android"
    ]
  },
  "keywords": [],
  "author": "demo",
  "license": "MIT"
}

这样一个插件就开发完成了。

四、安装已开发完成的插件

如果没有现成的项目,可以创建一个新的cordova项目来测试: cordova create hello com.example.hello HelloWorld 然后像平常添加插件一样,运行如下命令:(add 后面为插件所在本地或网络路径): cordova plugin add /Users/cordova/MyToast 如果已有项目且是ionic项目,则命令前追加上ionic: ionic cordova plugin add /Users/cordova/MyToast

在ionic2或以上使用时,打开任意一个ts文件,在头部声明如下: declare let cordova: any; 然后调用即可: cordova.plugins.MyToast.showToast("hello"); //后两个success, error参数省略不写

五、其他命令

删除插件: ionic cordova plugin remove XXXXX(你的plugin_id) 查看已安装插件 ionic cordova plugin list

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

解决 TP3 框架 引入 Log.class.php 文件报错方法

朋友的这个问题真的很无语,可能会出现在使用 SVN 的情况下,使用 Git 进行团队开发忽略以后是不会出现这种问题的

2941
来自专栏kl的专栏

spring boot集成redisson的最佳实践

本文假使你了解spring boot并实践过,非spring boot用户可跳过也可借此研究一下。redisson是redis的java客户端程序,国内外很多公...

2.1K7
来自专栏云计算教程系列

使用Capistrano,Nginx和Puma在Ubuntu 14.04上部署Rails应用程序

Rails是一个用Ruby编写的开源Web应用程序框架。Nginx是一种高性能HTTP服务器,反向代理和负载均衡器,以其并发性,稳定性,可伸缩性和低内存消耗而著...

1704
来自专栏calvin

net core 程序docker打包镜像并发布到官方store

学习一个技术的第一步,总是要先打印或显示一个hello world的。当然,学习docker也不例外。上一篇文章已经简单的介绍了环境的安装和配置。接下来就要打印...

2882
来自专栏iOS 开发杂谈

浅谈如何在项目中处理页面中的多个网络请求

在开发中很多时候会有这样的场景,同一个界面有多个请求,而且要在这几个请求都成功返回的时候再去进行下一操作,对于这种场景,如何来设计请求操作呢?今天我们就来讨论一...

3132
来自专栏枕边书

网页实时聊天之js和jQuery实现ajax长轮询

众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系。所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,...

7248
来自专栏华仔的技术笔记

Block类型变量-缓存Http请求与回调

3526
来自专栏Python爬虫与算法进阶

强大的异步爬虫 with aiohttp

看到现在网络上大多讲的都是requests、scrapy,却没有说到爬虫中的神器:aiohttp

1902
来自专栏pangguoming

Java 与 JavaScript 对websocket的使用

ebsocket,HTML5中新一代全双工通信协议。其底层仍然是http协议。 传统 HTTP 请求响应客户端服务器交互图 ? WebSocket 请求响应客户...

3636
来自专栏pythonlove

FTP使用MariaDB完成虚拟用户认证

文件传输协议(英文:File Transfer Protocol,縮寫:FTP)是用於在網絡上進行文件傳輸的一套標準協議。它属于网络传输协议的应用层。FTP是一...

1134

扫码关注云+社区

领取腾讯云代金券