程序员经验分享-hwhale

Android 与 JavaScript 相互调用桥梁 JSBridge

2023-05-16

JSBridge

什么是JSBridge

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

这里写图片描述

流程：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的完整流程可总结为： 
这里写图片描述

设计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页面执行回调方法

这里写图片描述














转载： JSBridge深度剖析

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Android 与 JavaScript 相互调用桥梁 JSBridge 的相关文章

  • 服务器非root下安装Python cyglfw3库

    服务器非root下安装Python cyglfw3库 在服务器中跑PVNet的代码时遇到的 xff0c 废了比较大的劲才解决 xff0c 特意记录一下解决过程 如果你有sudo权限直接使用sudo apt get install libgl

  • FFB6D搭建环境

    文章目录 FFB6D搭建环境搭建前的准备 根据需要选择性浏览 安装apex安装normal speed安装opencv3 安装pybind11安装normal speed 安装RandLA运行代码前的准备运行代码有疑问多多交流 xff0c

  • win32Day06：控件

    1 什么是控件 xff1f 控件是具备特殊功能的窗口 xff0c 并且有模板 控件的特性 xff1a 一定是子窗口 和创建主窗口一样 xff0c 都是使用CreateWindow函数来创建 xff08 控件这种 xff09 子窗口和主窗口的

  • SIFT3D点云关键点提取详细介绍

    1 引言 SIFT3D的理论基础完全是从图像特征SIFT2D中迁移类比过来的 xff0c 类似的还有Harris3D和Harris6D的理论也是来源于Harris2D的 xff0c 这些点云特征在PCL库中都有具体的实现 Harris3D和

  • 【视觉注意力机制集锦】引言

    视觉注意力机制集锦之引言 1 注意力机制 1 1 注意力机制简介 卷积神经网络具有很强的拟合数据的能力 xff0c 但是由于优化算法和计算能力的限制 xff0c 在实践中 xff0c 卷积网络很难达到通用近似的能力 特别是在处理规模较大的输

  • 期刊论文发表一定要有老师吗

    期刊论文发表一定要有老师吗 不一定 xff0c 具体要看论文的情况以及各方面的要求 xff0c 一般研究生和博士生论文很多都有老师 xff0c 本科论文很多是毕业生自己完成即可 xff0c 大多也是可以自己完成的 xff0c 如果要求有老师

  • QT菜单样式Ribbon Control for Qt, Office ribbon control

    基于Qt xff08 最低要求Qt5 xff0c 支持C 43 43 11的编译器 xff09 开发的一个轻量级的Ribbon控件 Office样式UI 使用Qt Creator直接打开SARibbon pro xff0c 并编译即可 xf

  • C/C++：基本语法看这一篇就够了

    前言 本文来自菜鸟教程的C语言教程和C 43 43 教程的学习笔记 xff0c 对其中的示例有所删减与变更 xff0c 建议以以下两个链接为准 虽说C 43 43 是C的扩展 xff0c 但貌似二者存在差集 xff0c 而本文只展示了兼容部

  • Qt之简易版网络调试助手

    简述 qt中为网络编程提供了一个QtNetwork类 xff0c 使用QtNetwork可以实现ftp文件传输 xff0c 基于tcp ip协议的客户端和 xff08 服务端 xff09 开发等等 xff0c 本文基于QtNetwork中的

  • ubuntu18.04安装docker以及过程中遇到的问题

    一 在ubuntu18 04上安装 1 更新索引包和安装相关依赖 xff1a sudo apt update sudo apt install apt span class token operator span transport spa

  • # 解决onos localhost 登陆onos后台时 需要输入密码问题

    登陆后台要求输入密码 xff0c 但尝试各种密码均无法登陆 一般从网上拷贝来的onos安装包 xff0c 使用时容易出现此类问题 xff1a 登录后台时会要求输入密码 xff0c 但一般各种密码都无效 问题解决 onos命名其实是一个she

  • visual c++与visual studio有什么区别

  • 【基于pyAudioKits的Python音频信号处理（八）】语音增强：谱减法、维纳滤波和卡尔曼滤波

    pyAudioKits是基于librosa和其他库的强大Python音频工作流支持 API速查手册 通过pip安装 xff1a pip install pyAudioKits 本项目的GitHub地址 xff0c 如果这个项目帮助到了你 x

  • 3.K8S网络之pod中容器到容器之间的通信

    文章目录 1 引入1 1 创建一个网络名称空间1 2 root网络名称空间1 3 docker网络名称空间 4 pod容器到容器之间的通信通信的原理 1 引入 在Linux中 xff0c 网络命名空间提供了一个逻辑的网络堆栈 xff0c 包

  • C++基础（八）--空指针

    在C和C 43 43 中 xff0c 用0和NULL都可以表示空指针 声明指针之后 xff0c 对指针赋值之前 xff0c 让它指空 xff0c 表示没有指向任何地址 使用空指针的后果 xff08 1 xff09 如果对空指针进行解引用 x

  • 【嵌入式Linux】嵌入式Linux驱动开发基础知识之驱动设计的思想：面向对象/分层/分离

    文章目录 前言1 分离设计驱动程序分析 程序分层通用驱动程序 面向对象个性化驱动程序 分离 APP 程序分析 前言 韦东山嵌入式Linux驱动开发基础知识学习笔记 文章中大多内容来自韦东山老师的文档 xff0c 还有部分个人根据自己需求补充

  • 【飞控理论】四旋翼飞行器控制原理

    该篇博客是对锡月科技无人机飞行控制原理教学内容的整理 1 四旋翼飞行器的两种结构 xff1a 字模式 xff1a Pitch和 Roll与1 3 2 4两组电机呈 45 夹角 十 字模式 xff1a Pitch对应 2 4电机的对轴 xff

  • WEBPACK和ROLLUP构建前端工具库

    1 WEBPACK webpack 提供了构建和打包不同模块化规则的库 xff0c 只是需要自己去搭建开发底层架构 vue cli xff0c 基于 webpack xff0c vue cli 脚手架工具可以快速初始化一个 vue 应用 x

  • 小觅相机自带的SDK改成自动保存点云、图片、和深度图代码

    首先 xff0c 我用的是小觅提供的SDK xff0c 我使用的是WindowsEXE版本的 版本号 xff1a mynteye d 1 8 0 win x64 opencv 3 4 3 exe 不同的版本可能工程名字不一样 https m

  • C语言----模拟ATM机存取款操作

    题目要求 xff1a 输入银行卡密码 xff0c 如果密码正确则显示操作界面 xff0c 循环提示 请输入操作选项 xff0c 其中按1键实现 查询余额 功能 xff0c 按2键实现 取款 功能 xff0c 按3键实现 存款 功能 xff0

随机推荐

热门标签