iOS JSBridge 使用指南

1. 概述

在移动应用开发中，经常需要在原生应用和Web页面之间进行交互。iOS提供了一个强大的工具——JSBridge，用于实现iOS与JavaScript的相互调用和数据传递。本文将介绍如何在iOS应用中使用JSBridge，并提供一些代码示例。

2. 基本原理

JSBridge的基本原理是通过WebView的JavaScriptCore框架提供的接口实现iOS和JavaScript之间的通信。iOS应用通过将一个对象暴露给JavaScript，JavaScript就可以通过该对象调用iOS的方法或获取iOS的数据，反之亦然。

3. 使用步骤

下面是使用JSBridge的基本步骤：

步骤一：创建Web页面

首先，在Web页面中引入JSBridge的JavaScript文件。可以在GitHub上找到一些流行的JSBridge库，如WebViewJavascriptBridge、HybridBridge等。

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

步骤二：创建iOS传递给Web的API

在iOS中，首先需要创建一个遵循JSExport协议的类，该类定义了要传递给Web的API。

@objc protocol MyJSBridgeProtocol: JSExport {
    func showAlert(message: String)
}

然后，创建该类的实例，并将其注册到WebView。

let webView = UIWebView()
let myJSBridge = MyJSBridge()
webView.addJavascriptInterface(myJSBridge, forKey: "MyJSBridge")

步骤三：调用JavaScript方法

在iOS中，通过stringByEvaluatingJavaScriptFromString方法调用JavaScript方法。

webView.stringByEvaluatingJavaScriptFromString("myFunction()")

步骤四：从Web获取数据

通过JavaScript的prompt方法可以将数据传递给iOS。

var data = prompt('Please enter data:')

在iOS中，通过拦截URL的方式获取数据。

func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    if let url = request.URL, let scheme = url.scheme, scheme == "jsbridge" {
        let data = url.host
        // 处理数据
        return false
    }
    return true
}

4. 示例

下面通过一个简单的示例来说明如何使用JSBridge。

示例一：iOS调用JavaScript方法

iOS代码
class ViewController: UIViewController {
    var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = UIWebView(frame: view.bounds)
        view.addSubview(webView)
        
        let myJSBridge = MyJSBridge()
        webView.addJavascriptInterface(myJSBridge, forKey: "MyJSBridge")
        
        let html = "<html><body><button onclick='myFunction()'>Click Me</button><script src='JSBridge.js'></script></body></html>"
        webView.loadHTMLString(html, baseURL: nil)
    }
    
    @IBAction func showAlert() {
        webView.stringByEvaluatingJavaScriptFromString("myFunction()")
    }
}

@objc protocol MyJSBridgeProtocol: JSExport {
    func showAlert(message: String)
}

class MyJSBridge: NSObject, MyJSBridgeProtocol {
    func showAlert(message: String) {
        let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default, handler: nil)
        alert.addAction(action)
        present(alert, animated: true, completion: nil)
    }
}
JavaScript代码
function myFunction() {
    MyJSBridge.showAlert('Hello from JavaScript!')
}

示例二：Web页面调用iOS方法

iOS代码
class ViewController: UIViewController, UIWebViewDelegate {
    var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = UIWebView(frame: view.bounds)
        webView.delegate = self
        view.addSubview(webView)
        
        let myJSBridge = MyJSBridge()
        webView.addJavascriptInterface(myJSBridge, forKey: "MyJSBridge")
        
        let html = "<html><body><button onclick='myFunction()'>Click Me</button><script src='JSBridge.js'></script></body></html>"
        webView.loadHTMLString(html, baseURL: nil)
    }
    
    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool {
        if let url = request.url, let scheme = url.scheme, scheme == "jsbridge" {
            let data = url.host
            showAlert(message: data)