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