Swift.WKWebView与Html文件的JS交互

效果图

实现效果:

以最简单的形式与最简单的demo来实现WKWebView与HTML文件的JS交互方式.

包括Swift调用JS方法以及JS调用Swift原生方法.并传递各种类型参数

实现在控制台打印JS中的Console.log内容.

---

1.添加WeakScriptMessageDelegate文件,用其作为与JS交互时的代理,防止出现ViewController不释放的问题.

import UIKit
import WebKit
///内存管理,使用delegate类防止ViewController不释放
class WeakScriptMessageDelegate: NSObject, WKScriptMessageHandler {
    weak var scriptDelegate: WKScriptMessageHandler?
    init(_ scriptDelegate: WKScriptMessageHandler) {
        self.scriptDelegate = scriptDelegate
        super.init()
    }
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        scriptDelegate?.userContentController(userContentController, didReceive: message)
    }
    deinit {
        print("WeakScriptMessageDelegate is deinit")
    }
}

2.声明WKWebView,并注册与JS交互的名称.

   lazy var webView: WKWebView = {
        ///偏好设置
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true

        let configuration = WKWebViewConfiguration()
        configuration.preferences = preferences
        configuration.selectionGranularity = WKSelectionGranularity.character
        configuration.userContentController = WKUserContentController()
        // 给webview与swift交互起名字，webview给swift发消息的时候会用到
        configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "logger")
        configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "redResponse")
        configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "blueResponse")
        configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "greenResponse")
        configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "yellowResponse")

        var webView = WKWebView(frame: CGRect(x: 0,
                                              y: 0,
                                              width: UIScreen.main.bounds.width,
                                              height: UIScreen.main.bounds.height),
                                configuration: configuration)
        // 让webview翻动有回弹效果
        webView.scrollView.bounces = false
        // 只允许webview上下滚动
        webView.scrollView.alwaysBounceVertical = true
        webView.navigationDelegate = self
        return webView
    }()

3.Html文件样式

  

    
        
            
            
    
        名字：
        

        红色
        蓝色
        绿色
        黄色
        
        
        
    

4.实现调用JS方法

让控制器实现WKNavigationDelegate协议

extension ViewController: WKNavigationDelegate{
    ///在网页加载完成时调用js方法
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("sayHello('js你好,我是从Swift传来的')", completionHandler: nil)
    }
}

5.接收JS调用方法

让控制器实现WKScriptMessageHandler协议

 extension ViewController: WKScriptMessageHandler{
    ///接收js调用方法
    func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage) {
        ///在控制台中打印html中console.log的内容,方便调试
        let body = message.body
        if message.name == "logger" {
            print("JS log:\(body)")
            return
        }
        ///message.name是约定好的方法名,message.body是携带的参数
        switch message.name {
        case "redResponse":
            ///不接收参数时直接不处理message.body即可,不用管Html传了什么
            redRequest()
        case "blueResponse":
            blueRequest(string: message.body as! String)
        case "greenResponse":
            greenRequest(int: message.body as! Int)
        case "yellowResponse":
            yellowRequest(array: message.body as! [String])
        default:
            break
        }
    }
}

---

截止以上功能已经全部实现,接下来讲一下与h5协同调试时很重要一部分,就是打印出JS方法中console.log的内容,这样才能即时的,直观的了解交互情况.安卓方面自带了这个功能,但是WKWebView需要我们与H5同时添加代码才能够实现.

1.在html文件中声明console