Swift5+WkWebView实现APP嵌套H5页面

---

---

前言

本教程主要是为了记录我用Swift5，通过wkwebview嵌套H5页面的步骤。之所以会写，也是因为我在使用的过程中，遭受了很大的阻力，前后用了一个多月的时间才整明白。因国内关于这方面的资料实在太少了，有的博客也是写的很晦涩难懂，对我这种毫无ios开发基础的人来说，简直是天方夜谭，因为我不懂oc、也不懂swift5之前的语法，看起来很是困难，所以很多也是问来问去，因此，我写下这篇文章做总结，方便其他要实现这一目的的国内程序员查看。我是Java程序员，公司需要临时学的Swift5，在各大博客上面学的，有些杂，写的代码也是为了交付任务而写，因而可能代码规范不像正式的IOS工程师那么规范和工整，不过思路和方法是可以借鉴的，仔细阅读本文章，相信你一定能对如何在APP里使用Swift5嵌套H5页面有很不错的了解。总之，希望也能对看到这篇文章的你有一点帮助，这就是我写这篇文章的意义。哦，对了，对于重点的地方，我也会强调在注释中写明”重点“，所以如果效果没达到，可以重新查阅本文章，看看那些我标明了重点的地方。还有最后一点，我会持续更新本文章，在底部会有更新日志可以查看，可以点个关注支持一下的话就很感谢各位了~

---

一、Swift5和JS交互

1、类型一：有返回值

js调用方式
这个getStatusBarHeight字符串可以当作变量名字，具体可以自己定。

let height = window.prompt("getStatusBarHeight")
console.log(height) // 24

swift实现样例
重写prompt方法

func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
    let body:String = prompt.description
    if(body == "getStatusBarHeight"){
        // 状态栏高度
        let statusHeight  = isIphoneX() ? "24" : "0"
        completionHandler(statusHeight)
    }
}

2、类型二：无返回值

js调用方式

window.webkit.messageHandlers.IosDevices.postMessage({"method": "back"})

swift实现样例

override func loadView() {
    let configuration=WKWebViewConfiguration()
    let userContentController = WKUserContentController.init()
    //重点，一定要注册IosDevices事件名称，其余的事件也是如此注册，只需要继续添加userContentController.add(self, name: "事件名称")语句即可。
    userContentController.add(self, name: "IosDevices")
    configuration.userContentController = userContentController
    webView = WKWebView(frame: .zero,configuration: configuration)
}

//重写事件处理
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    let name = message.name
    if name == "IosDevices" {
        let body:[String:Optional] = message.body as! [String : Optional<Any>]
        let method:String = body["method"] as! String
        if body["method"] == "back" {
            if(webView.canGoBack) {
                webView.goBack()
            }
        }
    }
}

3、app回调js方法

假设文件下载成功时回调
js定义回调函数

window.onIosDownSuccess = function(filePath){
    console.log(filePath) // /Documents/1.txt
}

swift实现样例

let filePath = "/Documents/1.txt" //此处是假设文件下载后存储的路基，具体请自行实现
DispatchQueue.main.async {
    self.webView.evaluateJavaScript("onIosDownSuccess('\(filePath)')") { (data, err) in
        //调用成功后处理逻辑
    }
}

二、Swift5修改JS的window.alert行为

重写原因：在Android中的webview如果不重写该方法，alert将没有任何效果，但是在ios上又会出现，而且在开发的过程中有时还是需要用到该方法的

IOS实现

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
   let alertViewController = UIAlertController(title: nil, message:message, preferredStyle: UIAlertController.Style.alert)
   alertViewController.addAction(UIAlertAction(title: "确认", style: UIAlertAction.Style.default, handler: { (action) in
        completionHandler()
    }))
    self.present(alertViewController, animated: true, completion: nil)
}

如果想要alert没反应，重写方法时，里面不写任何代码即可。

更新日志

2022-10-25 11:15 新建文章，添加Swift5与JS交互实现教程

2022-10-27 14:28 Swift5修改JS的window.alert行为