首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

WebView与native交互-WebViewBridge.S

2024-12-20 来源:化拓教育网

缘由闲扯

简介

  • 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和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的参数数组, 成功回调, 失败回调)
显示全文