为什么你的App里网页按钮点不动？
你是否遇到过这种情况：精心设计的H5页面在iOS应用里加载后，按钮点击毫无反应？明明在浏览器里运行正常的页面，嵌套到App里却像被冻住了？这背后其实藏着iOS与H5交互的秘密。
一、什么是”跨次元通话”
想象iOS是个说Objective-C/Swift的外星人，H5是个讲JavaScript的地球人。要让这两个不同星球的生物对话，我们需要：
- 建立专用通讯基站（WebView）
- 准备翻译字典（JavaScriptCore框架）
- 制定通话规则（交互协议）
二、双向通话的两种方式
当iOS需要呼叫H5时：
- 在WKWebView里执行evaluateJavaScript(“showAlert(‘Hi’)”)
- 就像对着对讲机喊话：”总部呼叫鹰眼，听到请回答”
当H5需要联系iOS时：
- 通过window.webkit.messageHandlers.myHandler.postMessage(data)
- 相当于按下紧急呼叫按钮：”鹰眼请求空中支援！”
三、五步实现基础交互
1. 搭建通讯基站：
let webView = WKWebView(frame: view.bounds, configuration: config)
2. 安装翻译设备：
class NativeBridge: NSObject, WKScriptMessageHandler {
func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) {
// 接收H5消息
}
}
3. 建立专用频道：
config.userContentController.add(NativeBridge(), name: “nativeBridge”)
4. 定义通话暗号：
// H5端发送
window.webkit.messageHandlers.nativeBridge.postMessage({action:”share”})
5. 处理紧急呼叫：
func handleShareRequest(params: [String:Any]) {
UIActivityViewController(activityItems: [params[“content”]],
applicationActivities: nil)
}
四、新手必踩的三个坑
- 参数类型乱码：记得把JSON字符串转为Dictionary
- 内存泄漏黑洞：在deinit里removeScriptMessageHandler
- 回调函数失踪：H5的方法要在页面加载完成后注入
小编观点：当你成功打通第一个交互方法时，不妨在Xcode控制台输出一句”Hello Hybrid World”，这比任何理论知识都更能让你理解跨平台交互的精髓。