在前面的文章中介紹的了如何使用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