Swift 3.0原生iOS应用集成响应式网页及Cordova交互技术咨询

我来一步步帮你搞定在现有Swift 3.0项目里集成Cordova，实现网页加载和原生交互的需求，这比你想象的要 straightforward~

一、先把Cordova集成到你的Swift项目里 #

首先得把Cordova的核心库和网页资源导入到现有项目中：

1. 先安装Cordova CLI，终端执行：

   npm install -g cordova
   

2. 创建一个临时Cordova项目用来提取所需文件：

   cordova create tempCordova com.yourdomain.yourapp YourApp
   cd tempCordova && cordova platform add ios@4.5.5
   

   选ios@4.5.5是因为它对Swift 3.0的兼容性更好，避免版本不匹配的坑。
3. 把临时项目里的两个关键目录复制到你的Swift项目：
   • tempCordova/platforms/ios/www：放你的响应式网页资源，复制后在Xcode中把这个文件夹添加到项目，记得选"Create groups"，并勾选你的App Target。
   • tempCordova/platforms/ios/CordovaLib：Cordova的核心库，同样在Xcode中添加这个文件夹，确保它的依赖被正确导入。

二、用CordovaViewController加载网页 #

创建一个继承自CDVViewController的Swift类，用来承载你的网页：

import UIKit

class CordovaWebVC: CDVViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 加载本地网页（如果是远程网页，直接替换成远程URL字符串即可）
        guard let htmlPath = Bundle.main.path(forResource: "www/index", ofType: "html") else {
            print("网页文件不存在")
            return
        }
        let localUrl = URL(fileURLWithPath: htmlPath)
        self.load(localUrl.absoluteString)
    }
}

之后在你需要打开网页的地方（比如按钮点击事件），跳转或present这个控制器：

@IBAction func openWebView(_ sender: UIButton) {
    let cordovaVC = CordovaWebVC()
    self.navigationController?.pushViewController(cordovaVC, animated: true)
}

三、实现网页与原生的交互（网页操作触发原生展示） #

这一步是核心，要让网页的操作能调用原生代码修改展示，我们需要做一个自定义Cordova插件：

1. 写原生插件类 #

创建一个继承自CDVPlugin的Swift类，处理网页的调用请求：

import Foundation

class CustomDisplayPlugin: CDVPlugin {
    // 网页会调用这个方法来触发原生展示修改
    func updateNativeUI(_ command: CDVInvokedUrlCommand) {
        // 获取网页传递的参数（比如要修改的标题、弹窗内容等）
        let payload = command.arguments[0] as? [String: Any] ?? [:]
        let newTitle = payload["title"] as? String ?? "默认标题"
        let alertMessage = payload["message"] as? String ?? "网页触发了原生操作"
        
        // 注意：Cordova插件方法在后台线程执行，UI操作必须切到主线程
        DispatchQueue.main.async {
            // 示例1：修改导航栏标题
            self.viewController?.navigationItem.title = newTitle
            
            // 示例2：弹出原生弹窗
            let alert = UIAlertController(title: "网页通知", message: alertMessage, preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "确认", style: .default))
            self.viewController?.present(alert, animated: true)
        }
        
        // 给网页返回执行结果
        let result = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: "原生UI已更新")
        self.commandDelegate.send(result, callbackId: command.callbackId)
    }
}

2. 注册插件到Cordova配置 #

把临时项目里的config.xml复制到你的www文件夹中，然后添加插件注册：

<feature name="CustomDisplay">
    <param name="ios-package" value="CustomDisplayPlugin" />
    <!-- 如果你的插件类在自定义模块里，要加上模块名，比如YourApp.CustomDisplayPlugin -->
</feature>

3. 网页端调用原生方法 #

在你的响应式网页中，用JS代码调用原生插件：

// 比如点击网页按钮时触发
document.getElementById("trigger-btn").addEventListener("click", function() {
    // 调用原生插件的updateNativeUI方法
    cordova.exec(
        function(successMsg) { console.log("原生操作成功：" + successMsg); }, // 成功回调
        function(errorMsg) { console.log("原生操作失败：" + errorMsg); }, // 失败回调
        "CustomDisplay", // 对应config.xml里的feature name
        "updateNativeUI", // 对应原生插件里的方法名
        [{ title: "网页设置的标题", message: "这是网页传递的内容" }] // 传递给原生的参数
    );
});

四、关键注意事项 #

• 确保Xcode项目的Swift版本设置为3.0（Build Settings -> Swift Language Version），避免编译报错。
• 如果加载远程网页，要在Info.plist中添加App Transport Security例外（或者启用ATS允许HTTPS），不然网页会加载失败。
• 调试时可以用Cordova的console.log，在Xcode的控制台里查看网页的日志输出，方便排查问题。

内容的提问来源于stack exchange，提问作者Vork