swift

前言：刚学习swift4，发现很多有意思的东西。特此拿出和大家进行分享。今天主要看下swift4中wkwebView实现点击图片进入大图浏览模式的实现。先上效果图

本文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中

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字段，然后进行获取图片操作

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的另一个代理方法了

    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.执行我们大图浏览的方法

    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    }

这里大图浏览用到的第三方OC语言写的SDPhotoBrowserd，进行大图浏览查看，效果还不错。有兴趣的可以下载下来demo看看

本文swift与WKWebView交互Demo地址