WebViewBridge.Swift

WebView 和 Swift 编写的原生代码之间的轻量级桥梁。桥梁不是新概念，已经有了一些优秀项目，例如 Cordova(PhoneGap)，WebViewJavascriptBridge 等等。坦白说，WebViewBridge.Swift 为您提供了另一种选择，但远远不够。

• 现有项目
  • Cordova(PhoneGap) 是一个优秀的项目，是跨平台的，经过良好测试。然而，如果我们不想开发混合应用，它似乎过于复杂，难以集成到我们的应用中。
  • WebViewJavascriptBridge 简单易用，有 iOS 和 Android 版本。
  • 缺点
    • 两者都使用 iframe(UIWebView)，不易使用
    • 没有 Swift 版本。
• WebViewBridge.Swift
  • 使用 JavaScriptCore，废弃 iframe（不是全部，可能在 webViewDidFinishLoad 之前使用 iframe）
  • 全 Swift，易于使用。
  • 支持 UIWebView 和 WKWebView

如果只想将桥梁功能集成到您的应用中，WebViewBridge.Swift 提供了另一种选择。它是简洁的、简单的、为 iOS 优化的，但效果很好。

如果您有任何问题，可以给我发邮件（[email protected]）或者留言。

要求

• iOS 8.0+
• Xcode 7.0 或更高版本

### 屏幕截图

使用

设置您的webView和html之间的桥梁

1 设置UIWebView/WKWebView的桥梁

let bridge = ZHWebViewBridge<WKWebView>.bridge(WKWebView())
let bridge = ZHWebViewBridge<UIWebView>.bridge(UIWebView())

• 注意：如果您为UIWebView设置了桥梁
  • 将bridge.js复制到您的html文件中
  • 手动调用bridge.teardown()或者释放桥梁，桥梁会恢复UIWebView.delegate

原生JS代码交互

1, 原生调用JS处理程序

a，在您的html或业务js中编写js处理程序

ZHBridge.Core.registerJsHandler(
          "Device.updateAppVersion",
          function (version) {
            document.getElementById("native-version-container").textContent = version;
            return "js get version: " + version;
          });

版本2.2之前，请使用ZHWebViewBridge.bridge(UIWebView())

• 注意：ZHBridge.Core.registerJsHandler(handlerName, callback)

b，从原生调用js处理程序

bridge.callJsHandler(
            "Device.updateAppVersion",
            args: ["1.2"],
            callback: { (data:Any?) in
                // here data should be "js get version: 1.2"
                ...
        })

• 注意：bridge.callJsHandler(handlerName, argArrayPassToJs, callback)

2, Js调用原生处理程序

a，编写并注册原生处理程序到桥梁

bridge.registerHandler("Image.updatePlaceHolder") { (args:[Any]) -> (Bool, [Any]?) in
            return (true, ["place_holder.png"])
        }

b，从js调用

ZHBridge.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;
                }
              }
            });

• 注意：ZHBridge.Core.callNativeHandler(handlerName, argArrayPassToNativeHandler, successCallback, failCallback)

3, 其他

a，添加用户插件脚本

bridge.addUserPluginScript("your script")   // when run your plugin: WKWebView at document start， UIWebview will try to run script webViewDidStartLoad(:) webViewDidFinishLoad(:)

安装

CocoaPods

要使用 CocoaPods 将 WebViewBridge.Swift 集成到你的 Xcode 项目中，请在您的 Podfile 中指定它

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'WebViewBridge.Swift'

默认支持 Swift 4。如果您使用的是 Swift 的早期版本，例如 Swift 3，请使用 1.x 版本。

WebViewBridge.Swift 介绍

WebViewBridge.Swift 封装了WebView JS 和原生代码的调用。WebView与原生桥并不是一个新的话题，很早就已经实现了，也有很多好的实现。例如 Cordova(PhoneGap)，WebViewJavascriptBridge。桥本身的技术并不困难，实现也都大同小异。既然已经有项目 Cordova(PhoneGap)，WebViewJavascriptBridge，那么还需要重复造轮子吗？

• Cordova-ios：本是一个了不起的项目，提供了多个平台，对于 Hybrid App而言，是一个很好的选择；如果您编写的不是 Hybrid App，只想简单集成 bridge 这个功能，Cordova 就显得过于复杂了，不方便集成，另外暂时也没有 Swift 版本。
• WebViewJavascriptBridge：也不错，同时提供了 iOS，android 版本，集成也简单方便。但有以下几点不足：
  • UIWebView/WKWebView：采用的旧式的 iframe 方式来实现，集成相对麻烦
  • 没有提供 Swift 版本

WebViewBridge.Swift 给你提供了另一种可能，与其他相比有以下优点：

• 采用的是 JavaScriptCore，弃用iframe，使用更简单（并非完全弃用iframe，在webViewDidFinishLoad之前可能仍会使用iframe）
• 全 Swift 实现

此外：对于常见的 webview 点击下载图片，实例代码中给出了实现（注意实例代码中，下载缓存图片代码是有 bug 的，可以考虑使用第三方图片库，比如 Kingfisher）

前提：为 WebView 和 html 建立桥

1 给 UIWebView/WKWebView 建立桥

let bridge = ZHWebViewBridge<WKWebView>.bridge(WKWebView())
let bridge = ZHWebViewBridge<UIWebView>.bridge(UIWebView())

2.2之前的版本：使用 ZHWebViewBridge.bridge(UIWebView())

• 注意：对于 UIWebView，需要注意以下几点： * 将 bridge.js 代码复制到您的 html 文件中（对于 UIWebView，如果没有复制，默认行为将修改 UIWebView delegate，然后自动在 webViewDidFinishLoad: 时添加 bridge.js） * 主动调用 bridge.teardown 或 bridge 释放时，将自动恢复 delegate

原生代码与 JS 的相互交互

1, 原生代码调用 js handler

a, 在你的html中或业务 js 中添加 js handler

ZHBridge.Core.registerJsHandler(
          "Device.updateAppVersion",
          function (version) {
            document.getElementById("native-version-container").textContent = version;
            return "js get version: " + version;
          });

• 说明: ZHBridge.Core.registerJsHandler(handlerName, callback)

b, 原生代码调用 js handler

bridge.callJsHandler(
            "Device.updateAppVersion",
            args: ["1.2"],
            callback: { (data:Any?) 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:[Any]) -> (Bool, [Any]?) in
            return (true, ["place_holder.png"])
        }

b, js 调用原生 handler

ZHBridge.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;
                }
              }
            });

• 说明: ZHBridge.Core.callNativeHandler(handlerName, 传递给原生handler的参数数组, 成功回调, 失败回调)

3, 其他

a, 添加其他的插件代码

bridge.addUserPluginScript("your script")   // 插件脚本执行时机: WKWebView document 在 main frame 开始的时候， UIWebview 会 delegate 回调 webViewDidStartLoad(:) 和 webViewDidFinishLoad(:) 均会调用