iOS Swift5从0到1系列（十一）：JD首页UI结构 &

一、前言

我们之前有一篇《抓包工具 Charles》中，有告诉大家如何抓取 Https 的 App 数据，其中，Demo 给出了 JD 首页的抓取；本系列课程开始时，我就说过，我们会针对 JD App 的模仿来学习 iOS Swift5 的开发。

本篇没有技术含量，不涉及到技术，仅分析 UI 和数据（不要吐糟我水文，为后面的 UI组件开发做铺垫）。

二、首页UI结构分析

我们先来看一下 JD App 长的如何，如下图：

jd-app-home.png

上图未完全展示所有的元素，大家如果有 JD App，可以自行打开查看：

• 自定义导航栏；
• 类目导航栏；
• 轮播图（Banner）；
• 小图标（豆腐块）；
• 横向滚动条；
• 可吸顶分类导航栏；
• 瀑布流；

我们都知道，首页非常重要，是最顶级的流量入口，因此，首页会通过不同的 UI 组件，来尽可能多的、换着花样的方式来向用户展示推荐商品或者是爆款商品，除了以上 JD 用到的这些 UI 组件，还可以有其它 UI 组件（大家可以多看看不同的 App，如：天猫、PDD、爱奇艺、腾讯视频等）。

三、抓包 & 数据分析

用 Charles 抓包后，我们拿到原始的请求，之后可以使用其它网络请求工具，来反复请求该接口，这里，我用 postman 来模拟请求：

postman-get-jd-home-data.png

该工具，可以将返回的 JSON 美化，方便我们查看数据结构和字段。

之前我就说了，会吐糟 JD App 的首页接口返回的数据结构，简直是『目瞪狗呆』！为啥这么说，请看我来分析（特意开一篇来吐糟）：

jd-home-response.png

上图中，我们可以看到 floorList 是一个对象数组：

第一个对象，就是我们说的类目导航栏，其中有个 content 字段，也是一个对象数组；

topTab.png

接下来，我们分析第二个对象，它是轮播图（Banner）：

banner.png

我们跳过第三对象，分析第四个对象，它就是小图标（豆腐块），其中 content 字段，类型变成了对象，而不是对象数组；

block-img.png

好了，后面的我不想分析了，分析暂时到此，为何？

因为，当初我分析了前两个对象（第一、二）后，竟然天真的以为所有的对象中 content 字段都会是对象数组，然后，我去反序列化时，直接报错，我就很奇怪，对我定义的接收 model 做减法，最终定位到 content 字段有问题，然后，依次看了 floorList 的数据，才发现真相（我表示，负责 JD 首页的程序猿是有多么的悲哀）；然而，转念一想，其实我可能错了，大公司是分垂直业务线的，因此，会有多个垂直业务团队（产品、运营、研发、测试等），所以，首页也就是这些垂直团队的必争之地，因此，首页接口可能只是聚合了这几个业务团队的接口，App端也是由相应的业务团队自己负责，而不是如小公司一样，由一人负责。

本篇分析到此，先暂时和大家说再见，下一篇开始，我们将进入组件化的开发、然后再集成在一起，用真实的数据将所有的 UI组件窜起来展示最终的效果。