在前面的文章中介绍的了如何使用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)。创建的时候系统会提示是否同时创建桥接头文件,这里选择确定。
(2)在新生成的桥接头文件 HelloWorld-Bridging-Header.h 中把 Cordova/CDV.h 给 import 进来
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)
}
} |
(4)在 config.xml 中添加如下配置,将我们创建的功能类给配置上
1
2
3
|
< feature name = "HanggeSwiftPlugin" >
< param name = "ios-package" value = "HWPHanggeSwiftPlugin" />
</ feature >
|
(5)首页 index.html 代码如下,修改运行后即可看到效果。
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