OC/Swift与JavaScript交互—WKWebView高
WKWebView对于HTML5的操作已经很方便了，但是还没有Android的WebView那样简单。WebView能够直接注入JavaScript对象，交互过程中Java 与 JavaScript甚至可以直接调用对方的方法，不用拦截，不用分发，这样的Java 与 JavaScript的交互非常清晰明了。
iOS上还达不到这个的便捷。
在iOS8.0以上的系统中，建议使用WKWebView，它的性能分析这里就不做对比了。使用WKWebView时，HTML5调用Native 的过程是这样的：
a1、Native提供基础设施：使用WKWebView的接口注册实现好的OC方法/Swift函数；
a2、查看HTML5实现；
a3、Native注入JavaScript函数；
a4、Native实现桥接方法：通过系统方法拦截JavaScript事件，匹配OC/Swift注册列表，分发调用不同的原生方法。
同时，使用WKWebView时，OC/Swift调用JavaScript的过程是这样的：
b1、使用WKWebView的接口调用JavaScript函数
</br>
这个交互能力已经从项目中抽取出来，做成了一个Demo，GitHub地址：https://github.com/xiaoL0204/WKWebViewDemo。
Demo实现了交互、注入App信息、进度条等常用功能。
可以下载Demo，顺着以下思路，实现点击HTML5的img标签打开一个Native图片浏览器的功能：
图片浏览器
</br>
a1、Native提供基础能力：
实现JavaScript函数对应的Swift方法：
//点击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)
}
这个Swift函数的功能是启动一个图片浏览器。为了向图片浏览器传递参数，函数调用时需要携带特定格式的Dictionary对象，该函数内部会解析Dictionary对象由key得到value，组装数据并push到一个新的Controller。
这个Dictionary实际上是个Json对象，它的格式是定义在JavaScript中的。
a2、查看HTML5源码：
由于链接是微信公众号文章，页面的格式非常固定，只取img标签的data-src属性即可。
例如
<p></p>
a3、Native注入JavaScript函数：
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代码，将当前点击的img标签的data-src属性（即当前img标签的图片）、data-src数组取出放到一个JavaScript全局变量中。
这个Swift函数的调用时机是在WebView初始化以后。
a4、Native实现桥接方法：
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)
}
}
这个方法中message.name区分Native注册好的方法，参数则存放在message.body属性。需要注意的是message.body是由JavaScript函数window.webkit.messageHandlers.\(FuncClickPhoto).postMessage({oc_imgUrl,oc_photoColl})传递的，它们是一一对应的关系。在这个方法中，我也打印了message.name和message.body，用于验证它们的数据结构。
</br>
至此，完成了点击HTML标签调用OC方法/Swift函数，并传递HTML5页面元素的目的。
根据这个步骤来，即可轻松地实现JavaScript函数调用Native方法，无论是单纯的点击，还是从HTML5获取页面元素传递给Native，都能很方便地实现出来。
</br>
这里有3个优化点：
1.可以将Native基础设施封装起来，即a1步骤写到封装类中；
2.JavaScript注入函数也封装起来，即a3步骤；
3.做一张路由表，实现快速匹配、快速分发，也为
func scriptHandlerUserController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage)函数减负。即a4步骤。
