刘文柱

# JSBridge

  • 定义：一座用 javaScript 搭建起来的桥，一端是 web，一端是 native

  • 目的：让 native 可以调用 web 的 javaScript 代码，让 web 可以调用 native 的原生代码

# JSBridge 实现方案

  • 拦截 Scheme

  • 弹窗拦截

  • 注入 JS 上下文

# 拦截 Scheme

TIP

🤔仔细思考一下，如果是 JS 和 Java 之间传递数据，我们该怎么做呢？

对于前端开发来说，调 Ajax 请求接口是最常见的需求了。不管对方是 Java 还是 Python，我们都可以通过 http/https 接口来获取数据。实际上这个流程和 JSONP 更加类似。

😙已知客户端是可以拦截请求的，那么可不可以在这个上面做文章呢？

如果我们请求一个不存在的地址，上面带了一些参数，通过参数告诉客户端我们需要调用的功能呢？

# URL Scheme

  • URL Scheme 是一种特殊的 URL，一般用于在 Web 端唤醒 App，甚至跳转到 App 的某个页面，比如在某个手机网站上付款的时候，可以直接拉起支付宝支付页面。

  • 通常情况下，App 安装后会在手机系统上注册一个 Scheme，比如 weixin:// 这种，所以我们在手机浏览器里面访问这个 scheme 地址，系统就会唤起我们的 App

# 拦截 Scheme

  • hybridschema://hybridapi?callback=id&params=jsonstring

  • 交互的核心是 native 可以拿到 webview 的 window 对象，native 可以拦截 webview 的 http 请求，于是 native 便可以干任何事情了

# 优缺点

  • iOS6 以前只支持这种方式，兼容性比较好

  • 连续续调用 location.href 会出现消息丢失，因为 WebView 限制了连续跳转，会过滤掉后续的请求

  • URL 会有长度限制，一旦过长就会出现信息丢失 因此，类似 WebViewJavaScriptBridge 这类库，就结合了注入 API 的形式一起使用

# 弹窗拦截

  • 这种方式是利用弹窗会触发 WebView 相应事件来拦截的，

  • 一般是在 setWebChromeClient 里面的 onJsAlert、onJsConfirm、onJsPrompt 方法拦截并解析他们传来的消息

  • 这种方式的缺点就是在 iOS 上面 UIWebView 不支持，但是 WKWebView 又有更好的 scriptMessageHandler，比较尴尬。

# 注入上下文

  • 这种方式不依赖拦截，主要是通过 WebView 向 JS 的上下文注入对象和方法，可以让 JS 直接调用原生。

  • 这种方式厉害的地方在于，JS 调用是同步的，可以立马拿到返回值。

  • 我们也不再需要像拦截方式一样，每次传值都要把对象做 JSON.stringify，可以直接传 JSON 过去，也支持直接传一个函数过去。

# 优缺点

  • IOS addScriptMessageHandler
  • 这种方式要求 iOS8 及以上，而且返回不是同步的。和 UIWebView 一样的是，也支持直接传 JSON 对象，不需要 stringify。
  • Android addJavascriptInterface
  • 但这种方案有一定风险可以参考这篇文章： https://blog.csdn.net/jackrex/article/details/11110675

← JSBridge实现篇-安卓 →