从工程实践、容器框架、自渲染、平台体系等角度,解读各种跨端技术更为适用的业务场景>> 了解详情
写点什么

小白必看,JSBridge 初探

  • 2021 年 3 月 18 日
  • 本文字数:4606 字

    阅读完需:约 15 分钟

小白必看,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 对比

nameH5Native
稳定性调用系统浏览器内核,稳定性较差使用原生内核,更加稳定
灵活性版本迭代快,上线灵活迭代慢,需要应用商店审核,上线速度受限制
受网速 影响较大较小
流畅度有时加载慢,给用户“卡顿”的感觉加载速度快,更加流畅
用户体验功能受浏览器限制,体验有时较差原生系统 api 丰富,能实现的功能较多,体验较好
可移植性兼容跨平台跨系统,如 PC 与 移动端,iOS 与 Android可移植性较低,对于 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 请求。代码如下:


publicclass CustomWebViewClient extends WebViewClient {  @Override  public boolean shouldOverrideUrlLoading(WebView view, String url) {  ......    // 场景一:拦截请求、接收 scheme    if (url.equals("xxx")) {
// handle ... // callback view.loadUrl("javascript:setAllContent(" + json + ");") returntrue; } returnsuper.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;  returntrue;}
复制代码


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');publicclass 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 及以上系统。


// swiftfunc 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 时的回调的唯一性等。大家可以去查阅更多资料,参考更详细的相关文档或他人的整理成文的沉淀。



头图:Unsplash

作者:见一

原文:https://mp.weixin.qq.com/s/Tsc52538Se2VumuiszEpnA

原文:小白必看,JSBridge 初探

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 3 月 18 日 00:252075

评论

发布
暂无评论
发现更多内容

还有人搞不懂数据仓库与数据库的区别?

大数据技术指南

数据仓库 4月日更

计算机原理学习笔记 Day8

穿过生命散发芬芳

计算机原理 4月日更

基于crudapi增删改查接口后端Java SDK二次开发之环境搭建(一)

crudapi

Java API sdk crud crudapi

external-provisioner源码分析(1)-主体处理逻辑分析

良凯尔

Kubernetes 源码分析 Ceph CSI

阿里高工熬夜14天码出这份Java10w字的面试手册!却遭GitHub封杀

Java架构之路

Java 程序员 架构 面试 编程语言

数据脱敏:数仓安全隐私保护见真招儿

华为云开发者社区

数据仓库 加密 隐私保护 GaussDB(DWS) 数据脱敏

堪称神作!阿里数位专家联合写的“大厂高频Java面试手册”

码农之家

Java 编程 程序员 互联网 面试

Spring Bean创建过程的Hook

邱学喆

BeanPostProcessor @Autowired注入原理 @Resource注入原理 @Value注入原理

2021互联网大厂高频面试专题500道:并发编程/Spring/MyBatis(附答案解析)

比伯

Java 编程 架构 程序人生 计算机

第 0 期架构训练营模块 2 作业

架构实战营

架构师实战营 模块二作业(微信朋友圈高性能复杂度架构分析)

代廉洁

架构实战营

阿里高工熬夜18天码出Java150K字面试宝典,却遭Github全面封杀

Java架构之路

Java 程序员 架构 面试 编程语言

k8s通过ceph-csi接入存储的概要分析

良凯尔

Kubernetes 源码分析 Ceph CSI

第十一周总结

MySQL存储过程的异常处理

Sakura

4月日更

Anolis OS 8.2 RC2 发行,支持飞腾、海光、兆芯、鲲鹏等芯片

阿里云基础软件团队

Impala架构详解

五分钟学大数据

4月日更 impala

程序员3年CRUD从8K涨到20K,这4个月我到底经历了什么?

码农之家

编程 程序员 互联网 面试 职场

external-provisioner源码分析(2)-main方法与Leader选举分析

良凯尔

Kubernetes 源码分析 Ceph CSI

技术实践丨列存表并发更新时的锁等待问题原理

华为云开发者社区

事务 update 元组 列存表

阿里P8重磅总结:看完别说不会了哦,SpringBoot「完结篇」

比伯

Java 编程 程序人生 计算机 架构】

Github霸榜数月!原来是阿里大牛最新的Java性能优化实战笔记

钟奕礼

Java 编程 程序员 架构 面试

这才是大数据的正确打开方式

华为云开发者社区

大数据 数据仓库 云原生 数据治理 灾备

架构实战营 模块二作业

fazinter

架构实战营

为极客时间增加自动提醒功能,督促用户回来上课

克比

MySQL 索引概要

学个球

MySQL 索引

阿里P8整理出SQL笔记:收获不止SOL优化抓住SQL的本质

Java架构之路

Java 程序员 架构 面试 编程语言

边缘计算是流行词还是风口?开发者怎样选开源项目?

华为云开发者社区

开源 开发者 5G 边缘计算 EdgeGallery 社区

探索区块链Baas平台的奥秘,源中瑞公共服务平台开发技术

源中瑞-龙先生

区块链 源中瑞 Baas

external-provisioner源码分析(3)-组件启动参数分析

良凯尔

Kubernetes 源码分析 Ceph CSI

kubernetes ceph-csi分析-目录导航

良凯尔

Kubernetes 源码分析 Ceph CSI Kubernetes Plugin

WebRTC 技术应用拓展实践线上专题会

WebRTC 技术应用拓展实践线上专题会

小白必看,JSBridge 初探-InfoQ