[ios]ios通过webview加载文章（连载4）

debug_cat

国际惯例，先上效果图


go~

001：https://www.52pojie.cn/forum.php?mod=viewthread&tid=1383664&page=1&extra=#pid37203646
002：https://www.52pojie.cn/forum.php?mod=viewthread&tid=1384504&page=1&extra=#pid37221643
003：https://www.52pojie.cn/forum.php?mod=viewthread&tid=1384983&page=1&extra=#pid37232297

wkWebView使用

前2篇文章我们加载了公众号的列表文章的列表。当我们点击文章的时候，需要打开文章详情进行浏览。

今天我们就简单使用wkwebview来加载文章。

• 控制器的代码，也就是我们页面。

  接受前一个页面传递过来的文章url地址。

  然后设置webview的大小是页面的安全区内。

//
//  ArticleWebViewController.swift
//  uitable
//
//  Created by Alice on 2021/3/7.
//

import Foundation
import UIKit
import SnapKit
import WebKit
//显示文章详情的页面
class ArticleWebViewController: UIViewController {

    var articleUrl = ""

    private lazy var webView: WKWebView = {
        let web = WKWebView(frame: .zero)
        return web
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "文章详情"
        view.addSubview(webView)
        webView.snp.makeConstraints { (make) in
            make.width.equalToSuperview()
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
        }
        //打开网页
        let urlPath = URL(string: articleUrl)
        let request = NSMutableURLRequest(url: urlPath!)
        webView.load(request as URLRequest)
    }
}

• 前一个页面tabview设置点击事件，把文章的地址传递过新的页面中

  //文章的点击事件
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        //关闭点击的灰色背景
        tableView.deselectRow(at: indexPath, animated: false)
        //点击文章的时候,进入文章详情中
        let web = ArticleWebViewController()
        //把数据中对应的文章的链接取出,设置到文章详情中的属性articleUrl中
        web.articleUrl = articleList[indexPath.row].link
        self.navigationController?.pushViewController(web, animated: true)
    }

到此，就完成了，作者，文章列表，文章详情的查看。简单的一个demo。

从这个demo中，我们学会了什么？

1：页面之间跳转，以及页面之间传递数据

2：请求网络的数据

3：网络数据转模型保存

4：UI布局，就是如何摆放控件的位置（snapkit）使用

5：uitableview的学习，如果加载数据数据转>列表显示

6：列表显示点击默认有灰色背景，如何去除

7：webview加载url

这些都不是一步就能完成的，回顾下事件的驱动。

我需要加载列表，我需要数据，用什么工具获得数据？Alamofire

数据加载完成，怎么转模型？ObjectMapper

显示多个数据，可以滑动的列表是什么？UITableView

如何布局ui，如何显示文本，如何显示图片？==，以此类推。自己去寻找答案。

寻找答案方式很多，比如最基本的就是百度，Google，==很多。还有问群大神，还有朋友==。

只要你不是不动手，主动点，都可以得到答案，重要的是，你想解决这个问题吗。

---

这个简单的demo，就到此了。

接下来的计划：

底部多个tab，类似于微信的底部那种效果实现

做到了，就会分享给大家，然后打开下一个计划。

以上

---

代码地址：

https://github.com/cat13954/IOSUiTableViewSample

如果对你有帮助，记得GitHub star哦

NvidiaChina

前排围观一下

o油条豆腐脑o

{:1_926:前排围观一下