缘由闲扯
话说WebView 与 Native的交互并不复杂；似乎需不需要什么封装，项目之初也是这么想的，只是需求的增加，UIWebView和WKWebView的混合使用（WKWebView性能好些，只是确实由不少问题参见 <a href="https://github.com/ShingoFukuyama/WKWebViewTips">WKWebViewTips</a>， 补充：修改WKWebView的contentInset会导致位置计算出错，导致js点击出现问题）；代码变得也就难以维护；话说不造轮子的厨师不是好裁缝；开源的项目不少，研究了下，重新设计，然后有了 <a href="https://github.com/zhangbozhb/WebViewBridge.Swift">WebViewBridge.Swift</a>
简介
WebView与Native桥并不是一个新的话题, 在很早以前就有实现了, 也有很好的实现.比如 <a href="https://github.com/apache/Cordova-ios">Cordova(PhoneGap)</a>, <a href="https://github.com/marcuswestin/WebViewJavascriptBridge">WebViewJavascriptBridge</a>桥本身的技术并不困难, 实现也都大同小异, 既然已经有项目 <a href="https://github.com/apache/Cordova-ios">Cordova(PhoneGap)</a>, <a href="https://github.com/marcuswestin/WebViewJavascriptBridge">WebViewJavascriptBridge</a>, 那还有必要重复再造轮子么?
- Cordova-ios: 本身是一个很了不起的项目, 提供了多个平台, 对于 Hybrid App而言, 是一个很好的选择;如果你编写的不是Hybrid App, 只是想简单的集成 bridge这个功能, Cordova 就显得过于复杂了, 不方面集成, 另外暂时也无 swift 版本的
- WebViewJavascriptBridge: 也很不错, 同时提供了 iOS, android 版本, 集成也简单方便. 有以下几点不足:
- UIWebView/WKWebView: 采用的旧式的 iframe 方式来实现, 集成相对麻烦
- 没有提供 Swift 版本
WebViewBridge.Swift 给你提供了另一种可能, 与其他相比由以下优点:
- 采用 JavaScriptCore, 弃用iframe，使用更简单 (并非完全弃用iframe, 在webViewDidFinishLoad之前可能仍会使用iframe)
- 全 Swift 实现
WebViewBridge.Swift 是你的一个不错的选择.
此外: 对于此外常见的 webview点击下载图片, 实例代码中页给出了实现.
（注意实例代码中, 下载缓存图片代码是有bug的,可以考虑使用第三方图片库, 比如 <a href="https://github.com/onevcat/Kingfisher">Kingfisher</a>）
前提: 为WebView和html建立桥
1 给 UIWebView/WKWebView 建立桥
let webView = WKWebView()
let bridge = ZHWebViewBridge.bridge(webView)
- Note: 对于 UIWebView 需要注意一下事情
- 拷贝 bridge.js 代码到你的html文件中
- 需要主动调用 bridge.teardown() 用于释放对你的 UIWebView的强引用
原生代码与 JS 的相互交互
1, 原生代码调用 js handler
a, 在你的html中或业务 js 中 添加 js handler
ZHWVBridge.Core.registerJsHandler(
"Device.updateAppVersion",
function (version) {
document.getElementById("native-version-container").textContent = version;
return "js get version: " + version;
});
- 说明: ZHWVBridge.Core.registerJsHandler(handlerName, callback)
b, 原生代码调用 js handler
bridge.callJsHandler(
"Device.updateAppVersion",
args: ["1.2"],
callback: { (data:AnyObject?) in
// here data should be "js get version: 1.2"
...
})
- 说明: bridge.callJsHandler(handlerName, 传递给js的参数数组, callback)
2, Js 调用原生 handler
a, 原生代码中, bridge 注册 native handler
bridge.registerHandler("Image.updatePlaceHolder") { (args:[AnyObject]) -> (Bool, [AnyObject]?) in
return (true, ["place_holder.png"])
}
b, js 调用原生 handler
ZHWVBridge.Core.callNativeHandler(
"Image.updatePlaceHolder",
[],
function(placeHolder) {
var items = document.getElementsByTagName('img');
for (var i = 0, count = items.length; i < count; ++i) {
var item = items[i];
if (item.src.toLocaleLowerCase() == "file:///default_cover") {
item.src = placeHolder;
}
}
});
- 说明: ZHWVBridge.Core.callNativeHandler(handlerName, 传递给原生handler的参数数组, 成功回调, 失败回调)
