18.4 实现新闻详情页展示

构建新闻详情视图

实现新闻详情页是用户体验的关键一环。你将创建一个全新的 UIViewController 来承载新闻的详细内容。这个控制器将包含一个 WKWebView，它是展示富文本和网页内容的强大工具。🚀

首先，你需要确保 WKWebView 能够正确加载新闻的完整URL。

配置WKWebView

WKWebView 的配置至关重要，它决定了网页内容的呈现方式。你将设置其代理，以便能够监听网页加载的进度和状态。这不仅能提升用户体验，还能让你在加载过程中显示加载指示器。

初始化 WKWebView: 在 viewDidLoad 中实例化 WKWebView 并将其添加到视图层级。
设置约束: 使用 Auto Layout 为 WKWebView 设置约束，确保它能完美填充整个屏幕。
加载URL: 获取新闻详情的URL，并使用 load(URLRequest(url: newsURL)) 方法加载内容。

swift

import WebKit

class NewsDetailViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    var newsURL: URL?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        loadNewsContent()
    }

    func setupWebView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view.addSubview(webView)

        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }

    func loadNewsContent() {
        guard let url = newsURL else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

处理导航事件

作为 WKNavigationDelegate，你将能够拦截和处理 WKWebView 的导航事件。这包括页面开始加载、加载完成、加载失败等状态。你可以利用这些回调来：

显示加载指示器: 在 webView(_:didStartProvisionalNavigation:) 中显示一个 UIActivityIndicatorView。
隐藏加载指示器: 在 webView(_:didFinish:) 和 webView(_:didFail:withError:) 中隐藏它。
错误处理: 当加载失败时，你可以向用户显示友好的错误信息。

传递新闻数据

从新闻列表页跳转到详情页时，你需要将选中的新闻数据（特别是新闻的完整URL）传递给 NewsDetailViewController。这通常通过以下方式实现：

属性注入: 在 NewsDetailViewController 中定义一个 newsURL 属性。
在 prepare(for:sender:) 中设置: 在新闻列表页的 prepare(for:sender:) 方法中，获取目标控制器实例并设置其 newsURL 属性。

例如，在你的 UITableViewDelegate 方法中：

swift

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let selectedNews = newsItems[indexPath.row]
    let detailVC = NewsDetailViewController()
    detailVC.newsURL = URL(string: selectedNews.fullContentURL) // 假设你的新闻模型有 fullContentURL
    navigationController?.pushViewController(detailVC, animated: true)
}

优化用户体验

为了提供卓越的用户体验，你可以进一步优化新闻详情页：

添加分享按钮: 允许用户轻松分享新闻内容。
自定义导航栏: 根据新闻标题动态更新导航栏标题。
进度条: 使用 WKWebView 的 estimatedProgress 属性显示一个加载进度条，让用户了解加载状态。这能显著提升用户满意度，研究表明，清晰的进度反馈能将用户等待的感知时间缩短约15%。📈
离线阅读提示: 如果新闻内容已缓存，可以提示用户当前正在离线阅读。

通过这些细致的实现，你将构建一个功能完善且用户友好的新闻详情页！✨

18.4 实现新闻详情页展示 ​

构建新闻详情视图 ​

配置WKWebView ​

处理导航事件 ​

传递新闻数据 ​