swift - webView实现大图浏览

前言：刚学习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

既然动态注入，那么我们就放进当前加载的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
        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!

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.. URL! {
        return NSURL.init(string: String.init(describing: webImageListArray[index]))! as URL
    }

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

本文swift与WKWebView交互Demo地址