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没反应,重写方法时,里面不写任何代码即可。