iOS开发WebViewJavascriptBridge通讯原理解析.docx

第

iOS开发WebViewJavascriptBridge通讯原理解析

目录前言通讯原理JavaScriptCore源码解析代码结构初始化WebViewJavascriptBridge对象native向JS发送消息JS侧native侧JS向native发送消息native侧JS侧总结

前言

H5页面具有跨平台、开发容易、上线不需要跟随App的版本等优点，但H5页面也有体验不如native好、没有native稳定等问题。所以目前大部分App都是使用Hybrid混合开发的。

当然有了H5页面就少不了H5与native交互，交互就会用到bridge的能力了。

WebViewJavascriptBridge是一个native与JS进行消息互通的第三方库，本章会简单解析一下WebViewJavascriptBridge的源码和实现原理。

通讯原理

JavaScriptCore

JavaScriptCore作为iOS的JS引擎为原生编程语言OC、Swift提供调用JS程序的动态能力，还能为JS提供原生能力来弥补前端所缺能力。iOS中与JS通讯使用的是JavaScriptCore库，正是因为JavaScriptCore这种起到的桥梁作用，所以也出现了很多使用JavaScriptCore开发App的框架，比如RN、Weex、小程序、WebviewHybrid等框架。如图：

当然JS引擎不光有苹果的JavaScriptCore，谷歌有V8引擎、Mozilla有SpiderMoney

JavaScriptCore本章只简单介绍，后面主要解析WebViewJavascriptBridge。因为uiwebview已经不再使用了，所以后面提到的webview都是wkwebview，demo也是以wkwebview进行解析。

源码解析

代码结构

除了引擎层外，还需要native、h5和WebViewJavascriptBridge三层才能完成一整个信息通路。WebViewJavascriptBridge就是中间那个负责通信的SDK。

WebViewJavascriptBridge的核心类主要包含几个：

WebViewJavascriptBridge_JS：是一个JS的字符串，作用是JS环境的Bridge初始化和处理。负责接收native发给JS的消息，并且把JS环境的消息发送给native。WKWebViewJavascriptBridge/WebViewJavascriptBridge：主要负责WKWebView和UIWebView相关环境的处理，并且把native环境的消息发送给JS环境。WebViewJavascriptBridgeBase：主要实现了native环境的Bridge初始化和处理。

初始化

WebViewJavascriptBridge是如何完成初始化的呢，首先要有webview容器，所以要对webview容器进行初始化，设置代理，初始化WebViewJavascriptBridge对象，加载URL。

WKWebView*webView=[[NSClassFromString(@WKWebView)alloc]initWithFrame:self.view.bounds];

webView.navigationDelegate=self;

[self.viewaddSubview:webView];

//开启打印

[WebViewJavascriptBridgeenableLogging];

//创建bridge对象

_bridge=[WebViewJavascriptBridgebridgeForWebView:webView];

//设置代理

[_bridgesetWebViewDelegate:self];

这里加载的就是JSBridgeDemoApp这个本地的html文件。

NSString*htmlPath=[[NSBundlemainBundle]pathForResource:@JSBridgeDemoAppofType:@html];

NSString*appHtml=[NSStringstringWithContentsOfFile:htmlPathencoding:NSUTF8StringEncodingerror:nil];

NSURL*baseURL=[NSURLfileURLWithPath:htmlPath];