前言：刚学习swift4，发现很多有意思的东西。特此拿出和大家进行分享。今天主要看下swift4中wkwebView实现点击图片进入大图浏览模式的实现。先上效果图
Untitled1.gif
本文swift与WKWebView交互Demo地址
其实对于swift与web进行交互也好，webview大图浏览图片也好。和oc语言发现真的很多逻辑都是相通的。今天我们来看下swift4版本中wkWebView实现大图浏览模式
为了实现我们大图浏览，需要先理清楚几个思路
1.动态往html中注入获取图片并且增加点击事件的js方法
2.拿到所有图片
3.点击做放大效果，实现大图浏览模式
因为刚学习swift4，发现好多语法都不知道怎么用，偷懒就桥接了OC语言的部分方法，如果您不知道如何在swift中使用OC，可以看下这篇文章，本文不做重点详解
如何在OC中使用Swift如何在Swift中使用OC
先上部分js注入的代码，这里使用的是OC版的代码注入的，如果那位同学有swift版本的注入js获取图片的代码，还望告知于我，非常感谢
OC版注入js获取图片并增加点击事件代码示例
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};function registerImageClickAction(){\
var imgs=document.getElementsByTagName('img');\
var length=imgs.length;\
for(var i=0;i<length;i++){\
img=imgs[i];\
img.onclick=function(){\
window.location.href='image-preview:'+this.src}\
}\
}";
既然动态注入，那么我们就放进当前加载的html中
image.png
image.png
userScript就是我们的js注入方法，原谅我用的oc语法桥接进swift实现的
private lazy var articleWeb : WKWebView = {
let webView = WKWebView.init(frame: view.bounds, configuration: configutation)
webView.allowsBackForwardNavigationGestures = true
webView.navigationDelegate = self
webView.uiDelegate = self
webView.scrollView.delegate = self
return webView
}()
private lazy var configutation: WKWebViewConfiguration = {
let config = WKWebViewConfiguration()
config.userContentController.addUserScript(String.userScript())
config.userContentController.add(WeakScriptMessageDelegate.init(delegate: self), name: "webViewApp")
return config
}()
2.对于正常的html来说，把动态注入js放到didfinish代理方法里边去执行再好不过。但是由于我们App的前端的特殊性。直接把js代码放到didfinishload里边是无法获取的，所以就和前端进行协商，让前端加载成功之后给我返回success字段，我再进行获取html中的图片。这种方式是可行的。并且也运用于我的上线的项目中
3.实现WKScriptMessageHandler代理，在代理方法中等待前端返回success字段，然后进行获取图片操作
image.png
extension ArticleDetialViewController: WKScriptMessageHandler{
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print(message.body)
let dic = message.body as! Dictionary<String, Any>
if (dic["success"] != nil) {
print("有值啦...")
articleWeb.evaluateJavaScript("getImages()", completionHandler: { (object, error) in
let str = String.init(describing: object!)
self.webImageListArray = str.components(separatedBy: "+")
})
articleWeb.evaluateJavaScript("registerImageClickAction();", completionHandler: nil)
}
}
}
这个webImageListArray是声明成了全局的，用于存储获取过来的图片
var webImageListArray : Array<Any>!
4.拿到图片，做点击事件触发就需要提到我们wkWebView的另一个代理方法了
image.png
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
if (navigationAction.request.url?.scheme == "image-preview") {
let miu = String.init(describing: "image-preview:")
let preview = String.init(describing: navigationAction.request.url!.absoluteString)
let path = preview.suffix(from:(miu.index(miu.startIndex, offsetBy: 14)))
imgStr = String(path)
self.previewPicture()
}
decisionHandler(.allow)
}
以上代码主要做的操作是，获取当前点击图片的String并进行截取。目的是为了等下弹出大图时，能找到指定的currentIndex，还有一点要提一下，这个方法写好必须实现回调函数，不然会崩溃的袄
5.执行我们大图浏览的方法
image.png
func previewPicture() -> Void {
var currentIndex: Int = 0
for section in 0..<webImageListArray.count{
let path = String(describing: webImageListArray![section])
if path == imgStr{
currentIndex = section
}
}
let photoBrowserd = SDPhotoBrowserd()
photoBrowserd.imageCount = webImageListArray.count
photoBrowserd.currentImageIndex = currentIndex
photoBrowserd.sourceImagesContainerView = view
photoBrowserd.delegate = self
photoBrowserd.show()
}
func photoBrowser(_ browser: SDPhotoBrowserd!, highQualityImageURLFor index: Int) -> URL! {
return NSURL.init(string: String.init(describing: webImageListArray[index]))! as URL
}
