前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS 开发之路(使用WKWebView加载Html5) 四

iOS 开发之路(使用WKWebView加载Html5) 四

作者头像
从今若
发布2019-09-19 15:45:25
2.6K0
发布2019-09-19 15:45:25
举报
文章被收录于专栏:家劲家劲

  基于Swift 3 、 Xcode 8 、 iOS 10 下的WKWebView的使用。

  首先是WKWebView的基本用法:

代码语言:javascript
复制
    var wk:WKWebView! 
    var progBar:UIProgressView!    //定义的进度条
    override func viewDidLoad() {
        super.viewDidLoad()
        self.wk = WKWebView(frame: self.view.frame)
        let theConfiguration = WKWebViewConfiguration()
        theConfiguration.userContentController = WKUserContentController() // 通过js与webview内容交互配置
        let  frame = CGRect(x: 0,y : 0, width: self.view.frame.width, height:self.view.frame.height) //定位wk位置
        wk = WKWebView(frame: frame, configuration: theConfiguration)
        wk.allowsLinkPreview = true
        self.wk.load(NSURLRequest(url:NSURL(string:"http://www.baidu.com/")! as URL) as URLRequest) //要在info.plist中添加对http的支持
        self.view.addSubview(self.wk)
        // add your self view here
        // add back <- icon to back to previous page
    }

  上面的其实很简单,很多教程里其实都有。下面讲一下如何实现进度条。这个也不难。

代码语言:javascript
复制
    //视图已经加载完后执行
    override func viewDidAppear(_ animated: Bool){
        super.viewDidAppear(animated)

        self.wk.uiDelegate = self //实现协议,进度条和获取网页标题需要用到
        self.wk.navigationDelegate = self //网页间前进后退要用到
     
        //生成进度条
        progBar = UIProgressView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 30))
        progBar.progress = 0.0
        progBar.tintColor = UIColor.blue
        self.view.addSubview(progBar)
        //注册进度条监听事件
        self.wk.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil)
        //注册网页标题监听事件
        self.wk.addObserver(self, forKeyPath: "title", options: NSKeyValueObservingOptions.new, context: nil)
  
    }

  上面的UIDelegate要在类前添加协议:

代码语言:javascript
复制
class LxxmForSwift: UIViewController, WKNavigationDelegate, WKUIDelegate, UINavigationControllerDelegate {
}

  关于WKUIDelegate、UINavigationDelegate大家可以去Apple开发中心查看文档,保证会加深印象。

  进度条、网页标题变动监听事件的具体实现:

代码语言:javascript
复制
    //这里添加了estimatedProgrees和title两个监听事件
   override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "estimatedProgress" {
            self.progBar.alpha = 1.0
            progBar.setProgress(Float(wk.estimatedProgress), animated: true)
            if(self.wk.estimatedProgress >= 1.0){
                UIView.animate(withDuration: 0.3, delay: 0.1, options: UIViewAnimationOptions.curveEaseInOut, animations: { () -> Void in
                    self.progBar.alpha = 0.0
                }, completion: { (finished:Bool) -> Void in
                    self.progBar.progress = 0
                })
            }
            
        } else if keyPath == "title" {
            self.titleForWeb.title = self.wk.title //这里titleForWeb是我自己定义的一个导航bar
            print(wk.title!)
        }
    }

  注意,添加完的监听事件需要有对应的注销事件:

代码语言:javascript
复制
    override func viewWillDisappear(_ animated: Bool) {
        wk.removeObserver(self, forKeyPath: "estimatedProgress")
        wk.removeObserver(self, forKeyPath: "title")
    }

  我们都知道,WKWebView比UIWebView占用更少内存,性能更好。不过UIWebView可以直接实现JS中alert实现,而前者对JS里的alert事件重新封装了,必须实现WKUIDelegate协议:

代码语言:javascript
复制
    
  //把这两个方法加到代码里,配合之前的 self.wk.uiDelegate = self 即可。

  关于WKWebView中Html5图片上传,下一篇随笔我会说一下。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-11-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档