Cordova - 与iOS原生代码交互2（使用Swift开发Cordova的自定义插件）
2016-04-25 09:16 Komici 阅读(1248) 评论(0) 编辑 收藏 举报在前一篇文章中我介绍了如何通过 js 与原生代码进行交互（Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）），当时是直接对Cordova生成的iOS工程项目进行编辑操作的（添加Swift类和相关配置等）。
原来我也说过，使用 Cordova 进行跨平台应用开发时，不建议直接对生成的各个平台项目进行编辑（除非目前只要开发单一平台版本）。比如：html页面应该是编辑Cordova工程根目录下的 www 文件夹内容，再一次编译发布成多个平台项目。
同样的，如果需要实现与系统原生代码的交互，我们也应该将其封装成一个个插件（像原来介绍过的 camera插件，console插件）。这样就可以实现动态地添加或移除插件，也便于在其他项目中的复用。
本文介绍如何使用 Swift 开发一个Cordova功能插件。
1，自定义插件的功能说明
本文是将前文的口令验证功能封装成插件，所以最终实现的功能是一样的。即Swift这边接收传输过来的口令字符串，判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。
2，自定义插件的使用效果图
同前文还是一样的。 
（2）hangge-swift-plugin.js
JS模块文件，这里封装了插件的调用方法，这样在页面中使用的时候更加方便。
比如前文我们通过 Cordova.exec() 来调用 Swift 代码，这里我们使用 插件名称.插件方法() 即可，这样使用起来更加方便，代码也更加清晰。其内容如下：
（3）plugin.xml
插件的配置文件。用来配置插件的名字，JS模块文件位置，以及各个平台的功能实现源码位置（这里只实现的iOS的验证功能，所以只配置了iOS平台相关内容）。
4，自定义插件的安装
封装好的插件我们通过 cordova plugin add 命令来安装，假设我们要给 HelloWorld 这个工程添加刚才做的那个自定义验证插件。
同前文还是一样的。
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 |
|
1
|
cordova plugin rm hangge-swift-plugin |
修改首页 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 |
|
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> |
|
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
