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<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
    }

这里大图浏览用到的第三方OC语言写的SDPhotoBrowserd,进行大图浏览查看,效果还不错。有兴趣的可以下载下来demo看看
本文swift与WKWebView交互Demo地址
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值