文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章了解 JsBridge

2024-12-10 15:32

关注

、jsbridge 定义

JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS,JS 调用 Native ,是双向通信的通道。JSBridge 主要提供了 JS 调用 Native 代码的能力,实现原生功能如查看本地相册、打开摄像头、指纹支付等。


二、JSBridge 用途

JSBridge 就像其名称中的『Bridge』的意义一样,是 Native 和非 Native 之间的桥梁,它的核心是 构建 Native 和非 Native 间消息通信的通道,而且是 双向通信的通道。

双向通信的通道:

1) JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。

2) Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

H5与Native交互如下图: 

三、JSBridge 的实现原理

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

 

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


四、JSBridge 的通信原理

一、JavaScript 调用 Native的方式

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

1、注入API

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

对于 iOS 的 UIWebView,实例如下:

  1. JSContext *context = [uiWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; 
  2. context[@"postBridgeMessage"] = ^(NSArray *calls) { 
  3. // Native 逻辑 
  4. }; 
  5. 前端调用方式: 
  6. window.postBridgeMessage(message); 

2、拦截 URL SCHEME

先解释一下 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 请求,之后 Native 拦截到请求并根据 URL SCHEME(包括所带的参数)进行相关操作。

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

1) 使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。

2) 创建请求,需要一定的耗时,比注入 API 的方式调用同样的功能,耗时会较长。

因此:JavaScript 调用 Native 推荐使用注入 API 的方式


二、Native 调用 JavaScript 的方式

相比于 JavaScript 调用 Native, Native 调用 JavaScript 较为简单,直接执行拼接好的 JavaScript 代码即可。

从外部调用 JavaScript 中的方法,因此 JavaScript 的方法必须在全局的 window 上。

对于 iOS 的 UIWebView,示例如下:

  1. result = [uiWebview stringByEvaluatingJavaScriptFromString:javaScriptString]; 
  2. * javaScriptString为JavaScript 代码串 

对于 iOS 的 WKWebView,示例如下:

  1. [wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler]; 

三、通信原理总结

通信原理是 JSBridge 实现的核心

1)JavaScript 调用 Native 推荐使用 注入 API 的方式(iOS6 忽略,Android 4.2以下使用 WebViewClient 的 onJsPrompt 方式)。

2)Native 调用 JavaScript 则直接执行拼接好的 JavaScript 代码即可。


四、JSBridge 接口实现

JSBridge 的接口主要功能有两个:调用 Native(给 Native 发消息) 和 被 Native 调用(接收 Native 消息)。因此,JSBridge 可以设计如下:

  1. window.JSBridge = { 
  2.   // 调用 Native 
  3.   invoke: function(msg) { 
  4.     // 判断环境,获取不同的 nativeBridge 
  5.     nativeBridge.postMessage(msg); 
  6.   }, 
  7.   receiveMessage: function(msg) { 
  8.     // 处理 msg 
  9.   } 
  10. }; 

在上面的文章中,提到过 RPC 中有一个非常重要的环节是 句柄解析调用 ,这点在 JSBridge 中体现为 句柄与功能对应关系。同时,我们将句柄抽象为 桥名(BridgeName),最终演化为 一个 BridgeName 对应一个 Native 功能或者一类 Native 消息。基于此点,JSBridge 的实现可以优化为如下:

  1. window.JSBridge = { 
  2.   // 调用 Native 
  3.   invoke: function(bridgeName, data) { 
  4.   // 判断环境,获取不同的 nativeBridge 
  5.     nativeBridge.postMessage({ 
  6.       bridgeName: bridgeName, 
  7.       data: data || {} 
  8.     }); 
  9.   }, 
  10.   receiveMessage: function(msg) { 
  11.     var bridgeName = msg.bridgeName, 
  12.     data = msg.data || {}; 
  13.   // 具体逻辑 
  14.   } 
  15. }; 

对于 JSBridge 的 Callback ,其实就是 RPC 框架的回调机制。当然也可以用更简单的 JSONP 机制解释:

当发送 JSONP 请求时,url 参数里会有 callback 参数,其值是 当前页面唯一 的,而同时以此参数值为 key 将回调函数存到 window 上,随后,服务器返回 script 中,也会以此参数值作为句柄,调用相应的回调函数。

整体流程:

在 Native 端配合实现 JSBridge 的 JavaScript 调用 Native 逻辑也很简单,主要的代码逻辑是:接收到 JavaScript 消息 => 解析参数,拿到 bridgeName、data 和 callbackId => 根据 bridgeName 找到功能方法,以 data 为参数执行 => 执行返回值和 callbackId 一起回传前端。

Native调用 JavaScript 也同样简单,直接自动生成一个唯一的 ResponseId,并存储句柄,然后和 data 一起发送给前端即可。

 

五、JSBridge 如何引用

对于 JSBridge 的引用,常用有两种方式,各有利弊。

 

1) 由 Native 端进行注入

注入方式和 Native 调用 JavaScript 类似,直接执行桥的全部代码。

优点:桥的版本很容易与 Native 保持一致,Native 端不用对不同版本的 JSBridge 进行兼容;与此同时,

缺点:注入时机不确定,需要实现注入失败后重试的机制,保证注入的成功率,同时 JavaScript 端在调用接口时,需要优先判断 JSBridge 是否已经注入成功。


2) 由 JavaScript 端引用

直接与 JavaScript 一起执行。与由 Native 端注入正好相反。

优点:JavaScript 端可以确定 JSBridge 的存在,直接调用即可;

缺点:如果桥的实现方式有更改,JSBridge 需要兼容多版本的 Native Bridge 或者 Native Bridge 兼容多版本的 JSBridge。

 

 

来源:前端学苑内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯