swift4 - wkwebview交互

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)

    }
}

有兴趣的同学，可以下载文章顶部的demo进行调试，打印print(message.body)，里边的数据即是前端传递给我们的数据。是不是很简单呢

。OC版的如果小伙伴们有需要可以私信或者下方评论我会尽快出一个oc版的wkwebview交互

本文swift与WKWebView交互Demo地址

献给所有和我一起奋斗在swift4学习路上的小伙伴