在前面的文章中介绍的了如何使用Cordova进行跨平台应用的开发，使用Cordova的话基本上就不需要在写系统原生代码了，只要通过编写html页面和js方法即可。
但在有些特殊情况下，还是是需要html页面能和系统原生代码（ios native code）进行交互。下面介绍如何实现 JS 与 Swift 代码间的相互通信。
假设我们已经建立了一个名叫 HelloWorld 的Cordova工程项目（不太清楚如何使用Cordova的可以参考我前面写的几篇文章：使用Cordova开发iOS应用实战1（配置、开发第一个应用））
1，样例说明
（1）虽然使用Cordova创建的工程是一个 OC 工程，但由于苹果可以很方便的支持混合编程，所以我们用 Swift 来实现与 JS 的交互也是可以的。
（2）这里我们使用Swift来做个口令验证的功能，由于只是演示，所以代码很简单。Swift这边接收传输过来的口令字符串，判断正确与否并反馈回页面。如果验证失败还会返回具体的失败原因信息。
2，样例效果图
3，实现步骤
（1）我们在 Plugins 文件夹中新建一个Swift文件（HanggeSwiftPlugin.swift）。创建的时候系统会提示是否同时创建桥接头文件，这里选择确定。
|
1
|
#import <Cordova/CDV.h> |
（3）新建的 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) }} |
|
1
2
3
|
<feature name="HanggeSwiftPlugin"> <param name="ios-package" value="HWPHanggeSwiftPlugin" /></feature> |
|
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> |
原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1150.html