swift之與h5之間的互動（一）

哇哈爽發表於2024-03-07
SwiftH5

相信很多小夥伴會遇到這種問題，就是一個商品的售賣的頁面下會有一個未知高度的圖文介紹，今天就淺談一下這個功能：

整個頁面以一個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這裡不在詳情贅述　

2.渲染頁面進行適配

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)的方式進行高度適配
} } }

相關文章