在前一篇文章中我介绍了如何通过 js 与原生代码进行交互（Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）），当时是直接对Cordova生成的iOS工程项目进行编辑操作的（添加Swift类和相关配置等）。
原来我也说过，使用 Cordova 进行跨平台应用开发时，不建议直接对生成的各个平台项目进行编辑（除非目前只要开发单一平台版本）。比如：html页面应该是编辑Cordova工程根目录下的 www 文件夹内容，再一次编译发布成多个平台项目。
同样的，如果需要实现与系统原生代码的交互，我们也应该将其封装成一个个插件（像原来介绍过的 camera插件，console插件）。这样就可以实现动态地添加或移除插件，也便于在其他项目中的复用。
本文介绍如何使用 Swift 开发一个Cordova功能插件。
1，自定义插件的功能说明
本文是将前文的口令验证功能封装成插件，所以最终实现的功能是一样的。即Swift这边接收传输过来的口令字符串，判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。
2，自定义插件的使用效果图
同前文还是一样的。 
同前文还是一样的。
3，自定义插件的创建
我们随便在本地建立一个文件夹（比如叫 HanggeSwiftPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：
下面分别介绍各个文件的内容和功能
（1）src文件夹
这个下面就是放置插件的功能实现代码了，可以看到目前 src 文件夹下只有一个 ios 子文件夹。因为本文只实现了 iOS 的验证插件，如果还有 Android 版的验证插件，那么可以在 src 文件夹下再创建个 android 文件夹，然后把相关的 java 代码放到里面。
由于功能比较简单，在 ios 文件夹下只有一个实现类 HanggeSwiftPlugin.swift，具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
import Foundation
@objc(HWPHanggeSwiftPlugin) class HanggeSwiftPlugin : CDVPlugin {
//验证口令方法
func verifyPassword(command:CDVInvokedUrlCommand)
{
//返回结果
var pluginResult:CDVPluginResult?
//获取参数
let password = command.arguments[0] as? String
//开始验证
if password == nil || password == "" {
pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
messageAsString: "口令不能为空")
}else if password != "hangge" {
pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
messageAsString: "口令不正确")
}else{
pluginResult = CDVPluginResult(status:CDVCommandStatus_OK)
}
//发送结果
self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
}
} |
（2）hangge-swift-plugin.js
JS模块文件，这里封装了插件的调用方法，这样在页面中使用的时候更加方便。
比如前文我们通过 Cordova.exec() 来调用 Swift 代码，这里我们使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。其内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
'use strict';
var exec = require('cordova/exec');
var HanggeSwiftPlugin = {
verifyPassword: function(sendMsg, onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeSwiftPlugin', 'verifyPassword', [sendMsg]);
}
};module.exports = HanggeSwiftPlugin; |
（3）plugin.xml
插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的验证功能，所以只配置了iOS平台相关内容）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<?xml version="1.0" encoding="UTF-8"?>
id="hangge-swift-plugin"
version="0.1">
<name>HanggeSwiftPlugin</name>
<description>This plugin use to verify password</description>
<js-module src="hangge-swift-plugin.js">
<clobbers target="window.HanggeSwiftPlugin" />
</js-module>
<!-- iOS -->
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="HanggeSwiftPlugin">
<param name="ios-package" value="HWPHanggeSwiftPlugin" />
</feature>
</config-file>
<source-file src="src/ios/HanggeSwiftPlugin.swift" />
</platform>
</plugin>
|
4，自定义插件的安装
封装好的插件我们通过 cordova plugin add 命令来安装，假设我们要给 HelloWorld 这个工程添加刚才做的那个自定义验证插件。
（1）由于插件是使用Swift语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件：
|
1
|
cordova plugin add cordova-plugin-add-swift-support |
（2）假设我们做的自定义插件是在用户“文稿”目录下，运行如下命令把这个插件添加到工程中来：
|
1
|
cordova plugin add ~/Documents/HanggeSwiftPlugin |
进入项目文件夹下的 plugins 文件夹可以看到，自定义插件已经成功的添加进来。当然，这个自定义插件在各个平台工程下也同步安装了。
（3）以后如果想移除这个自定义插件，运行如下命令即可：
|
1
|
cordova plugin rm hangge-swift-plugin |
5，自定义插件的使用
修改首页 index.html 为如下内容。
（1）我们还是可以通过Cordova.exec()来调用Swift验证代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html><html> <head>
<title>口令验证</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">
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").value;
//调用自定义的验证插件
Cordova.exec(successFunction, failFunction, "HanggeSwiftPlugin",
"verifyPassword", [password]);
}
//验证成功
function successFunction(){
alert("口令验证成功！");
}
//验证失败
function failFunction(message){
alert("验证失败："+message);
}
</script>
<style>
* {
font-size:1em;
}
</style>
</head>
<body style="padding-top:50px;">
<input type="text" id="pwd" >
<button onclick="verify();">验证</button>
</body>
</html> |
在“终端”中运行如下命令编译：
|
1
|
cordova build |
接着运行如下命令使用模拟器运行，即可看到效果：
|
1
|
cordova emulate ios |
（2）当然还是建议使用 模块名.模块方法() 的形式调用自定义插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html><html> <head>
<title>口令验证</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">
//开始验证
function verify() {
//获取输入的口令
var password = document.getElementById("pwd").value;
//调用自定义的验证插件
HanggeSwiftPlugin.verifyPassword(password, successFunction, failFunction);
}
//验证成功
function successFunction(){
alert("口令验证成功！");
}
//验证失败
function failFunction(message){
alert("验证失败："+message);
}
</script>
<style>
* {
font-size:1em;
}
</style>
</head>
<body style="padding-top:50px;">
<input type="text" id="pwd" >
<button onclick="verify();">验证</button>
</body>
</html> |
（3）回调方法可以使用匿名函数
|
1
2
3
4
5
6
7
8
9
10
11
|
//开始验证function verify() {
//获取输入的口令
var password = document.getElementById("pwd").value;
//调用自定义的验证插件
HanggeSwiftPlugin.verifyPassword(password,
function() { alert("口令验证成功！");},
function(message){
alert("验证失败："+message);
});
} |
（4）在使用自定义插件之前还可以判断下插件是否存在，以防报错
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//开始验证function verify() {
//获取输入的口令
var password = document.getElementById("pwd").value;
//调用自定义的验证插件
if (window.HanggeSwiftPlugin) {
HanggeSwiftPlugin.verifyPassword(password,
function() { alert("口令验证成功！");},
function(message){
alert("验证失败："+message);
});
}else{
alert("未安装验证插件!");
}
} |
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1152.html