這里先要道個歉。其實有點標題黨了
眾所周知，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年還得注冊才能用。。。自己寫一個方便的又不難
我是怎么做的呢
首先我們要確定一下目標：
- 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里面學來的??）
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啦，目前我沒遇到這種情況所以沒動力深入研究解決辦法??，或許可以拆分成多個函數去進行不同的回調？但判斷太多了不好寫了
又或者是，前端負責維護一張方法名表，動態獲取這張方法名表后去解析動態生成，但這樣又跟注冊有點像了我又不是很喜歡。。。。
