WebView（四）—— JSBridge原理

最新推荐文章于 2024-08-16 09:00:37 发布

橙子19911016

最新推荐文章于 2024-08-16 09:00:37 发布

阅读量1.9k

点赞数

文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/xingyu19911016/article/details/121339597

版权

`JSBridge`原理

JSBridge很早就出现在软件开发中，在一些桌面软件中很早就运用了这样的形式，多用在通知、产品详情、广告等模块中，然后这些模块中，使用的是Web UI，而相关按钮点击后，调用的是Native功能。现在移动端盛行，不管是Hybrid应用，还是React-Native都离不开JSBridge，当然也包括在国内举足轻重的微信小程序。

bridge [brɪdʒ] 桥；桥牌

JsBridge

1 `JSBridge`的起源

主要的原因还是因为JavaScript主要载体Web是当前世界上的最易编写、最易维护、最易部署的UI构建方式。工程师可以用很简单的 HTML标签和CSS样式快速的构建出一个页面，并且在服务端部署后，用户不需要主动更新，就能看到最新的UI展现。

开发维护成本和更新成本较低的Web技术成为混合开发中几乎不二的选择，而作为Web技术逻辑核心的JavaScript也理所应当肩负起与其他技术『桥接』的职责，并且作为移动不可缺少的一部分，任何一个移动操作系统中都包含可运行JavaScript的容器，例如WebView 和JSCore。所以，运行JavaScript不用像运行其他语言时，要额外添加运行环境。因此，基于上面种种原因，JSBridge应运而生。

移动端混合开发中的JSBridge，主要被应用在两种形式的技术方案上：

基于Web的Hybrid解决方案：例如微信浏览器、各公司的Hybrid方案
非基于Web UI但业务逻辑基于JavaScript的解决方案：例如React-Native

微信小程序基于Web UI，但是为了追求运行效率，对UI展现逻辑和业务逻辑的JavaScript进行了隔离。因此小程序的技术方案介于上面描述的两种方式之间。

2 `JSBridge`的用途

JSBridge就像其名称中的Bridge的意义一样，是Native和非Native之间的桥梁，它的核心是构建Native和非Native间消息通信的通道，而且是双向通信的通道。简单来讲，主要是给JavaScript提供调用Native功能的接口，让混合开发中的前端部分可以方便地使用地址位置、摄像头甚至支付等Native功能。

双向通信的通道：

JS向Native发送消息：调用相关功能、通知Native当前JS的相关状态等。
Native向JS发送消息：回溯调用结果、消息推送、通知JS当前Native的状态等。

3 `JSBridge`的实现原理

JavaScript是运行在一个单独的JS Context中（例如，WebView的Webkit引擎、JSCore）。由于这些Context与原生运行环境的天然隔离，我们可以将这种情况与RPC（Remote Procedure Call，远程过程调用）通信进行类比，将Native与JavaScript的每次互相调用看做一次RPC调用。

remote [rɪˈmoʊt] 边远的 procedure [prəˈsiːdʒər] 手续，步骤

在JSBridge的设计中，可以把前端看做RPC的客户端，把Native端看做RPC的服务器端，从而JSBridge要实现的主要逻辑就出现了：通信调用（Native与JS通信）和句柄解析调用。

4 `JSBridge`的通信原理

4.1 `JavaScript`调用`Native`

JavaScript调用Native的方式，主要有两种：注入API和拦截URL SCHEME。

4.1.1 注入`API`

注入API方式的主要原理是，通过WebView提供的接口，向JavaScript的Context（window）中注入对象或者方法，让JavaScript调用时，直接执行相应Native代码逻辑，达到JavaScript调用Native的目的。

https://blog.csdn.net/xingyu19911016/article/details/121293421 2.1相关内容

在Android 4.2之前，Android注入JavaScript对象的接口是addJavascriptInterface，但是这个接口有漏洞，可以被不法分子利用，危害用户的安全，因此在Android 4.2中引入新的接口@JavascriptInterface（上面代码中使用的）来替代这个接口，解决安全问题。所以Android注入对对象的方式是有兼容性问题的。

4.1.2 拦截`URL SCHEME`

URL SCHEME是一种类似于url的链接，是为了方便APP直接互相调用设计的，形式和普通的url近似，主要区别是protocol和host一般是自定义的，例如：qunarhy://hy/url?url=ymfe.tech，protocol是qunarhy，host则是hy。

拦截URL SCHEME的主要流程是：Web端通过某种方式（例如iframe.src）发送URL SCHEME请求，通过shouldOverrideUrlLoading来拦截约定规则的url

https://blog.csdn.net/xingyu19911016/article/details/121293421 2.2相关内容

在时间过程中，这种方式有一定的缺陷：