WebView与native交互-WebViewBridge.S

缘由闲扯

话说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的参数数组, 成功回调, 失败回调)