WKWebView對于HTML5的操作已經(jīng)很方便了，但是還沒有Android的WebView那樣簡單。WebView能夠直接注入JavaScript對象，交互過程中Java 與 JavaScript甚至可以直接調(diào)用對方的方法，不用攔截，不用分發(fā)，這樣的Java 與 JavaScript的交互非常清晰明了。
iOS上還達(dá)不到這個(gè)的便捷。
在iOS8.0以上的系統(tǒng)中，建議使用WKWebView，它的性能分析這里就不做對比了。使用WKWebView時(shí)，HTML5調(diào)用Native 的過程是這樣的：
a1、Native提供基礎(chǔ)設(shè)施：使用WKWebView的接口注冊實(shí)現(xiàn)好的OC方法/Swift函數(shù)；
a2、查看HTML5實(shí)現(xiàn)；
a3、Native注入JavaScript函數(shù)；
a4、Native實(shí)現(xiàn)橋接方法：通過系統(tǒng)方法攔截JavaScript事件，匹配OC/Swift注冊列表，分發(fā)調(diào)用不同的原生方法。
同時(shí)，使用WKWebView時(shí)，OC/Swift調(diào)用JavaScript的過程是這樣的：
b1、使用WKWebView的接口調(diào)用JavaScript函數(shù)
</br>
這個(gè)交互能力已經(jīng)從項(xiàng)目中抽取出來，做成了一個(gè)Demo，GitHub地址：https://github.com/xiaoL0204/WKWebViewDemo。
Demo實(shí)現(xiàn)了交互、注入App信息、進(jìn)度條等常用功能。
可以下載Demo，順著以下思路，實(shí)現(xiàn)點(diǎn)擊HTML5的img標(biāo)簽打開一個(gè)Native圖片瀏覽器的功能：
</br>
a1、Native提供基礎(chǔ)能力：
實(shí)現(xiàn)JavaScript函數(shù)對應(yīng)的Swift方法：
//點(diǎn)擊image
func handlerClickImageTag(dic: Dictionary<String, Any>) {
guard let currImgUrl = dic["oc_imgUrl"] as? NSString else {return}
guard let imgBankArr = dic["oc_photoColl"] as? NSMutableArray else {return}
var currImgInfo : WebPhotoImgInfo? = nil
let urlBankArr = NSMutableArray()
for i in 0 ..< imgBankArr.count {
let url = imgBankArr[i] as? NSString
let tempInfo : WebPhotoImgInfo = WebPhotoImgInfo()
tempInfo.imgUrl = url!
if url == currImgUrl {
currImgInfo = tempInfo
}
urlBankArr.add(tempInfo)
}
let vc : XLPhotoBrowserController = XLPhotoBrowserController()
vc.delegate = self
vc.setupUI(withCurrentImgAdapter: currImgInfo, imageAdaptersBank: NSArray(array:urlBankArr) as! [XLPhotoBrowserAdapterDelegate])
navigationController?.pushViewController(vc, animated: true)
}
這個(gè)Swift函數(shù)的功能是啟動(dòng)一個(gè)圖片瀏覽器。為了向圖片瀏覽器傳遞參數(shù)，函數(shù)調(diào)用時(shí)需要攜帶特定格式的Dictionary對象，該函數(shù)內(nèi)部會(huì)解析Dictionary對象由key得到value，組裝數(shù)據(jù)并push到一個(gè)新的Controller。
這個(gè)Dictionary實(shí)際上是個(gè)Json對象，它的格式是定義在JavaScript中的。
a2、查看HTML5源碼：
由于鏈接是微信公眾號(hào)文章，頁面的格式非常固定，只取img標(biāo)簽的data-src屬性即可。
例如
<p></p>
a3、Native注入JavaScript函數(shù)：
func addAnalyzePhoto() {
let string1 : String = "var oc_photoColl=new Array();var ps=document.getElementsByTagName('img');for(var i=0;i<ps.length;i++){var temp=ps[i].getAttribute('data-src');if(temp!=null){oc_photoColl.push(temp);ps[i].onclick=function(){var oc_imgUrl=this.getAttribute('data-src');window.webkit.messageHandlers.\(FuncClickPhoto).postMessage({oc_imgUrl,oc_photoColl});}}}"
webView.configuration.userContentController.addUserScript(WKUserScript(source: string1, injectionTime: .atDocumentEnd, forMainFrameOnly: false))
webView.configuration.userContentController.add(ScriptMessageHandler(handlerDelegate:self), name: FuncClickPhoto)
}
注入一段特定的JavaScript代碼，將當(dāng)前點(diǎn)擊的img標(biāo)簽的data-src屬性（即當(dāng)前img標(biāo)簽的圖片）、data-src數(shù)組取出放到一個(gè)JavaScript全局變量中。
這個(gè)Swift函數(shù)的調(diào)用時(shí)機(jī)是在WebView初始化以后。
a4、Native實(shí)現(xiàn)橋接方法：
func scriptHandlerUserController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
print("contentController:\(userContentController) message.name:\(message.name) message.body:\(message.body)")
if message.name==FuncClickPhoto {
if let dic = message.bodyas? Dictionary<String, Any> {
handlerClickImageTag(dic: dic)
}
}
這個(gè)方法中message.name區(qū)分Native注冊好的方法，參數(shù)則存放在message.body屬性。需要注意的是message.body是由JavaScript函數(shù)window.webkit.messageHandlers.\(FuncClickPhoto).postMessage({oc_imgUrl,oc_photoColl})傳遞的，它們是一一對應(yīng)的關(guān)系。在這個(gè)方法中，我也打印了message.name和message.body，用于驗(yàn)證它們的數(shù)據(jù)結(jié)構(gòu)。
</br>
至此，完成了點(diǎn)擊HTML標(biāo)簽調(diào)用OC方法/Swift函數(shù)，并傳遞HTML5頁面元素的目的。
根據(jù)這個(gè)步驟來，即可輕松地實(shí)現(xiàn)JavaScript函數(shù)調(diào)用Native方法，無論是單純的點(diǎn)擊，還是從HTML5獲取頁面元素傳遞給Native，都能很方便地實(shí)現(xiàn)出來。
</br>
這里有3個(gè)優(yōu)化點(diǎn)：
1.可以將Native基礎(chǔ)設(shè)施封裝起來，即a1步驟寫到封裝類中；
2.JavaScript注入函數(shù)也封裝起來，即a3步驟；
3.做一張路由表，實(shí)現(xiàn)快速匹配、快速分發(fā)，也為
func scriptHandlerUserController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage)函數(shù)減負(fù)。即a4步驟。
