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

HelloWorld杰少

发布于 2022-08-04 14:12:15

1.2K0

前言

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

调研分析

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

image

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

image

其中就有“首页发现” 和 “首页-发现-圆形图标入口列表” 的 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 的方式应该来说再合适不过了。

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