iOS开发 - 加载HTML字符串并显示样式

iOS加载Html富文本字符串，并按标签显示样式。

"<p style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57);\"><strong>红色加粗红色加粗红色加粗红色加粗红色加粗<\/strong><\/span><\/p><p style=\"text-align: center;\"><strong>加粗加粗加粗加粗加粗加粗加粗加粗加粗加粗<\/strong><\/p><p style=\"text-align: center;\"><span style=\"background-color: rgb(233, 233, 233);\">底色底色底色底色底色底色底色底色底色底色<\/span><\/p><p style=\"text-align: center;\"><em>斜体斜体斜体斜体斜体斜体斜体斜体斜体斜体<\/em><\/p><p style=\"text-align: center;\"><em>斜体abcdefghigklmnopqabcdefghigkl斜体<\/em><\/p><p style=\"text-align: center;\"><em>斜体ABCDEFGHIGKLMNABCDEFGHIG斜体<\/em><\/p><p style=\"text-align: center;\"><s>删除线删除线删除线删除线删除线删除线删除线<\/s><\/p><p style=\"text-align: center;\"><u>下划线下划线下划线下划线下划线下划线下划线<\/u><\/p><p style=\"text-align: center; line-height: 2.5;\">增加行高增加行高增加行高增加行高增加行高<\/p><p style=\"text-align: center;\"><span style=\"font-size: 24px;\">加大字号加大字号加大字号<\/span><\/p><p style=\"text-align: center;\">😀😃👏🤛😂😊😙😒😩🤗🤑🙌🤞✋🙏<\/p>"

一、用TextView显示attributedText：

1. 新建TextView：

    lazy var contentView: UITextView = {
        let view = UITextView(frame: .zero)
        view.backgroundColor = .F_2_F_3_F_5
        view.textContainer.lineFragmentPadding = 0
        view.textAlignment = .center
        view.textContainerInset = .zero
        view.font = .systemFont(ofSize: 16)
        view.showsVerticalScrollIndicator = false
        view.showsHorizontalScrollIndicator = false
        view.isEditable = false
        return view
    }()

2. 为TextView赋值：

        let versionText = updateModel?.updateContent
        if let data = versionText?.data(using: .unicode) {
            do {
                let attributedString = try NSAttributedString(data: data,
                                                              options: [.documentType: NSAttributedString.DocumentType.html],
                                                              documentAttributes: nil)
                contentView.attributedText = attributedString
            } catch {
                print("转换出错: \(error)")
            }
        }

• 优点：可以设置背景色，适配原生页面
• 缺点：中文斜体有问题，其他可正常显示
• 效果：

二、用WKWebView显示：

1. 新建webView：（解决移动端展示的字号小于后端设置的问题）

     lazy var webView: WKWebView = {
        let jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
        let wkUScript = WKUserScript.init(source: jScript, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: true)
        let wkUController = WKUserContentController.init()
        wkUController.addUserScript(wkUScript)
        let wkWebConfig = WKWebViewConfiguration.init()
        wkWebConfig.userContentController = wkUController
        let webView = WKWebView(frame: .zero, configuration: wkWebConfig)
        return webView
    }()

OC版本：

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
      WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
      WKUserContentController *wkUController = [[WKUserContentController alloc] init];
      [wkUController addUserScript:wkUScript];
      WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
      wkWebConfig.userContentController = wkUController;
      WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];
      [self.view addSubview:webView];

2. 加载HTML字符串

webView.loadHTMLString(versionText, baseURL: nil)

• 有点：标签样式显示完整
• 缺点：背景色由标签控制，不能自由控制
• 效果：