上篇文章說了設(shè)計(jì)通用api的思路捏顺，下面來具體說下怎么融合到WebView中六孵。這里我只對(duì)UIWebView做了接入，WKWebView也是類似幅骄。
bridge.js
bridge.js是js端調(diào)用oc功能函數(shù)的集合劫窒。
其中定義個(gè)SLWebBridge的全局變量，里面定義了GLOBAL_FUNC_INDEX=0(表示callBackId初始為0)拆座，如果每次js調(diào)用oc有回調(diào)主巍，那么callBackId會(huì)遞增。
在webViewDidFinishLoad的時(shí)候注入該js挪凑。然后在后續(xù)就可以利用其進(jìn)行通信了孕索。
BaseWebAPI
BaseWebAPI遵循一個(gè)協(xié)議WebAPIProtocol。
protocol WebAPIProtocol {
// 所屬的module名
func module() -> String
// 該方法會(huì)動(dòng)態(tài)調(diào)用躏碳，在BaseWebAPI里面實(shí)現(xiàn)
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)
}
}
}
負(fù)責(zé)各自模塊的webAPI會(huì)繼承于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的注冊(cè)菇绵，js調(diào)用oc設(shè)定url的解析等肄渗。
最主要的就是func handleWebEvent(_ url: URL?, webView: UIWebView) -> Bool方法。
關(guān)于各個(gè)參數(shù)的獲取上一篇文章中都講過脸甘，主要說下native端生成callback恳啥。
如果有callbackId存在，則會(huì)生成callback丹诀。callback會(huì)帶有個(gè)dict的參數(shù)钝的，以便native傳遞參數(shù)給js翁垂。params會(huì)序列化成jsonString。最后會(huì)調(diào)用invokeWebMethod傳入callbackId和params硝桩。
var callback: SLCallback?
//cb沿猜，在js端是個(gè)id，根據(jù)id找到對(duì)應(yīng)的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會(huì)持有WebBridge碗脊。init的時(shí)候會(huì)創(chuàng)建webBridge啼肩。
webBridge = WebBridge(webView: self, webViewDelegate: nil)
WebBridge中的init函數(shù)，將webView.delegate設(shè)成WebBridge衙伶。
init(webView: UIWebView, webViewDelegate: UIWebViewDelegate?) {
apiDict = [String:WebAPIProtocol]();
super.init()
self.webView = webView
self.webViewDelegate = webViewDelegate
webView.delegate = self
// 注入js
injectBridgeScript()
}
如果外部需要設(shè)置webView.delegate祈坠，則需要通過webViewDelegate。在所有UIWebViewDelegate函數(shù)的地方都會(huì)調(diào)用webViewDelegate把回調(diào)傳出去矢劲。
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)
}
測(cè)試Demo
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p>測(cè)試</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>
點(diǎn)擊button赦拘，會(huì)觸發(fā)js調(diào)用native，ui模塊的test方法芬沉，并傳入?yún)?shù)躺同。在調(diào)用之后，會(huì)有回調(diào)丸逸，alert native傳過來的結(jié)果蹋艺。
在ViewController中載入webView。
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let uiApi = UIWebAPI()
// 注冊(cè)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黄刚。
