上篇文章說了設計通用api的思路，下面來具體說下怎么融合到WebView中。這里我只對UIWebView做了接入，WKWebView也是類似。

bridge.js

bridge.js是js端調用oc功能函數的集合。

其中定義個SLWebBridge的全局變量，里面定義了GLOBAL_FUNC_INDEX=0(表示callBackId初始為0)，如果每次js調用oc有回調，那么callBackId會遞增。

在webViewDidFinishLoad的時候注入該js。然后在后續(xù)就可以利用其進行通信了。

BaseWebAPI

BaseWebAPI遵循一個協議WebAPIProtocol。

protocol WebAPIProtocol {
 // 所屬的module名
    func module() -> String
    // 該方法會動態(tài)調用，在BaseWebAPI里面實現
    func callNativeMethod(name: String, parameter: [String: AnyObject]?, callback: SLCallback?)
}

class BaseWebAPI: NSObject, WebAPIProtocol {
    
    func module() -> String {
        return ""
    }
    
    func callNativeMethod(name: String, parameter: [String: AnyObject]?, callback: SLCallback?) {
        let sel = name + ":callback:"
        let seletor = NSSelectorFromString(sel)
        
        guard self.responds(to: seletor) else {
            print("\(self) not responds \(sel)")
            return
        }
        
        let imp = self.method(for: seletor)
        
        if let imp = imp {
            typealias function = @convention(c) (AnyObject, Selector, [String: AnyObject]?, SLCallback?) -> Void
            
            let call = unsafeBitCast(imp, to: function.self)
            
            call(self, seletor, parameter, callback)
        }
        
        if let callback = callback {
            callback(nil)
        }
    }
}

負責各自模塊的webAPI會繼承于BaseWebAPI。比如UIWebAPI.

class UIWebAPI: BaseWebAPI {
    func test(_ params:[String: AnyObject]?, callback: SLCallback?) {
        print("test UIWebAPI");
        if let params = params {
            print("params:\(params)")
        }
        callback?(["a":22])
    }
}

native端的bridge

WebBridge主要處理了bridge.js的注入，webAPI的注冊，js調用oc設定url的解析等。

最主要的就是func handleWebEvent(_ url: URL?, webView: UIWebView) -> Bool方法。

關于各個參數的獲取上一篇文章中都講過，主要說下native端生成callback。
如果有callbackId存在，則會生成callback。callback會帶有個dict的參數，以便native傳遞參數給js。params會序列化成jsonString。最后會調用invokeWebMethod傳入callbackId和params。

var callback: SLCallback?
        
        //cb，在js端是個id，根據id找到對應的function
        let callbackId = url.objectForKey("cb")
        if let callbackId = callbackId {
            // 生成callback
            callback = { result in
                guard let result = result else {
                    return
                }
                
                // 將result-->string
                do {
                    let jsonData = try JSONSerialization.data(withJSONObject: result as Any, options: JSONSerialization.WritingOptions.prettyPrinted)
                    
                    var jsonString = String(data: jsonData, encoding: String.Encoding.utf8)
                    
                    jsonString = jsonString ?? "{}"
                    
                    let script = String(format: "SLWebBridge.invokeWebMethod(%@,%@);", callbackId, jsonString!)
                    
                    print("\(jsonString)")
                    
                    print("\(script)")
                    
                    webView.stringByEvaluatingJavaScript(from: script)
                    
                } catch {
                    print("json to string error")
                }
            }
        }
        
        let webApi = webAPI(module)
        if let webApi = webApi {
            webApi.callNativeMethod(name: method, parameter: dict, callback: callback)
        }

自定義webView

SLWebView會持有WebBridge。init的時候會創(chuàng)建webBridge。

webBridge = WebBridge(webView: self, webViewDelegate: nil)

WebBridge中的init函數，將webView.delegate設成WebBridge。

init(webView: UIWebView, webViewDelegate: UIWebViewDelegate?) {
        apiDict = [String:WebAPIProtocol]();

        super.init()
        
        self.webView = webView
        self.webViewDelegate = webViewDelegate
        webView.delegate = self
        
        // 注入js
        injectBridgeScript()
    }

如果外部需要設置webView.delegate，則需要通過webViewDelegate。在所有UIWebViewDelegate函數的地方都會調用webViewDelegate把回調傳出去。

if let webViewDelegate = webViewDelegate {
       if webViewDelegate.responds(to: #selector(webViewDidStartLoad(_:))) {
           webViewDelegate.webViewDidStartLoad!(webView)
       }
   }

class SLWebView: UIWebView {
    var webBridge: WebBridge?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        commonInit()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        commonInit()
    }
    
    deinit {
        webBridge = nil
        self.delegate = nil
    }
    
    private func commonInit() {
        webBridge = WebBridge(webView: self, webViewDelegate: nil)
    }
    
    //MARK: Register API
    func registerWebAPI(_ module: String, _ api: WebAPIProtocol) {
        webBridge?.registerWebAPI(module, api)
    }
    
    func unregisterWebAPI(_ module: String) {
        webBridge?.unregisterWebAPI(module)
    }

測試Demo

<!DOCTYPE html>
<html>
<head>
 <title>test</title>
</head>
<body>
    <p>測試</p>
 <button onclick="test()">click</button>
 // 引用bridge.js
 <script src="bridge.js"></script>
 <script>
  function test() {
            SLWebBridge.invokeClientMethod("ui","test",{a:5}, function(result) {
            alert(result.a);});
  }
 </script>
</body>
</html>

點擊button，會觸發(fā)js調用native，ui模塊的test方法，并傳入參數。在調用之后，會有回調，alert native傳過來的結果。

在ViewController中載入webView。

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        let uiApi = UIWebAPI()
        
        // 注冊webAPI
        webView.registerWebAPI("ui", uiApi)
        
        let path = Bundle.main.path(forResource: "test", ofType: "html")

        guard let p = path, p.characters.count > 0 else {
            return
        }
        
        do {
           let content = try String(contentsOfFile: p)
            webView.loadHTMLString(content, baseURL: Bundle.main.bundleURL)
        } catch {
            print("error")
        }
    }

github地址：SLWebBridge。