首页 > 其他分享 >swift之与h5之间的交互(一)

swift之与h5之间的交互(一)

时间:2024-03-07 10:23:44浏览次数:17  
标签:swift self 高度 headHtml h5 append 适配 交互 wkWebView

相信很多小伙伴会遇到这种问题,就是一个商品的售卖的页面下会有一个未知高度的图文介绍,今天就浅谈一下这个功能:

 

整个页面以一个tableView进行实现,图文详情这块主要是拿到后台给到的html进行渲染,然后根据渲染后的页面高度再做适配(h5页面适配手机)

主体思路:

1.在tableViewFootView里搭建好视图以及webview

wkWebView = WKWebView()
wkWebView.navigationDelegate = self
wkWebView.uiDelegate = self
wkWebView.scrollView.showsVerticalScrollIndicator = false
wkWebView.scrollView.bounces = false
wkWebView.scrollView.isScrollEnabled = false
//这里的footBackView是嵌套了一层=>方便外界直接修改footView的高度 footBackView.addSubview(wkWebView)
//wkWebView布局的代码用的是snapkit这里不在详情赘述


private func filterMethod(urlStr: String) -> String { let headHtml = NSMutableString.init(capacity: 0) headHtml.append("<html>") headHtml.append("<head>") headHtml.append("<meta charset=\"utf-8\">") headHtml.append("<meta id=\"viewport\" name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=false\" />") headHtml.append("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />") headHtml.append("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />") headHtml.append("<meta name=\"black\" name=\"apple-mobile-web-app-status-bar-style\" />") headHtml.append("<style>img{max-width:100%;width:auto;height:auto}</style>") var bodyStr : String = String(headHtml) bodyStr.append(urlStr) return bodyStr }
//以上这个方法主要作用是根据html的内容适配好各类手机宽高(model.introduction表示后台给的html数据)
self.wkWebView.loadHTMLString(self.filterMethod(urlStr: model.introduction ?? ""), baseURL: nil)


//3.高度计算并刷新footView,在wkwebView代理方法里拿到高度并重新计算整个tabView的高度
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    var webheight = 0.0
    // 获取内容实际高度
    webView.evaluateJavaScript("document.body.scrollHeight") { [unowned self] (result, error) in
      if let tempHeight: Double = result as? Double {
        webheight = tempHeight//这里是获取到内容高度
      }
          //延迟更新高度
          DispatchQueue.main.async { [unowned self] in
                //这里可以更新tableViewfootView的高度,这个时候只需要改变footBackView的高度,然后重新给tableViewfootView赋值,xib的话可以通过
footView.systemLayoutSizeFitting(CGSize(width: pagingView.width, height: CGFloat.greatestFiniteMagnitude), withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)的方式进行高度适配
} } }

以上内容就是这些,有问题欢迎讨论或留言

 

标签:swift,self,高度,headHtml,h5,append,适配,交互,wkWebView
From: https://www.cnblogs.com/wm941142146/p/18058196

相关文章

  • 谈 电网建设高交互蜜罐的困境在哪里
     晚上改文字发现有些思路是不充分的,把论文中的一个点截取出现,顺便整理下自己的思路。工控蜜罐的定位应该算是比较清楚的,可以根据不同行业需求做定制化的蜜罐。高交互工控蜜罐耗费大量资源,维护成本较高。且这类蜜罐为了构建真实运行的仿真环境,往往需要引入实物系统或设备。工业控......
  • ubuntu搭建swift开发环境
    ubuntu搭建swift开发环境安装homebrew:https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/通过homebrew安装swift安装homebrew新建setup_homebrew_env.sh​#!/bin/bashexportHOMEBREW_INSTALL_FROM_API=1exportHOMEBREW_API_DOMAIN="https://mirrors.tuna.tsinghua.......
  • 使用H5 实现 websocket 实现视频通讯 延迟较大
    发送端<div><canvasid="canvas"></canvas><videoid="srcvideo"></video></div><divid="xs"></div><buttonid="startBtn"onclick="setRecorder(format);&qu......
  • 手机H5考试页面
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/><metaname="appl......
  • 基于SWIFT和Qwen1.5-14B-Chat进行大模型全参微调测试
    基于SWIFT和Qwen1.5-14B-Chat进行大模型全参微调测试环境准备基础环境操作系统:Ubuntu18.04.5LTS(GNU/Linux3.10.0-1127.el7.x86_64x86_64)Anaconda3:Anaconda3-2023.03-1-Linux-x86_64根据服务器网络情况配置好conda源和pip源,此处使用的是超算山河源服务器硬件配置:CPU......
  • 神舟通用数据库安装(交互方式)
    环境:OS:Centos7DB:V71.介质下载地址http://www.shentongdata.com/old_bak/iso/wzsyx/ShenTong7.0_linux64.rar 2.安装rar[root@localhostsoft]#tar-xvfrarlinux-x64-5.3.0.tar.gz[root@localhostsoft]#cdrar[root@localhostrar]#makeinstall3.解压数据库安装包[r......
  • Vivado DDR4, BRAM与定点数加法模块交互调试
    VivadoDDR4,BRAM与定点数加法模块交互调试一、实验目的在上一实验《VivadoDDR4和BRAM交互调试经验分享-George2024-博客园(cnblogs.com)》的基础上,加入定点数加法这一功能模块,搭建一个最小的系统,实现DDR4,BRAM和功能模块的交互。相关代码已经发布在《GeorgeLin200100/F......
  • linux之whiptail交互式shell脚本对话框
    简单说明当你在linux环境下setup软件的时候就会有相应的对话框让你输入。虽然我们已经习惯了这种交互的方法,但是如果有一种直观的界面来输入是不是会更加友好和方便呢,在shell脚本中你可以使用-whiptail指令来完成。效果如下[root@~]#cattest.sh#!/bin/bashOPTION=$(whiptai......
  • uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
    uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法:https://blog.csdn.net/qq_37860634/article/details/131226906?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170917383916800225594144%2522%252C%2522scm%2522%253A%252220140713.130102334.pc......
  • IOS内嵌H5从第三方页面返回之后无法点击
    前言苹果手机左滑返回上一页,但是我们开发的app出现跳转支付宝想返回充值页,手滑返回上一页之后出现无法点击本页按钮的情况。我们的测试同学很笃定是我h5界面的问题,一直催着我改,在经过我们IOS同学的帮助下,发现他在webView里面写的代码导致的冲突。[webViewevaluateJavaScri......