如何在WebKit中使用JavaScriptCore

weixin_33890526發表於2018-12-01
WebKitJavaScript

這裡先要道個歉。其實有點標題黨了

眾所周知，WKWebView由於採用了非同步處理js的方式，間接砍掉了UIWebView的documentView.webView.mainFrame.javaScriptContext屬性，也就不能很方便的使用javaScriptCore讓js呼叫原生方法，最近我在負責這類工作，其中一個要求就是要能實現web端直接使用jsBridge.getData()，jsBridge.openNative()的形式進行呼叫。

那怎麼辦呢？

總不能說放棄WebKit用回被蘋果拋棄的UIWebView吧？

總不能跟他們說：對不起我做不了吧（雖然我真的很想這樣說?

在不算特別難的情況下，查詢了一下目前iOS主流的jsBrideg方案（這裡不客氣的說一句在座的各位都是垃圾），沒有一個是符合邏輯學的，像什麼WebViewJavascriptBridge，dsBridge等等都是同一類東西，即需要web註冊啦，呼叫只能用bridge.call(“方法名”)啦等等等等

雖說如此但我還是從dsBridge中找到了比較好的處理回撥的方式：利用輸入框來回撥，除此之外真的沒什麼有用的了，真心不建議使用這些第三方，太麻煩了根本不像是有夢想的人寫出來的東西，都2018年還得註冊才能用。。。自己寫一個方便的又不難

我是怎麼做的呢

首先我們要確定一下目標：

  1. web端可以直接呼叫bridge的方法
  2. 安卓那邊可以很容易就實現，所以不能依賴前端有額外的注入，不然他們就得增加額外的維護工作，越多的維護內容意味著更容易的出錯，這是我們應該避免的
  3. 基於上面那一條，這個額外的工作應該是自動生成的
  4. 我寫程式碼的必要要求：低侵入性

綜上所訴：

  1. JavaScriptCore可以很方便的完成，只要能解決怎麼注入
  2. 避免前端差別對待只要iOS本地進行注入就行
  3. 自動完成可以交給runtime生成注入的js程式碼
  4. 這個儘量，必要時用黑魔法也是能接受的（記得寫好測試程式碼）

*以下程式碼均使用swift

首先我們按照UIWebView時代的需求，準備一個繼承自JSExport協議的協議：

final class JSResult: NSObject, HandyJSON {
    var status: Int = 0
    var msg: String?
    var data: [String: Any] = [:]
    func isNotAFunction() -> JSResult{
        status = -1
        msg = "無對應方法"
        return self
    }
    var asyncCallback: ((JSResult)->Void)?
}

@objc protocol JSBridgeCallFunction: JSExport {
    ///從 APP 獲取資料
    func get(_ type: String, Data extraParams: NSDictionary) -> JSResult
}

這裡有幾點用過JSExport都知道的坑：

  1. 如果js呼叫的方法叫getData，那麼原生對應的方法名得叫[get:Data:],如果有三個引數就可以是[get:Da:ta:],swift的話可以給變數取別名是沒問題的
  2. 這裡字典最好用NSDictionary，其實感覺用[AnyHash: AnyHash]應該也是能行的，但我嫌不好看
  3. 識別不了非JavaScriptCore支援的型別
  4. 雖然傳block（閉包）也是可以的，但實際上我這種做法傳這個就沒什麼意義了。因為不是WebKit在呼叫JavaScriptCore，具體會在下面流程看到
  5. 基於上一點，這個方法都需要一個返回值，這個沒任何要求只要是NSObject的子類都行，因為下面的協議需要是@objc的
  6. 返回型別需要能轉字典和轉JSON，這裡為了方便使用了HandyJSON實現
  7. JSResult的內容是根據需求來的，這個只是作為例子，isNotAFunction和asyncCallback是用來做額外處理的，會在後面解釋為什麼有這兩個東西

然後是實現了JSBridgeCallFunction的類

class JSBridge: NSObject, JSBridgeCallFunction {
    func get(_ type: String, Data extraParams: NSDictionary) -> JSResult {
        let result = JSResult()
        guard let type = GetDataType(rawValue: type) else { return result.isNotAFunction() }
        switch type {
        case .USERINFO:
            if let data = User.current.toJSON() {
                result.data = data
            }
        }
        
        return result
    }
}

extension JSBridge {
    enum GetDataType: String {
        ///獲取使用者資訊
        case USERINFO
    }
}

這裡為了方便js得知客戶端沒有實現某些type，所以返回了isNotAFunction（這個名字是從JSContext的exceptionHandler裡面學來的?）

User也是實現了HandlyJSON所以可以拿簡單轉字典

前面說了是用輸入框進行回撥，那麼就要去WKWebView處理輸入框的WKUIDelegate方法裡進行處理

func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
    if let context = JSContext() {
        context.setObject(JSBridge(), forKeyedSubscript: "JSBridge" as NSString)
        context.exceptionHandler = { context, value in
            if let valueStr = value?.toString(), valueStr.contains("is not a function") {//這個是沒用的,留著方便除錯
                completionHandler("{ status: -1, msg: '無對應方法' }")
            }
        }
        if let result = context.evaluateScript(prompt)?.toObject() as? JSResult {
            if result.asyncCallback != nil {
                result.asyncCallback = { result in
                    completionHandler(result.toJSONString())
                }
            } else {
                completionHandler(result.toJSONString())
            }
            return
        }
    }
    
    completionHandler("")
}

感覺蘋果也是基本放棄這個庫了。好多地方都不是很方便接入swift（包括初始化居然是optional的。。。）

這裡我解釋一下，prompt傳進來的是類似於JsBridge.getData("USERINFO")的東西，然後直接交給JSContext去對映原生方法

asyncCallback是用來處理非同步的，上面這個處理的邏輯其實是很微妙的，如果js那邊呼叫的時候其實是用一個非同步回撥的話，那麼到了上面這段程式碼的時候其實是把非同步轉成了同步，那麼真正遇到原生裡面需要非同步處理的時候就會出問題（比如要登陸，登陸結束才能回撥js）所以我設計就是如果需要處理原生非同步的話，返回的result物件的asyncCallback就不會為空，上面程式碼判斷不為空就重新賦值這個閉包，然後在真正處理結束的地方才會呼叫result.asyncCallback?()

那麼重點來了，為了實現傳進來的prompt是類似於JsBridge.getData("USERINFO")的東西，要怎麼生成這個注入的js呢，對此我請來了前端的負責人寫了一段js：

!(function () {
    function _objToJson (obj) {
        var str = '';
        try {
            str = JSON.stringify(obj);
        } catch (e) {}
        return str;
    }
    function _jsonToObj (str) {
        var obj = {};
        try {
            obj = JSON.parse(str);
        } catch (e) {}
        return obj;
    }
    function _toQuery (method, type, params) {
        var str = params
            ? 'JSBridge.' + method + '("' + type + '",' + _objToJson(params) + ')'
            : 'JSBridge.' + method + '("' + type + '")';
        return str;
    }
    function _getData(type, extraParams, callback) {
        var query = _toQuery('getData', type, extraParams);
        var result = prompt(query);
        if (callback && typeof callback === 'function') {
            callback(result);
        }
        return result;
    }
    var JSBridge = window.JSBridge = {
        getData: _getData
    };
    var doc = document;
    var readyEvent = doc.createEvent('Events');
    readyEvent.initEvent('JSBridgeReady');
    readyEvent.bridge = JSBridge;
    doc.dispatchEvent(readyEvent);
})();

然後我把這段js分割成兩段：

static private let jsPrefix =
"""
!(function () {
    function _objToJson (obj) {
        var str = '';
        try {
        str = JSON.stringify(obj);
        } catch (e) {}
        return str;
    }
    function _jsonToObj (str) {
        var obj = {};
        try {
        obj = JSON.parse(str);
        } catch (e) {}
        return obj;
    }
    function _toQuery (method, type, params) {
        var str = params
            ? 'JSBridge.' + method + '("' + type + '",' + _objToJson(params) + ')'
            : 'JSBridge.' + method + '("' + type + '")';
        return str;
    }
    var doc = document;
    var readyEvent = doc.createEvent('Events');
    readyEvent.initEvent('JSBridgeReady');
    readyEvent.bridge = JSBridge;
    doc.dispatchEvent(readyEvent);

"""
static private let jsSufix = "})();"

中間的部分就用runtime來生成了，最終的生成函式：

static func generateJSBridgeJs() -> String {
    var result = "var JSBridge = window.JSBridge = {"
    var functions = ""
    var count: UInt32 = 0
    let methodList = protocol_copyMethodDescriptionList(JSBridgeCallFunction.self, true, true, &count)
    for index in 0..<Int(count) {
        if let method = methodList?[index], let selector = method.name {
            
            let methodName = NSStringFromSelector(selector).replacingOccurrences(of: ":", with: "")
            result += "\(methodName): _\(methodName),"
            
            functions +=
            """
            
                function _\(methodName) (paraA, paraB, callback) {
                    var query = _toQuery('\(methodName)', paraA, paraB);
                    var result = prompt(query);
                    if (callback && typeof callback === 'function') {
                        callback(result);
                    }
                    return result;
                }
            
            """
        }
        
    }
    result += "};"
    return jsPrefix + result + functions + jsSufix
}

在頁面載入完呼叫：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript(JSBridge.generateJSBridgeJs()) { (result, error) in
        guard let result = result as? Bool, result, error == nil else {
            fatalError("注入失敗,請檢查JSBridge.generateJSBridgeJs()")
        }
    }
}

江江！搞定，至此不管後端怎麼加方法，只要這邊JSBridgeCallFunction裡新增新的方法就行了，完全不需要修改任何地方

But，其實這個自動化生成有一些限制：

首先我這裡根據專案需求，把js呼叫的函式寫死為：

function _\(methodName) (paraA, paraB, callback)

這樣就需要和前端協商好引數的順序了，如果有回撥就需要放到最後一位，像有時候callback是必選的，paraB是可選的話，他們一般的習慣都是把paraB放到最後一位去，反過來這種對他們來說就有點反人類了，但無傷大雅，反正不是我在寫嘿嘿嘿

實際情況下可能會有更多的引數，但這個其實也很有辦法解決：假設只有一個非同步回撥，那麼在前面獲取的方法有多少個引數，生成多少個para就行，然後_toQuery改成傳陣列

但還有可能js傳了多個function作為引數，那這個就GG啦，目前我沒遇到這種情況所以沒動力深入研究解決辦法?，或許可以拆分成多個函式去進行不同的回撥？但判斷太多了不好寫了

又或者是，前端負責維護一張方法名錶，動態獲取這張方法名錶後去解析動態生成，但這樣又跟註冊有點像了我又不是很喜歡。。。。

總之目前用在我負責的專案的話這樣說足夠的，但通用性不強，說不定哪天心血來潮會根據這個思路寫一個通用的庫

相關文章