一、創建，我們可以在Viewcontroller中使用如下的懶加載的方式創建一個WKWebView 以及一個便于觀察進度的進度條：

    // wkWebView
    lazy var wkWebView = WKWebView()
    // 進度條
    lazy var progressView = UIProgressView() 

隨后我們可以在viewDidLoad實現方法，將這兩個控件添加到視圖中，在這里要注意iphone機型的的適配，代碼如下：

    override func viewDidLoad() {
        super.viewDidLoad()
     
        initInterface()
        
    }


    func initInterface() -> () {
        
        self.wkWebView.frame = CGRect(x: safeAreaInsets.left
            , y: safeAreaInsets.top + 44
            , width: ScreenWidth
            , height: ScreenHeight - safeAreaInsets.top - 44 - safeAreaInsets.bottom)
        let url = URL(string: "https://blog.csdn.net/kmonarch/article/details/82753235")
        let request = URLRequest(url: url!)
        wkWebView.navigationDelegate = self
        wkWebView.load(request)
        self.view.addSubview(self.wkWebView)
      

        self.progressView.frame = CGRect(x: safeAreaInsets.left
            , y: safeAreaInsets.top + 44
            , width: ScreenWidth
            , height: 2)
        progressView.progressTintColor = UIColor.red
        progressView.trackTintColor = UIColor.clear
        self.view.addSubview(self.progressView)
    }

二、實現代理方法

extension TestViewController: WKNavigationDelegate
{
    
    // 監聽網頁加載進度
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        
        self.progressView.progress = Float(self.wkWebView.estimatedProgress)
    }
    
    // 頁面開始加載時調用
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        Log4jMessage(message: "開始加載...")
    }
    
    // 當內容開始返回時調用
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!){
        Log4jMessage(message: "當內容開始返回...")
    }
    
    // 頁面加載完成之后調用
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!){
        Log4jMessage(message: "頁面加載完成...")
        /// 獲取網頁title
        self.title = self.wkWebView.title
        
        UIView.animate(withDuration: 0.5) {
            self.progressView.isHidden = true
        }
    }
    
    // 頁面加載失敗時調用
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error){
        Log4jMessage(message: "頁面加載失敗...")
        UIView.animate(withDuration: 0.5) {
            self.progressView.progress = 0.0
            self.progressView.isHidden = true
        }
        /// 彈出提示框點擊確定返回
        let alertView = UIAlertController.init(title: "提示", message: "加載失敗", preferredStyle: .alert)
        let okAction = UIAlertAction.init(title:"確定", style: .default) { okAction in
            _=self.navigationController?.popViewController(animated: true)
        }
        alertView.addAction(okAction)
        self.present(alertView, animated: true, completion: nil)
    }
 
}

在下一章中將探討使用WkWebView與h5進行交互