JSBridge

什么是JSB

• JSBridge 其实就是连接 Native 代码和 JS 代码的通信方式。

JSB的优势

• 既保证了native的高性能体验，又兼顾了热更新、跨端的优势。

webview是什么

首先了解下webView，webView是移动端提供的运行JavaScript的环境，是系统渲染Web网页的一个控件，可与页面JavaScript交互，实现混合开发，其中Android和iOS又有些不同：

Android的WebView采用的是低版本和高版本使用了不同的webkit内核，4.4后直接使用了Chrome。

iOS中UIWebView算是自IOS2就有，但性能较差，特性支持较差，WKWebView是iOS8之后的升级版，性能更强特性支持也较好。

WebView控件除了能加载指定的url外，还可以对URL请求、JavaScript的对话框、加载进度、页面交互进行强大的处理，之后会提到拦截请求、执行JS脚本都依赖于此。

实现方式

js ==> native

1. console.log / alert / confirm 拦截 此类函数常用在js中作特定用途，不适宜用来作为JSB
2. URL schema 拦截
   • URL结构：URL = [scheme:][path][?query][#fragment]
   • 可以看出，schema在URL中位于://之前，用来标识一个APP。https 也是一个schema
   • schema-JSB 原理
   1. JS 发送一个特殊 scheme 的请求
   2. Native 拦截到这个请求，并根据指定好的规则，解析出参数
   3. Native 执行相应的操作
3. api注入
   注入 API 方式的主要原理是，通过 WebView 提供的接口，向 JS 的 Context（window）中注入对象或者方法，JS 调用时，可直接执行相应的 Native 代码逻辑，从而达到 JS 调用 Native 的目的。

native ==> js

Native端调用Web端，只需要将拼接的JavaScript代码字符串，传入webView即可。

安卓

1. loadUrl

webView.loadUrl("javascript:" + JS代码字符串);

2. evaluateJavascript

webView.evaluateJavascript(JS代码字符串, new ValueCallback<String>() { 
    @Override 
    publicvoidonReceiveValue(String value){ } 
});

ios

1. evaluateJavaScript

[wkWebView evaluateJavaScript:JS代码字符串 completionHandler:completionHandler];

重点延伸

schema通信实现方法

原理类似jsonp

1. 首先在H5中注入一个callback方法，放在window对象中
2. 然后把callback的名字通过Url Schema传到Native。Native通过shouldOverrideUrlLoading()，拦截到WebView的请求，并通过与前端约定好的Url Schema判断是否是JSBridge调用。
3. 客户端拦截到请求以后，将返回的数据，塞到 callback 里面并返回
4. 在前端执行callback，得到数据。

js==>native · api注入

1. 通过 webview 原生接口 addJavaScriptInterface 向JavaScript作用域中注入对象/函数
2. 在js中通过window可以查找到并调用该函数，达到了js调用native的目标。