手把手带你撸一个网易云音乐首页（一）

前言

Hello，大家好，近期我一直在学习用 Swift 编码，由于之前很多项目我都是用 OC 实现的，所以导致我现在对 Swift 还是处于一个学习的阶段中。为了提高自己的学习效率，每次我都会为自己定下一个短期的目标，就那这次来说吧，为了加快自己上手 Swift, 我为自己定下了的目标就是完成一个 Swift 版本的网易云音乐 App。不知道大家在学习一门新语言的时候，是如何提高学习效率的？不妨在评论区与大家交流一下。

调研分析

先分析一下 iOS 端网易云音乐 App 的首页，如图所示：

看完后，首先摆在我眼前的第一个困难就是我该如何去获取这些数据！我的第一个想法当然就是去 GitHub 上找有没有开源的 API，不找不知道，一找果然很满意，原来早就有大佬提供了网易云音乐的 API：

其中就有“首页发现” 和 “首页-发现-圆形图标入口列表” 的 API, 无需我们进行多个接口的调用以及数据源的拼接，就可一获取首页的全部数据啦！在分析返回的 JSON 数据格式的时候，还给大佬提了个issue，大佬也很快的回复了，再次膜拜一下大佬。

{
    "code": 200,
    "data": {
        "cursor": null,
        "blocks": [
            {
                "blockCode": "HOMEPAGE_BANNER",
                "showType": "BANNER",
                "extInfo": {
                    "banners": [
                        {
                            "adLocation": null,
                            "monitorImpress": null,
                            "bannerId": "1622653251261138",
                            "extMonitor": null,
                            "pid": null,
                            "pic": "http://p1.music.126.net/gWmqDS3Os7FWFkJ3s8Wotw==/109951166052270907.jpg",
                            "program": null,
                            "video": null,
                            "adurlV2": null,
                            "adDispatchJson": null,
                            "dynamicVideoData": null,
                            "monitorType": null,
                            "adid": null,
                            "titleColor": "red",
                            "requestId": "",
                            "exclusive": false,
                            "scm": "1.music-homepage.homepage_banner_force.banner.2941964.-1777659412.null",
                            "event": null,
                            "alg": null,
                            "song": {
                
                ......
}

数据源的问题解决了，接下来就是该解决如何将数据可视化了，从网易云音乐首页展示的效果分析来看，整体的视图支持上下滚动，其中单个 Cell 的视图支持横向滚动，所以这里采用 UITableView 嵌套 UICollectionView 的方式应该来说再合适不过了。

剩下的就是需要用到的一些第三方库了，在这里我们用到的第三方库如下：

• Alamofire

• Kingfisher

• SnapKit

需要实现的功能

它的首页内容大致可以分为以下几部分：

1. 顶部搜索视图
2. Banner
3. 圆形菜单按钮
4. 推荐歌单
5. 个性推荐
6. 精选音乐视频
7. 雷达歌单
8. 热门播客
9. 专属场景歌单
10. 新歌，新碟，数字专辑
11. 音乐日历
12. 24小时播客
13. 视频合辑

支持 light Mode 和 Dark Mode 主题

这里先放上我最终实现好了的效果图：

具体的实现细节我会在下篇文章中阐述，功能会按照我上述列出来的功能顺序来一一实现的，同时我也会将该工程的代码放在GitHub仓库上，欢迎各位点个⭐️支持一下。

最后

因为该工程功能的代码量比较多，所以我会将文章分成三部分，尽可能的突出每篇文章的重点，如果我的文章对你有帮助，请点个赞支持我一下。