Android 与 JavaScript 相互调用桥梁 JSBridge

喜欢ヅ旅行 2022-06-18 00:40 354阅读 0赞

# JSBridge #

## 什么是JSBridge ##

JSBridge：听其取名就是js和Native之前的桥梁，而实际上JSBridge确实是JS和Native之前的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只通过固定的桥对象调用Native。JSBridge另一个叫法及大家熟知的Hybrid app技术。

![这里写图片描述][SouthEast]

流程：H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回调。

我们前面讲过了原生的WebView/UIWebView控件已经能够和Js实现数据通信了，那为什么还要JSBridge呢？   
其实使用JSBridge有很多方面的考虑：

*  Android4.2以下,addJavascriptInterface方式有安全漏掉
 *  iOS7以下,JS无法调用Native
 *  url scheme交互方式是一套现有的成熟方案,可以完美兼容各种版本，对以前老版本技术的兼容。

## url scheme ##

url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的。具体来讲如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app。   
注：这种scheme必须原生app注册后才会生效。

而在我们实际的开发中，app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法。

# JSBridge技术实现 #

要实现JSBridge,我们需要按以下步骤分析：

*  第一步:设计出一个Native与JS交互的全局桥对象
 *  第二步:JS如何调用Native
 *  第三步:Native如何得知api被调用
 *  第四步:分析url-参数和回调的格式
 *  第五步:Native如何调用JS
 *  第六步:H5中api方法的注册以及格式

JSBridge的完整流程可总结为：   
![这里写图片描述][SouthEast 1]

## 设计Native与JS交互的全局桥对象 ##

我们规定,JS和Native之间的通信必须通过一个H5全局对象JSbridge来实现。该对象有如下特点：   
该对象名为”JSBridge”，是H5页面中全局对象window的一个属性，形如：

var JSBridge = window.JSBridge || (window.JSBridge = {});
     
      
       1
      
     
      
       1

该对象有如下方法：

*  registerHandler( String,Function )H5调用注册本地JS方法,注册后Native可通过JSBridge调用。调用后会将方法注册到本地变量messageHandlers 中。
 *  callHandler( String,JSON,Function )H5调用 调用原生开放的api,调用后实际上还是本地通过url scheme触发。调用时会将回调id存放到本地变量responseCallbacks中
 *  \_handleMessageFromNative( JSON )Native调用 原生调用H5页面注册的方法,或者通知H5页面执行回调方法

![这里写图片描述][SouthEast 2]

转载： [JSBridge深度剖析][JSBridge]

[SouthEast]: /images/20220618/262d2b24e55a471c8a6211cf1ae8e50f.png
[SouthEast 1]: /images/20220618/34bd8f2dca5c4ba8b2ac525fad51fd67.png
[SouthEast 2]: /images/20220618/dea4190fc0ff4d17bdea8b0664f50e93.png
[JSBridge]: http://blog.csdn.net/xiangzhihong8/article/details/66970600