什么是 JS Bridge?
JS Bridge,即JavaScript Bridge,是一种在不同环境或者平台之间进行通信的技术,尤其是在Web视图(如WebView)中嵌入的JavaScript与宿主应用(通常是移动应用)之间的通信桥梁。通过JS Bridge,可以使得原生应用可以调用JavaScript代码,JavaScript代码也能调用原生应用的API,从而实现混合开发,充分利用原生应用的性能优势与Web技术的灵活性。
JSB 有哪些实现方式?
实现JS Bridge的方式通常取决于所使用的平台和具体的需求,以下是一些常见的实现方式:
- URL Scheme:
这是一种较为简单的实现方式。原生应用可以通过拦截WebView中的URL跳转请求来实现与JavaScript的通信。当JavaScript需要与原生应用通信时,它会尝试跳转到一个特殊的URL(如
myscheme://someaction?param1=value1
),原生应用拦截这个URL请求,并解析出相应的行为和参数,然后执行相应的原生代码。 - 注入API对象: 通过原生代码将一些对象或者方法注入到WebView中的JavaScript环境里。Injected API可以直接在JavaScript代码中被调用,从而实现JavaScript对原生功能的调用。这种方式可以提供更加丰富和直接的接口给JavaScript。
- 消息通道(如postMessage):
现代的Web视图组件(如iOS中的WKWebView)支持使用类似于HTML5中定义的
postMessage
API的消息通道,可以实现双向通信。JavaScript可以通过这个API发送消息给原生代码,并且原生代码也可以返回消息给JavaScript。 - Native Modules: 在一些JavaScript框架中,如React Native,可以创建特定的Native Modules来扩展原生应用的功能。这些模块可以被JavaScript代码直接调用,原生代码也可以向JavaScript环境发送事件。
示例:
假设我们需要实现一个简单的功能,让WebView中的JavaScript能够打开原生应用的摄像头并拍照。使用URL Scheme的方式实现可能如下:
在JavaScript中,你可能会有这样的调用代码:
javascriptfunction openNativeCamera() { window.location.href = 'myapp://camera/open'; }
在原生应用中(以iOS为例),你可能需要实现如下的拦截逻辑:
objective- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSURL *URL = [request URL]; if ([[URL scheme] isEqualToString:@"myapp"]) { if ([[URL host] isEqualToString:@"camera"] && [[URL path] isEqualToString:@"/open"]) { // 调用原生摄像头的代码 [self openCamera]; return NO; } } return YES; } - (void)openCamera { // 打开摄像头的逻辑 }
以上示例展示了如何通过URL Scheme拦截WebView中的跳转来调用原生功能。其他实现方式会有不同的代码示例,但核心思想都是建立一个通信通道,让JavaScript与原生代码能够互相调用。