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学习路上的小伙伴
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值