WKWebView用法介紹
本文swift與WKWebView交互Demo地址
前言：蘋果在iOS8中推出了webkit新框架，提供了WKWebview組件用來替換存在各種問題的UIWebview,用WKWebview加載網頁，相較于UIWebview速度更快了，內存占用更少了。WKWebview還提供了更加豐富的接口，功能更加強大，剛學習swift4，代碼擼了一個swift4版與WKWebView交互，特此分享出來，與大家共勉
1.首先Xcode鏈接手機，運行項目工程，打開html界面，然后選中電腦上的safari的開發工具，打開html調試器。
還不會電腦調試html？看這里
使用safari對webview進行調試
項目運行成功，打開我們的調試器如圖
6B74B7D4-42C1-4DF2-A3A8-B913BD3B81B4.png
打開之后的界面
image.png
發現新大陸了，以后媽媽再也不用擔心我的成長了。
這里是以我的上線項目工程為例。大家可以看到上圖中的交互，開出的get_selection_txt()，get_share_txt()等幾個方法，這是我們蘋果端需要調用執行的代碼，細心的同學會看到方法內部做了一個判斷。沒錯就是判斷是android或者是蘋果端的代碼。我們暫且不討論android，主要看下蘋果端的這句代碼
window.webkit.messageHandlers.webViewApp.postMessage({get_selection_txt:rng_string});
從字面上可以看出，是前端向移動端發送命令的語句，這里注意下webViewApp，這是一個交互關鍵。需要提前和前端人員商量好命名規則。我們兩端都需要用到
2.到這里，前端的看的就差不多了，我們來看下swift版本的實現方法
image.png
image.png
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
}()
private lazy var progressView : UIProgressView = {
let pp = UIProgressView.init(frame: CGRect.init(x: 0, y: 64, width: view.frame.size.width, height: 2))
pp.tintColor = UIColor.blue
pp.backgroundColor = UIColor.lightGray
pp.transform = CGAffineTransform.init(scaleX: 1, y: 1)
return pp
}()
func Menu() -> Void {
let menu = UIMenuController.shared
let item = UIMenuItem.init(title: "劃重點", action: #selector(point))
let shareItem = UIMenuItem.init(title: "分享", action: #selector(share))
let copyItem = UIMenuItem.init(title: "拷貝", action: #selector(copyAction))
menu.menuItems = [item,shareItem,copyItem]
menu.arrowDirection = .default
menu.setTargetRect(articleWeb.bounds, in: articleWeb)
menu.setMenuVisible(true, animated: true)
}
.上圖中大家可以看到，用到了前端定義名稱webViewApp，實現交互
實現UIMenuController的點擊方法，因為本文主要講解交互，對于創建UIMenuController不做重點解析
image.png
@objc func point() {
articleWeb.evaluateJavaScript("get_selection()", completionHandler: nil)
}
@objc func share() {
articleWeb.evaluateJavaScript("get_selection_txt()", completionHandler: nil)
}
@objc func copyAction() {
articleWeb.evaluateJavaScript("window.getSelection().toString()") { (object, error) in
print(object!)
}
}
.這里實現了點擊方法，用到了上圖中前端定義好的方法。get_selection_txt()，get_selection()
3.細心的同學會發現，我有看到html往移動端發送數據啊。對。確實很多項目中很多情況下，都是我們調用前端方法，然后他們返回給我們數據我們再進行邏輯和處理。這里我們實現WKScriptMessageHandler這個代理方法，實現我們的需求。上代碼
image.png
extension ArticleDetialViewController: WKScriptMessageHandler{
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print(message.body)
}
}
