学习笔记：JSBridge 底层中H5与Native通信原理学习

一、什么是JSBridge

一种基于 JS 实现 Native 和 H5 之间双向通信的桥梁技术，所谓的 ”双向通信“ 指的是允许 JS发送消息给Native，也支持Native发送消息JS。

二、双向通信的基本原理概述

2.1、JS 调用 Native

• 1、URL Scheme拦截（Android 和 iOS 都支持）。
  Android 的话，Webview 提供了 shouldOverrideUrlLoading 方法拦截。
  iOS 的话，WKWebview 代理方法 webView:decidePolicyForNavigationAction:decisionHandler: 拦截。

• 2、注入API方式
  基于 Webview 提供的能力，我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时，执行对应的逻辑操作，可以直接调用 Native 的方法。使用该方式时，JS 需要等到 Native 执行完对应的逻辑后才能进行回调里面的操作。

  Android 的 Webview 提供了 addJavascriptInterface 方法，支持 Android 4.2 及以上系统。
  iOS 的 UIWebview 提供了 JavaScriptScore 方法，支持 iOS 7.0 及以上系统。WKWebview 提供了 window.webkit.messageHandlers 方法，支持 iOS 8.0 及以上系统。

• 3、重写 prompt 等原生 JS 方法
  一般会通过修改浏览器的部分 Window 对象的方法来完成操作。主要是拦截 alert、confirm、prompt、console.log 四个方法。
  Android中分别被 Webview 的 onJsAlert、onJsConfirm、onConsoleMessage、onJsPrompt 监听。
  iOS 由于安全机制， WKWebView 对 alert、confirm、prompt 等方法做了拦截，如果通过此方式进行 Native 与 JS 交互，需要实现 WKWebView 的三个 WKUIDelegate 代理方法。

2.2、Native 调用 JS

Native 调用 JS 比较简单，只要 H5 将 JS 方法暴露在 Window 上给 Native 调用即可。

Android 中主要有两种方式实现。在 4.4 以前，通过 loadUrl 方法，执行一段 JS 代码来实现。在 4.4 以后，可以使用 evaluateJavascript 方法实现。
iOS 在 WKWebview 中可以通过 evaluateJavaScript:javaScriptString 来实现，支持 iOS 8.0 及以上系统。

三、JSBridge的实现原理概述

20180916192724239.png

小白必看，JSBridge 初探
提升海量用户极致体验的 Hybrid 架构设计（原理篇）
JSBridge的原理及使用
撒网要见鱼-Hybrid App基础篇系列文章
撒网要见鱼-Hybrid App系列文章