掌握JS交互的万能攻略，Web与OC沟通更顺畅

JS 交互：Web 与 OC 的无缝连接

一、Web 调用 OC

1.1 直接调用无返回值

Web 端可通过直接调用访问 OC 方法，无需返回值。具体步骤如下：

• JS 文件： 添加调用方法的实现：

  function callNativeMethod() {
    window.webkit.messageHandlers.booking.postMessage("");
  }
  

• .m 文件： 注册并拦截方法：

  - (void)viewDidLoad {
    [super viewDidLoad];
    [self.bridge registerHandler:JSApi_booking handler:^(id data, WVJBResponeCallback responseCallback) {
        // 处理操作
    }];
  }
  

1.2 直接调用有返回值

Web 端可调用 OC 方法并获取返回值。具体步骤如下：

• JS 文件： 添加调用方法的实现：

  function callNativeMethodWithCallback() {
    window.webkit.messageHandlers.booking.postMessage("");
  }
  

• .m 文件： 注册并拦截方法：

  - (void)viewDidLoad {
    [super viewDidLoad];
    [self.bridge registerHandler:JSApi_booking handler:^(id data, WVJBResponeCallback responseCallback) {
        // 处理操作
        responseCallback(@{@"result": @"success"});
    }];
  }
  

二、OC 调用 Web

OC 端可使用 evaluateJavaScript 方法调用 Web 端的方法。步骤如下：

NSString *jsString = @"callJSMethod()";
[self.webView evaluateJavaScript:jsString completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    // 处理结果
}];

三、JS 文件本地化维护

将 JS 文件本地化可简化维护。步骤如下：

1. 创建名为“JS”的文件夹。
2. 将 JS 文件放入“JS”文件夹中。
3. HTML 文件： 引用 JS 文件：

<script src="JS/main.js"></script>

四、纯原生的 JS 写法

某些情况下，可使用纯原生的 JS 写法实现 JS 交互。步骤如下：

• HTML 文件： 添加以下代码：

  <script>
    function callNativeMethod() {
        window.location = "myapp://booking";
    }
  </script>
  

• .m 文件： 添加以下代码：

  - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url {
    if ([url.scheme isEqualToString:@"myapp"]) {
        // 处理操作
        return YES;
    }
    return NO;
  }
  

五、开源库（WebViewJavascriptBridge）用法

WebViewJavascriptBridge 是一个强大的开源库，用于实现 JS 交互。步骤如下：

1. 集成 WebViewJavascriptBridge 库。
2. HTML 文件： 添加以下代码：

<script src="WebViewJavascriptBridge.js"></script>

3. .m 文件： 添加以下代码：

WebViewJavascriptBridge *bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[bridge registerHandler:@"booking" handler:^(id data, WVJBResponseCallback responseCallback) {
    // 处理操作
}];

六、Html 实现片段

<script>
    function callNativeMethod() {
        window.webkit.messageHandlers.booking.postMessage("");
    }
</script>

结语

掌握 JS 交互是 iOS 开发的关键技能。本文提供了全面的指南，涵盖 Web 调用 OC、OC 调用 Web、JS 文件本地化维护、纯原生的 JS 写法、开源库用法等主题。通过遵循这些步骤，开发者可以熟练应用 JS 交互，提升应用程序的开发效率和用户体验。

常见问题解答

1. 为什么需要 JS 交互？
   JS 交互允许 Web 端和 OC 端进行通信，增强应用程序的交互性和灵活性。

2. 如何解决跨域问题？
   可以通过设置 WKWebViewConfiguration 的 allowsInlineMediaPlayback 和 mediaTypesRequiringUserActionForPlayback 属性来解决跨域问题。

3. 如何处理回调函数？
   在 Web 端，使用 postMessage 发送消息，并监听 OC 端返回的回调函数。在 OC 端，使用 WVJBResponseCallback 处理回调函数。

4. 如何调试 JS 交互？
   可以使用 Safari 或 Chrome 开发者工具调试 JS 代码。也可以使用 WebViewJavascriptBridge 提供的日志功能。

5. 有哪些最佳实践？
   使用明确的方法名称，处理错误，测试所有场景，避免滥用交互。