WKWebView用法介紹
本文swift與WKWebView互動Demo位址
前言：蘋果在iOS8中推出了webkit新架構，提供了WKWebview元件用來替換存在各種問題的UIWebview,用WKWebview加載網頁，相較于UIWebview速度更快了，記憶體占用更少了。WKWebview還提供了更加豐富的接口，功能更加強大，剛學習swift4，代碼撸了一個swift4版與WKWebView互動，特此分享出來，與大家共勉
1.首先Xcode連結手機，運作項目工程，打開html界面，然後選中電腦上的safari的開發工具，打開html調試器。
還不會電腦調試html？看這裡
使用safari對webview進行調試
項目運作成功，打開我們的調試器如圖
打開之後的界面
發現新大陸了，以後媽媽再也不用擔心我的成長了。
這裡是以我的上線項目工程為例。大家可以看到上圖中的互動，開出的get_selection_txt()，get_share_txt()等幾個方法，這是我們蘋果端需要調用執行的代碼，細心的同學會看到方法内部做了一個判斷。沒錯就是判斷是android或者是蘋果端的代碼。我們暫且不讨論android，主要看下蘋果端的這句代碼
從字面上可以看出，是前端向移動端發送指令的語句，這裡注意下webViewApp，這是一個互動關鍵。需要提前和前端人員商量好命名規則。我們兩端都需要用到
2.到這裡，前端的看的就差不多了，我們來看下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
}()
private lazy var progressView : UIProgressView = {
let pp = UIProgressView.init(frame: CGRect.init(x: , y: , width: view.frame.size.width, height: ))
pp.tintColor = UIColor.blue
pp.backgroundColor = UIColor.lightGray
pp.transform = CGAffineTransform.init(scaleX: , y: )
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不做重點解析
@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這個代理方法，實作我們的需求。上代碼
extension ArticleDetialViewController: WKScriptMessageHandler{
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print(message.body)
}
}