返回 导航

Cordova

hangge.com

Cordova - 与iOS原生代码交互1（通过JS调用Swift方法）

作者：hangge | 2016-04-24 10:20
（本文代码已升级至Swift3）

在前面的文章中介绍的了如何使用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 进来 
#import <Cordova/CDV.h>

（3）新建的 HanggeSwiftPlugin.swift 中添加如下代码  
import Foundation

@objc(HWPHanggeSwiftPlugin) class HanggeSwiftPlugin : CDVPlugin {
    
    //验证口令方法
    @objc(verifyPassword:)
    func verifyPassword(command:CDVInvokedUrlCommand)
    {
        //返回结果
        var pluginResult:CDVPluginResult?
        //获取参数
        let password = command.arguments[0] as? String
        
        //开始验证
        if password == nil || password == "" {
            pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
                                           messageAs: "口令不能为空")
        }else if password != "hangge" {
            pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR,
                                           messageAs: "口令不正确")
        }else{
            pluginResult = CDVPluginResult(status:CDVCommandStatus_OK)
        }
        
        //发送结果
        self.commandDelegate.send(pluginResult, callbackId: command.callbackId)
    }
}

（4）在 config.xml 中添加如下配置，将我们创建的功能类给配置上 
<feature name="HanggeSwiftPlugin">
    <param name="ios-package" value="HWPHanggeSwiftPlugin" />
</feature>

（5）首页 index.html 代码如下，修改运行后即可看到效果。 
<!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>
源码下载：hello.zip
评论

全部评论（7）

回到顶部