说明

JSBridge实现原理

目录

• 前言
  • 参考来源
  • 前置技术要求
  • 楔子
• 原理概述
  • 简介
  • url scheme介绍
• 实现流程
  • 实现思路
  • 第一步:设计出一个Native与JS交互的全局桥对象
  • 第二步:JS如何调用Native
  • 第三步:Native如何得知api被调用
  • 第四步:分析url-参数和回调的格式
  • 第五步:Native如何调用JS
  • 第六步:H5中api方法的注册以及格式
• 进一步完善JSBridge方案
  • 思路
  • 实现
  • 注意
• 完整的JSBridge
  • 完整调用流程图
  • 另外实现:不采用url scheme方式
• 实现示例
  • 示例说明
  • 实现源码

前言

参考来源

前人栽树,后台乘凉,本文参考了以下来源

• github-WebViewjava scriptBridge
• JSBridge-Web与Native交互之iOS篇
• Ios Android Hybrid app 与 Js Bridge
• Hybrid APP架构设计思路
• 【Android】如何写一个JsBridge
• IOS之URL Scheme的使用
• marcuswestin/WebViewjava scriptBridge

前置技术要求

阅读本文前，建议先阅读以下文章

• Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理

楔子

上文中简单的介绍了JSBridge,以及为什么要用JSBridge,本文详细介绍它的实现原理

原理概述

简介

JSBridge是Native代码与JS代码的通信桥梁。目前的一种统一方案是:H5触发url scheme->Native捕获url scheme->原生分析,执行->原生调用h5。如下图

url scheme介绍

上图中有提到url scheme这个概念,那这到底是什么呢?

• url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的

  具体为,可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),然后系统会进行判断,如果是系统的url scheme,则打开系统应用,否则找看是否有app注册这种scheme,打开对应app

  需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)

• 而本文JSBridge中的url scheme则是仿照上述的形式的一种方式

  具体为,app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等

实现流程

基于上述的基本原理,现在开始设计一种JSBridge的实现

实现思路

要实现JSBridge,我们可以进行关键步骤分析

• 第一步:设计出一个Native与JS交互的全局桥对象
• 第二步:JS如何调用Native
• 第三步:Native如何得知api被调用
• 第四步:分析url-参数和回调的格式
• 第五步:Native如何调用JS
• 第六步:H5中api方法的注册以及格式

如下图:

第一步:设计出一个Native与JS交互的全局桥对象

我们规定,JS和Native之间的通信必须通过一个H5全局对象JSbridge来实现,该对象有如下特点

• 该对象名为"JSBridge",是H5页面中全局对象window的一个属性

  var JSBridge = window.JSBridge || (window.JSBridge = {});
  					

• 该对象有如下方法
  • registerHandler( String,Function )H5调用 注册本地JS方法,注册后Native可通过JSBridge调用。调用后会将方法注册到本地变量messageHandlers 中
  • callHandler( String,JSON,Function )H5调用 调用原生开放的api,调用后实际上还是本地通过url scheme触发。调用时会将回调id存放到本地变量responseCallbacks中
  • _handleMessageFromNative( JSON )Native调用 原生调用H5页面注册的方法,或者通知H5页面执行回调方法
• 如图

  

第二步:JS如何调用Native

在第一步中,我们定义好了全局桥对象,可以我们是通过它的callHandler方法来调用原生的,那么它内部经历了一个怎么样的过程呢？如下

callHandler函数内部实现过程

在执行callHandler时,内部经历了以下步骤:

• (1)判断是否有回调函数,如果有,生成一个回调函数id,并将id和对应回调添加进入回调函数集合responseCallbacks中
• (2)通过特定的参数转换方法,将传入的数据,方法名一起,拼接成一个url scheme

  //url scheme的格式如
  //基本有用信息就是后面的callbackId,handlerName与data
  //原生捕获到这个scheme后会进行分析
  var uri = CUSTOM_PROTOCOL_SCHEME://API_Name:callbackId/handlerName?data
  					

• (3)使用内部早就创建好的一个隐藏iframe来触发scheme

  //创建隐藏iframe过程
  var messagingIframe = document.createElement('iframe');
  messagingIframe.style.display = 'none';
  document.documentElement.appendChild(messagingIframe);
  
  //触发scheme
  messagingIframe.src = uri;
  					

  注意,正常来说是可以通过window.location.href达到发起网络请求的效果的，但是有一个很严重的问题，就是如果我们连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。所以JS端发起网络请求的时候，需要使用iframe，这样就可以避免这个问题。---引自参考来源

第三步:Native如何得知api被调用

在上一步中,我们已经成功在H5页面中触发scheme,那么Native如何捕获scheme被触发呢？

根据系统不同,Android和iOS分别有自己的处理方式

Android捕获url scheme

在Android中(WebViewClient里),通过shouldoverrideurlloading可以捕获到url scheme的触发

public boolean shouldOverrideUrlLoading(WebView view, String url){
	//读取到url后自行进行分析处理
	
	//如果返回false，则WebView处理链接url，如果返回true，代表WebView根据程序来执行url
	return true;
}
			

另外,Android中也可以不通过iframe.src来触发scheme,