如何在WebKit中使用JavaScriptCore
這裡先要道個歉。其實有點標題黨了
眾所周知，WKWebView由於採用了非同步處理js的方式，間接砍掉了UIWebView的documentView.webView.mainFrame.javaScriptContext
屬性，也就不能很方便的使用javaScriptCore讓js呼叫原生方法，最近我在負責這類工作，其中一個要求就是要能實現web端直接使用jsBridge.getData()，jsBridge.openNative()的形式進行呼叫。
那怎麼辦呢？
總不能說放棄WebKit用回被蘋果拋棄的UIWebView吧？
總不能跟他們說：對不起我做不了吧（雖然我真的很想這樣說:joy:
在不算特別難的情況下，查找了一下目前iOS主流的jsBrideg方案（這裡不客氣的說一句在座的各位都是垃圾），沒有一個是符合邏輯學的，像什麼WebViewJavascriptBridge，dsBridge等等都是同一類東西，即需要web註冊啦，呼叫只能用bridge.call(“方法名”)啦等等等等
雖說如此但我還是從dsBridge中找到了比較好的處理回撥的方式：利用輸入框來回調 ，除此之外真的沒什麼有用的了，真心不建議使用這些第三方，太麻煩了根本不像是有夢想的人寫出來的東西，都2018年還得註冊才能用。。。自己寫一個方便的又不難
我是怎麼做的呢
首先我們要確定一下目標：
- web端可以直接呼叫bridge的方法
- 安卓那邊可以很容易就實現，所以不能依賴前端有額外的注入，不然他們就得增加額外的維護工作，越多的維護內容意味著更容易的出錯，這是我們應該避免的
- 基於上面那一條，這個額外的工作應該是自動生成的
- 我寫程式碼的必要要求：低侵入性
綜上所訴：
- JavaScriptCore可以很方便的完成，只要能解決怎麼注入
- 避免前端差別對待只要iOS本地進行注入就行
- 自動完成可以交給runtime生成注入的js程式碼
- 這個儘量，必要時用黑魔法也是能接受的（記得寫好測試程式碼）
*以下程式碼均使用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都知道的坑：
- 如果js呼叫的方法叫getData，那麼原生對應的方法名得叫[get:Data:],如果有三個引數就可以是[get:Da:ta:],swift的話可以給變數取別名是沒問題的
- 這裡字典最好用NSDictionary，其實感覺用[AnyHash: AnyHash]應該也是能行的，但我嫌不好看
- 識別不了非JavaScriptCore支援的型別
- 雖然傳block（閉包）也是可以的，但實際上我這種做法傳這個就沒什麼意義了。因為不是WebKit在呼叫JavaScriptCore，具體會在下面流程看到
- 基於上一點，這個方法都需要一個返回值，這個沒任何要求只要是NSObject的子類都行，因為下面的協議需要是@objc的
- 返回型別需要能轉字典和轉JSON，這裡為了方便使用了HandyJSON實現
- 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裡面學來的:joy:）
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啦，目前我沒遇到這種情況所以沒動力深入研究解決辦法:joy:，或許可以拆分成多個函式去進行不同的回撥？但判斷太多了不好寫了
又或者是，前端負責維護一張方法名錶，動態獲取這張方法名錶後去解析動態生成，但這樣又跟註冊有點像了我又不是很喜歡。。。。
總之目前用在我負責的專案的話這樣說足夠的，但通用性不強，說不定哪天心血來潮會根據這個思路寫一個通用的庫