Cordova - 创建一个包含多个方法的自定义插件（实现加减乘除功能为例）
作者：hangge | 2016-07-29 08:40
在之前的一系列自定义插件的文章中。每个插件里面我都只定义一个方法，其实每个插件是允许我们定义多个方法的。这样我们可以把一些功能相近的方法放在同一个插件下，方便调用。
下面自定义一个包含多方法的数学计算插件作为样例进行演示，里面提供了加减乘除四则运算供我们调用。
1，样例效果图
点击按钮，我们可以调用插件里对应的方法来计算。
2，自定义插件的创建
3，自定义插件的安装
（1）由于插件是使用 Swift 语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件：
（3）以后如果想移除这个自定义插件，运行如下命令即可：
4，自定义插件的使用
HanggeMathPlugin.zip
2，自定义插件的创建
我们随便在本地建立一个文件夹（比如叫 HanggeMathPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：
下面分别介绍各个文件的内容和功能
（1）src文件夹
这个下面就是放置插件的功能实现代码了，可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 版的插件，如果还有 Android 版的插件，那么可以在 src 文件夹下再创建个 android 文件夹，然后把相关的 java 代码放到里面。
由于功能比较简单，在 ios 文件夹下只有一个实现类 HanggeMathPlugin.swift，具体代码如下：
JS模块文件，这里封装了插件的调用方法。
我们直接使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。
下面分别介绍各个文件的内容和功能
（1）src文件夹
这个下面就是放置插件的功能实现代码了，可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 版的插件，如果还有 Android 版的插件，那么可以在 src 文件夹下再创建个 android 文件夹，然后把相关的 java 代码放到里面。
由于功能比较简单，在 ios 文件夹下只有一个实现类 HanggeMathPlugin.swift，具体代码如下：
import Foundation
@objc(HWPHanggeMathPlugin) class HanggeMathPlugin : CDVPlugin {
//加法运算
func add(command:CDVInvokedUrlCommand)
{
//获取参数
let value1 = command.arguments[0] as! Double
let value2 = command.arguments[1] as! Double
//计算结果
let result = value1 + value2
//返回结果
var pluginResult:CDVPluginResult?
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
messageAsDouble: result)
//发送结果
self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
}
//减法运算
func subtract(command:CDVInvokedUrlCommand)
{
//获取参数
let value1 = command.arguments[0] as! Double
let value2 = command.arguments[1] as! Double
//计算结果
let result = value1 - value2
//返回结果
var pluginResult:CDVPluginResult?
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
messageAsDouble: result)
//发送结果
self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
}
//乘法运算
func multiply(command:CDVInvokedUrlCommand)
{
//获取参数
let value1 = command.arguments[0] as! Double
let value2 = command.arguments[1] as! Double
//计算结果
let result = value1 * value2
//返回结果
var pluginResult:CDVPluginResult?
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
messageAsDouble: result)
//发送结果
self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
}
//除法运算
func divide(command:CDVInvokedUrlCommand)
{
//获取参数
let value1 = command.arguments[0] as! Double
let value2 = command.arguments[1] as! Double
//计算结果
let result = value1 / value2
//返回结果
var pluginResult:CDVPluginResult?
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
messageAsDouble: result)
//发送结果
self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
}
}
（2）hangge-math-plugin.jsJS模块文件，这里封装了插件的调用方法。
我们直接使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。
注意：定义多个方法时相互间的逗号不要忘记了（9、12、15行），否则插件方法无法调用，会报插件不存在错误。
其内容如下：
插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的功能，所以只配置了iOS平台相关内容）。
'use strict';
var exec = require('cordova/exec');
var HanggeMathPlugin = {
add: function([value1,value2], onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeMathPlugin', 'add', [value1,value2]);
},
subtract: function([value1,value2], onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeMathPlugin', 'subtract', [value1,value2]);
},
multiply: function([value1,value2], onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeMathPlugin', 'multiply', [value1,value2]);
},
divide: function([value1,value2], onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeMathPlugin', 'divide', [value1,value2]);
},
};
module.exports = HanggeMathPlugin;
（3）plugin.xml插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的功能，所以只配置了iOS平台相关内容）。
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="hangge-math-plugin"
version="0.1">
<name>HanggeMathPlugin</name>
<description>This plugin use to caculate</description>
<js-module src="hangge-math-plugin.js">
<clobbers target="window.HanggeMathPlugin" />
</js-module>
<!-- iOS -->
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="HanggeMathPlugin">
<param name="ios-package" value="HWPHanggeMathPlugin" />
</feature>
</config-file>
<source-file src="src/ios/HanggeMathPlugin.swift" />
</platform>
</plugin>
3，自定义插件的安装
（1）由于插件是使用 Swift 语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件：
cordova plugin add cordova-plugin-add-swift-support（2）假设我们做的自定义插件是在用户“文稿”目录下，运行如下命令把这个插件添加到工程中来：
cordova plugin add ~/Documents/HanggeMathPlugin进入项目文件夹下的 plugins 文件夹可以看到，自定义插件已经成功的添加进来。当然，这个自定义插件在各个平台工程下也同步安装了。
（3）以后如果想移除这个自定义插件，运行如下命令即可：
cordova plugin rm hangge-math-plugin
4，自定义插件的使用
修改首页 index.html 为如下内容。
插件源码下载：<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready",onDeviceReady,false);
//Cordova加载完成会触发
function onDeviceReady() {
}
var value1 = 4;
var value2 = 2;
//加法运算
function add(){
HanggeMathPlugin.add([value1,value2],
function(result) {
alert('4+2='+result);
},
function(errorMessage){
alert("计算失败："+errorMessage);
});
}
//减法运算
function subtract(){
HanggeMathPlugin.subtract([value1,value2],
function(result) {
alert('4-2='+result);
},
function(errorMessage){
alert("计算失败："+errorMessage);
});
}
//乘法运算
function multiply(){
HanggeMathPlugin.multiply([value1,value2],
function(result) {
alert('4*2='+result);
},
function(errorMessage){
alert("计算失败："+errorMessage);
});
}
//除法运算
function divide(){
HanggeMathPlugin.divide([value1,value2],
function(result) {
alert('4/2='+result);
},
function(errorMessage){
alert("计算失败："+errorMessage);
});
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="add();">计算：4+2</button><br>
<button style="font-size:23px;" onclick="subtract();">计算：4-2</button><br>
<button style="font-size:23px;" onclick="multiply();">计算：4*2</button><br>
<button style="font-size:23px;" onclick="divide();">计算：4/2</button><br>
</body>
</html>
HanggeMathPlugin.zip
全部评论（0）