iOS Native与JS通信：JSBridge

一、简介

对于移动应用程序的开发，有多种技术选型，最基础的是原生开发，后面由于动态化和跨平台的需求，引入了跨端的方案，比如H5、RN。以原生+H5 混合开发模式为例，H5页面经常需要使用到Native端的功能，比如打开二维码扫描、调用本地相册、获取用户信息等，同时Native端也需要向H5页面发送消息、更新状态等。所以需要一种通信机制，来让两端进行通信。这时候就引入了桥（Bridge）的概念。

JSBridge（JavaScript Bridge）是一种设计模式，用于在JavaScript和原生代码（如iOS的Objective-C/Swift或Android的Java/Kotlin）之间建立通信桥梁。通过JSBridge，Web页面中的JavaScript代码可以调用原生功能，原生代码也可以调用JavaScript方法，从而实现Web和原生代码的互操作性。

JSBridge的核心思想是通过特定的通信协议在JavaScript和原生代码之间传递消息和数据（🔗iOS与JS交互）。其工作原理通常包括以下步骤：

1. JavaScript调用原生代码：

• JavaScript通过调用特定的接口或注入的对象，发送消息给原生代码。
• 原生代码接收到消息后，执行相应的操作，并将结果返回给JavaScript。

2. 原生代码调用JavaScript：

• 原生代码通过特定的接口或注入的对象，发送消息给JavaScript。
• JavaScript接收到消息后，执行相应的操作，并将结果返回给原生代码。

二、JS 调用 Native

1.使用 URL Scheme

这种方法通过在 JavaScript 端构建一个特定的 URL，然后在原生端捕获这个 URL 并解析出需要调用的方法和参数。

a.UIWebView

使用 UIWebView 的代理方法 webView:shouldStartLoadWithRequest:navigationType: 来拦截即将加载的请求，并根据请求的URL参数执行相应的逻辑，包括注入JavaScript代码、显示提示信息、处理登录结果等。

JS端：

function callNativeMethod(method, params) {
   
   
    var url = "myapp://" + method + "?" + encodeURIComponent(JSON.stringify(params));
    window.location.href = url;
}

Native端：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
   
   
    NSURL *url = [request URL];
    if ([[url scheme] isEqualToString:@"myapp"]) {
   
   
        NSString *method = [url host];
        NSString *query = [url query];
        NSData *data = [query dataUsingEncoding:NSUTF8StringEncoding];
        NSDictionary *params = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
        
        if ([method isEqualToString:@"someNativeMethod"]) {
   
   
            [self someNativeMethod:params];
        }
        return NO;
    }
    return YES;

这里举一个例子：

stringByEvaluatingJavaScriptFromString: 方法返回执行JS脚本的结果，通过这种方式，我们可以在UIWebView中拦截即将加载的请求，注入JavaScript代码，并根据URL参数执行相应的逻辑。这种方法可以用于处理各种需要与Web内容交互的场景，如动态调整页面布局、显示提示信息、处理登录结果等。（UIWebView在iOS 12之后已经被废弃）

b.WKWebView

WKWebView 有两个代理，一个是 WKNavigationDelegate，另一个是 WKUIDelegate。这里是使用WKWebView的代理方法 webView:decidePolicyForNavigationAction:decisionHandler: 。

JS端：

function callNative(