返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript之JSBridge初探
  • 854
分享到

Javascript之JSBridge初探

2024-04-02 19:04:59 854人浏览 泡泡鱼
摘要

目录jsBridge 的起源JSBridge 的双向通信原理JS 调用 NativeNative 调用 JSJSBridge 的使用总结JSBridge 的起源 近些年,移动端普及化

JSBridge 的起源

近些年,移动端普及化越来越高,开发过程中选用 Native 还是 H5 一直是热门话题。Native 和 H5 都有着各自的优缺点,为了满足业务的需要,公司实际项目的开发过程中往往会融合两者进行 Hybrid 开发。Native 和 H5 分处两地,看起来无法联系,那么如何才能让双方协同实现功能呢?

这时我们想到了 Codova ,Codova 提供了一组与设备相关的 api ,是早期js调用原生代码来实现原生功能的常用方案。不过 JSBridge 真正在国内广泛应用是由于移动互联网的盛行。

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

H5 与 Native 对比

name H5 Native
稳定性 调用系统浏览器内核,稳定性较差 使用原生内核,更加稳定
灵活性 版本迭代快,上线灵活 迭代慢,需要应用商店审核,上线速度受限制
受网速 影响 较大 较小
流畅度 有时加载慢,给用户“卡顿”的感觉 加载速度快,更加流畅
用户体验 功能受浏览器限制,体验有时较差 原生系统 api 丰富,能实现的功能较多,体验较好
可移植性 兼容跨平台跨系统,如 PC 与 移动端,iOSAndroid 可移植性较低,对于 ioS 和 Android 需要维护两套代码

JSBridge 的双向通信原理

JS 调用 Native

JS 调用 Native 的实现方式较多,主要有拦截URL Scheme、重写 prompt 、注入 API 等方法。

拦截 URL Scheme

Android 和 iOS 都可以通过拦截 URL Scheme 并解析 Scheme 来决定是否进行对应的 Native 代码逻辑处理。

Android 的话,WEBview提供了shouldOverrideUrlLoading方法来提供给 Native 拦截 H5 发送的URL Scheme请求。代码如下:


public class CustomWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
      ......
      // 场景一: 拦截请求、接收 scheme
        if (url.equals("xxx")) {

            // handle
            ...
            // callback
            view.loadUrl("javascript:setAllContent(" + JSON + ");")
            return true;
        }
        return super.shouldOverrideUrlLoading(url);
     }
}

iOS 的WKWebview可以根据拦截到的URL Scheme和对应的参数执行相关的操作。代码如下:


- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    if ([navigationAction.request.URL.absoluteString hasPrefix:@"xxx"]) {
        [[UIApplication sharedApplication] openURL:navigationAction.request.URL];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

这种方法的优点是不存在漏洞问题、使用灵活,可以实现 H5 和 Native 页面的无缝切换。例如在某一页面需要快速上线的情况下,先开发出 H5 页面。某一链接填写的是 H5 链接,在对应的 Native 页面开发完成前先跳转至 H5 页面,待 Native 页面开发完后再进行拦截,跳转至 Native 页面,此时 H5 的链接无需进行修改。但是使用 iframe.src 来发送URL Scheme需要对 URL 的长度作控制,使用复杂,速度较慢。

重写 prompt 等原生 JS 方法

Android 4.2 之前注入对象的接口是 addJavaScriptInterface ,但是由于安全原因慢慢不被使用。一般会通过修改浏览器的部分 Window 对象的方法来完成操作。主要是拦截 alert、confirm、prompt、console.log 四个方法,分别被Webview的 onJsAlert、onJsConfirm、onConsoleMessage、onJsPrompt 监听。其中 onJsPrompt 监听的代码如下:


public boolean onJsPrompt(WebView view, String origin, String message, String defaultValue, final JsPromptResult result) {
  String handledRet = parentEngine.bridge.promptOnJsPrompt(origin, message,defaultValue);
  xxx;
  return true;
}

iOS 由于安全机制,WKWebView对 alert、confirm、prompt 等方法做了拦截,如果通过此方式进行 Native 与 JS 交互,需要实现WKWebView的三个WKUIDelegate代理方法。代码示例如下:


-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

  UIAlertController *alertController = [UIAlertController                    alertControllerWithTitle:nil message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];

  [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

      completionHandler();

  }])];

  [self presentViewController:alertController animated:YES completion:nil];

}

使用该方式时,可以与 Android 和 iOS 约定好使用传参的格式,这样 H5 可以无需识别客户端,传入不同参数直接调用 Native 即可。剩下的交给客户端自己去拦截相同的方法,识别相同的参数,进行自己的处理逻辑即可实现多端表现一致。如:


alert("确定xxx?", "取消", "确定", callback());

另外,如果能与 Native 确定好方法名、传参等调用的协议规范,这样其它格式的 prompt 等方法是不会被识别的,能起到隔离的作用。

##### 注入 API

基于Webview提供的能力,我们可以向 Window 上注入对象或方法。JS 通过这个对象或方法进行调用时,执行对应的逻辑操作,可以直接调用 Native 的方法。使用该方式时,JS 需要等到 Native 执行完对应的逻辑后才能进行回调里面的操作。

Android 的Webview提供了 addJavascriptInterface 方法,支持 Android 4.2 及以上系统。


gpcWebView.addJavascriptInterface(new JavaScriptInterface(), 'nativeApiBridge'); 
public class JavaScriptInterface {
    Context mContext;

  JavaScriptInterface(Context c) {
    mContext = c;
  }

  public void share(String webMessage){            
    // Native 逻辑
  }
}

JS 调用示例:


window.NativeApi.share(xxx);

iOS 的UIWebview提供了 JavaScriptScore 方法,支持 iOS 7.0 及以上系统。WKWebview提供了 window.webkit.messageHandlers 方法,支持 iOS 8.0 及以上系统。UIWebview在几年前常用,目前已不常见。以下为创建WKWebViewConfiguration和 创建 WKWebView 示例:


WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenwindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;
    

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"share"];
      [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"pickImage"];
}
- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [self.webView.configuration.userContentController     removeScriptMessageHandlerForName:@"share"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"pickImage"];
}

JS 调用示例:


window.webkit.messageHandlers.share.postMessage(xxx);

Native 调用 JS

Native 调用 JS 比较简单,只要 H5 将 JS 方法暴露在 Window 上给 Native 调用即可。

Android 中主要有两种方式实现。在 4.4 以前,通过 loadUrl 方法,执行一段 JS 代码来实现。在 4.4 以后,可以使用 evaluateJavascript 方法实现。loadUrl 方法使用起来方便简洁,但是效率低无法获得返回结果且调用的时候会刷新 WebView。evaluateJavascript 方法效率高获取返回值方便,调用时候不刷新WebView,但是只支持 Android 4.4+。相关代码如下:


webView.loadUrl("javascript:" + javaScriptString);
webView.evaluateJavascript(javaScriptString, new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value){
    xxx
  }
});

iOS 在WKWebview中可以通过 evaluateJavaScript:javaScriptString 来实现,支持 iOS 8.0 及以上系统。


// swift
func evaluateJavaScript(_ javaScriptString: String, 
    completionHandler: ((Any?, Error?) -> Void)? = nil)
// javaScriptString 需要调用的 JS 代码
// completionHandler 执行后的回调
// objective-c
[jsContext evaluateJavaScript:@"ZcyJsBridge(ev, data)"]

JSBridge 的使用

如何引用

  • 由 H5 引用 在我司移动端初期版本时采用的是该方式,采用本地引入npm包的方式进行调用。这种方式可以确定 JSBridge 是存在的,可直接调用 Native 方法。但是如果后期 Bridge 的实现方式改变,双方需要做更多的兼容,维护成本高
  • 由 Native 注入 这是当前我司移动端选用的方式。在考虑到后期业务需要的情况下,进行了重新设计,选用 Native 注入的方式来引用 JSBridge。这样有利于保持 API 与 Native 的一致性,但是缺点是在 Native 注入的方法和时机都受限,JS 调用 Native 之前需要先判断 JSBridge 是否注入成功

使用规范

H5 调用 Native 方法的伪代码实例,如:


params = {
  api_version: "xxx",    // API 版本
  title: "xxx",    // 标题
  filename: "xxx",    // 文件名称
  image: "xxx",    // 图片链接
  url: "xxx",    // 网址链接
  success: function (res) {
    xxx;    // 调用成功后执行
  },
  fail: function (err) {
    if (err.code == '-2') {
      fail && fail(err);    //    调用了当前客户端中不存在的 API 版本
    } else {
      const msg = err.msg;    //异常信息
      Toast.fail(msg);
    }
  }
};
window.NativeApi.share(params);

以下简要列出通用方法的抽象,目前基本遵循以下规范进行双端通信。


window.NativeApi.xxx({
    api_version:'',
    name: "xxx",
    path: "xxx",
    id:    "xxx",
    success: function (res) {
      console.log(res);
    },
    fail: function (err) {
      console.log(err);
    }
});

由于初期版本选择了由 H5 本地引用 JSBridge,后期采用 Native 注入的方式。现有的 H5 需要对各种情况做兼容,逻辑抽象如下:


reqNativeBridge(vm, fn) {
  if (!isApp()) {
    // 如果不在 APP 内进行调用
    vm.$dialog.alert({
      message: "此功能需要访问 APP 才能使用",
    });
  } else {
    if (!window.NativeApi) {
      // 针对初期版本
      vm.$dialog.alert({
        message: "请更新到最新 APP 使用该功能",
      });
    } else {
      // 此处只针对“调用了当前客户端中不存在的 API 版本”的报错进行处理
      // 其余种类的错误信息交由具体的业务去处理
      fn && fn((err) => {
        vm.$dialog.alert({
          message: "请更新到最新 APP 使用该功能",
        });
      });
    }
  }
}

总结

上述内容简要介绍了 JSBridge 的部分原理,希望对从未了解过 JSBridge 的同学能有所帮助。如果需要更深入的了解 JSBridge 的原理和实现,如 JSBridge 接口调用的封装实现,JS 调用 Native 时的回调的唯一性等。大家可以去查阅更多资料,参考更详细的相关文档或他人的整理成文的沉淀。

以上就是Javascript之JSBridge初探的详细内容,更多关于Javascript之JSBridge的资料请关注编程网其它相关文章!

--结束END--

本文标题: Javascript之JSBridge初探

本文链接: https://lsjlt.com/news/124993.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Javascript之JSBridge初探
    目录JSBridge 的起源JSBridge 的双向通信原理JS 调用 NativeNative 调用 JSJSBridge 的使用总结JSBridge 的起源 近些年,移动端普及化...
    99+
    2024-04-02
  • 进阶之初探nodeJS
    一、前言 在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器。 今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门nod...
    99+
    2022-06-04
    进阶 nodeJS
  • python之初探编程
        接触python语言完全是个偶然。那时候还在一所培训学校里学习网络和系统,和朋友一起去图书馆淘书,转遍了整个楼层,只是找到了一两本感兴趣的计算机方面的书,朋友选的很快,开始催我回去了,真是纠结,拿着借阅卡一次可以借5本,图书馆也挺远...
    99+
    2023-01-31
    python
  • Golang初探:探索之路开始
    【Golang简介:一切从这里开始】 Golang,也被称为Go语言,是一种由Google开发的开源编程语言。自2007年开始设计,2009年正式发布,Golang以其出色的性能、简洁...
    99+
    2024-02-24
    golang 简介 开始 go语言 网络编程 在线课程 垃圾回收器 golang开发 标准库
  • 初探Java之旅:探寻Java的奥秘
    ✨个人主页:全栈程序猿的CSDN博客 💨系列专栏:Java从入门到精通 ✌座右铭:编码如诗,Bug似流星,持续追求优雅的代码,解决问题如同星辰般自如 在计算机编程的世界中,有一门被誉为“千变万化”的编程语言——Jav...
    99+
    2023-12-23
    java
  • Python 命令行之旅 —— 初探
    『讲解开源项目系列』启动——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章,你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎联系我们给我们投稿,让更多人爱上开源、贡献开源~ 前言 你是否好奇过在命令行中...
    99+
    2023-01-31
    之旅 命令行 Python
  • python3爬虫初探(六)之EXCEL
     在爬取数据之后,数据的保存就成为一个新的问题,一般不太大的的数据存储到EXCEL就可以了。这里介绍一个python的第三方库——xlsxwriter. 这个库的安装就不介绍了,pip就可以,不用FQ。这里仅介绍一些简单常用的命令。  首...
    99+
    2023-01-31
    爬虫 EXCEL
  • Python探索之Metaclass初步了解
    先以一个大牛的一段关于Python Metapgramming的著名的话来做开头: Metaclasses are deeper magic than 99% of users should ever w...
    99+
    2022-06-05
    Python Metaclass
  • 数据库之增删改查初探
    插入数据:insert into 表名(列名1,列名2.........)values (值1,值2)如果插入多条数据则insert into 表名(列名1,列名2.........)values (值1,...
    99+
    2024-04-02
  • PostgreSQL 初探
    2020 年 2月的总排名为第四名,关系型数据库中排名第四名。排名信息参考:DB-Engines 为了更好地应用的工作中,针对 PostgreSQL 给我造成的疑惑整理了如下内容: (1) PostgreSQL 版本之间的...
    99+
    2019-11-15
    PostgreSQL 初探
  • 初探nodeJS
    一、node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它。 nodeJS是个啥东东? nodeJS,我的理解就是可以运行在后端的JavaScript。 为什么它能够在...
    99+
    2022-06-04
    nodeJS
  • Redis初探
       大概在2010年的时候,有一次和一个同事聊天,那个时候知道了Redis,对于技术的追随至今,还没有下载一个Redis版本玩玩,   只有1万多行代码,以性能惊人...
    99+
    2024-04-02
  • selenium 初探
    1 # -*- coding:utf-8 -*- 2 3 from selenium import webdriver 4 driver = webdriver.Firefox() # 打开firefox浏览器 5 driver.g...
    99+
    2023-01-30
    selenium
  • Python 初探
     按照计划,今年要学习一门面向对象的语言,学习的范围锁定几门,PHP/PERL/PYTHON/RUBY,由于上半年学了bash,感觉python比较适合自己。从今天开始不定期的出一些笔记出来 #! /usr/bin/python   ID...
    99+
    2023-01-31
    Python
  • AS3初探
    开发工具:FLEX BUILDER3 PRO   语言:AS 3.0   操作系统:Windows XP SP2   1.       在flex3 里新建一个AS工程取名为lo...
    99+
    2023-01-31
  • flutter开发实战-实现webview与Javascript通信JSBridge
    flutter开发实战-实现webview与H5中Javascript通信JSBridge 在开发中,使用到webview,flutter实现webview是使用原生的插件实现,常用的有webview_flutter与flutter_ina...
    99+
    2023-08-18
    flutter html javascript webview jsbridge
  • 学习Android开发之RecyclerView使用初探
    在进行一些MaterialDesign规范开发的时候,比如之前说到的CoordinateLayout实现的向上折叠效果的时候,如果依然使用ListView,那么这种效果是做不出...
    99+
    2022-06-06
    recyclerview android开发 Android
  • redis初探之主从与哨兵部署
    一、单机版radis部署 1、安装gcc yum install gcc 2、安装redis tar -zxvf redis-3.2.9.tar.gz -C /usr/src/ cd /usr/src/re...
    99+
    2024-04-02
  • Android Context初探
    1.背景 作为一个Android新手,每次看到使用Context作为参数时,都有点焦虑,有时候传this就可以,有时候又不行,不知道为什么可以,...
    99+
    2022-06-06
    context Android
  • Oracle Wallet初探
    Oracle Wallet初探1.  什么是WalletA datastructure used to store and manage security credentials for...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作