前言

本教程主要是为了记录我用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.descriptionif(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 = userContentControllerwebView = WKWebView(frame: .zero,configuration: configuration)
}//重写事件处理
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {let name = message.nameif name == "IosDevices" {let body:[String:Optional] = message.body as! [String : Optional<Any>]let method:String = body["method"] as! Stringif 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) incompletionHandler()}))self.present(alertViewController, animated: true, completion: nil)
}

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

更新日志

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

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

Swift5+WkWebView实现APP嵌套H5页面相关推荐

app 嵌套h5页面问题
1.app与h5页面方法监听与参数传递 2.Android webview 如何打开本地存储,提供给JS调用 html5 的lwindow.localStorage功能,还有其他的权限 3.Andro ...
app嵌套h5，h5的处理
app嵌套h5,性能提升,举例:app端点击文章列表,跳转到h5的文章详情,首先h5需要app传文章id h5前期工作 vue-cli搭建环境,配置路由,跑起来之后做相应的页面对相应的页面进行处理 ...
在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
app嵌套h5，ios下去掉上下橡皮筋的效果（上下回弹）
app嵌套h5,ios下去掉上下橡皮筋的效果(上下回弹) 如果是前端自己解决的话会非常的费劲,我今天跟app开发的沟通了一下,他们很快的就解决了,所以直接用原生解决就行,不要下功夫找各种解决方法,到最 ...
微信小程序嵌套h5页面，h5页面返回小程序，小程序和h5的页面和交互方法，h5点击分享小程序页面
相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.goo ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
vue为app做h5页面，如何做到同域名对应不同版本的h5代码
1.当我们在做混合开发的时候,app端可以有无数多个版本,一般情况h5页面只有一套代码.应该如何部署多套代码呢? 2.业务场景当出现这种情况的时候,其实前端可以部署多套代码.比如: www.stat ...
小程序嵌套h5页面_微信小程序内嵌h5页面
概况使用标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
在微信中分享下载APP或H5页面如何做好域名防封
很多情况下H5作为微信推广裂变的一种方式,特别是在QP.BC.CP方面的效力,得到特别多的关注和应用,且有些商家通过H5页面搭建虚假红包链接.跳转APP,甚至出现恶意传播来获取关注,造成了特别的大的影 ...

Swift5+WkWebView实现APP嵌套H5页面