自定义 Cordova插件详解

1、Cordova的基础点

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

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

Cordova 自定义插件的官方文档java

2、观察现有应用结构

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

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

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

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

3、使用plugman开发Cordova插件

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

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

src存放的是各平台的原生代码，plugin.xml为插件描述及配置文件，www是web工程目录（其实主要就是MyToast.js这个js中间件），咱们能够手动建立这几个目录及文件，然而这并非一个好的方式，由于效率不高，推荐的方式是使用plumam。
一、首先安装plumam命令行工具npm

npm install -g plugmanjson

二、安装完以后，建立pluginruby

使用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.java和src/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.js和MyToast.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(); 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]); }; 

三、建立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" } 

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

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

若是没有现成的项目，能够建立一个新的Cordova项目来测试：
cordova create hello com.example.hello HelloWorld
注：

hello:项目文件夹名
com.example.hello:项目包名
HelloWorld:项目名

而后进入到该Cordova项目目录，像日常添加插件同样，运行以下命令：（add 后面为插件所在本地或网络路径）：
cordova plugin add /Users/cordova/MyToast
若是已有项目，且是ionic项目，则命令前追加上ionic：
ionic cordova plugin add /Users/cordova/MyToast

在ionic2或以上使用时，打开任意一个ts文件，在头部声明以下：
declare let cordova: any;
而后调用便可（若是是普通js调用，则能够省掉上面那步）：
cordova.plugins.MyToast.showToast("hello"); //后两个success, error参数省略不写

5、其余命令

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