一、前言

我們之前有一篇《抓包工具 Charles》中，有告訴大家如何抓取 Https 的 App 數(shù)據(jù)，其中，Demo 給出了 JD 首頁的抓?。槐鞠盗姓n程開始時(shí)，我就說過，我們會(huì)針對 JD App 的模仿來學(xué)習(xí) iOS Swift5 的開發(fā)。

本篇沒有技術(shù)含量，不涉及到技術(shù)，僅分析 UI 和數(shù)據(jù)（不要吐糟我水文，為后面的 UI組件開發(fā)做鋪墊）。

二、首頁UI結(jié)構(gòu)分析

我們先來看一下 JD App 長的如何，如下圖：

jd-app-home.png

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

• 自定義導(dǎo)航欄；
• 類目導(dǎo)航欄；
• 輪播圖（Banner）；
• 小圖標(biāo)（豆腐塊）；
• 橫向滾動(dòng)條；
• 可吸頂分類導(dǎo)航欄；
• 瀑布流；

我們都知道，首頁非常重要，是最頂級的流量入口，因此，首頁會(huì)通過不同的 UI 組件，來盡可能多的、換著花樣的方式來向用戶展示推薦商品或者是爆款商品，除了以上 JD 用到的這些 UI 組件，還可以有其它 UI 組件（大家可以多看看不同的 App，如：天貓、PDD、愛奇藝、騰訊視頻等）。

三、抓包 & 數(shù)據(jù)分析

用 Charles 抓包后，我們拿到原始的請求，之后可以使用其它網(wǎng)絡(luò)請求工具，來反復(fù)請求該接口，這里，我用 postman 來模擬請求：

postman-get-jd-home-data.png

該工具，可以將返回的 JSON 美化，方便我們查看數(shù)據(jù)結(jié)構(gòu)和字段。

之前我就說了，會(huì)吐糟 JD App 的首頁接口返回的數(shù)據(jù)結(jié)構(gòu)，簡直是『目瞪狗呆』！為啥這么說，請看我來分析（特意開一篇來吐糟）：

jd-home-response.png

上圖中，我們可以看到 floorList 是一個(gè)對象數(shù)組：

第一個(gè)對象，就是我們說的類目導(dǎo)航欄，其中有個(gè) content 字段，也是一個(gè)對象數(shù)組；

topTab.png

接下來，我們分析第二個(gè)對象，它是輪播圖（Banner）：

banner.png

我們跳過第三對象，分析第四個(gè)對象，它就是小圖標(biāo)（豆腐塊），其中 content 字段，類型變成了對象，而不是對象數(shù)組；

block-img.png

好了，后面的我不想分析了，分析暫時(shí)到此，為何？

因?yàn)?，?dāng)初我分析了前兩個(gè)對象（第一、二）后，竟然天真的以為所有的對象中 content 字段都會(huì)是對象數(shù)組，然后，我去反序列化時(shí)，直接報(bào)錯(cuò)，我就很奇怪，對我定義的接收 model 做減法，最終定位到 content 字段有問題，然后，依次看了 floorList 的數(shù)據(jù)，才發(fā)現(xiàn)真相（我表示，負(fù)責(zé) JD 首頁的程序猿是有多么的悲哀）；然而，轉(zhuǎn)念一想，其實(shí)我可能錯(cuò)了，大公司是分垂直業(yè)務(wù)線的，因此，會(huì)有多個(gè)垂直業(yè)務(wù)團(tuán)隊(duì)（產(chǎn)品、運(yùn)營、研發(fā)、測試等），所以，首頁也就是這些垂直團(tuán)隊(duì)的必爭之地，因此，首頁接口可能只是聚合了這幾個(gè)業(yè)務(wù)團(tuán)隊(duì)的接口，App端也是由相應(yīng)的業(yè)務(wù)團(tuán)隊(duì)自己負(fù)責(zé)，而不是如小公司一樣，由一人負(fù)責(zé)。

本篇分析到此，先暫時(shí)和大家說再見，下一篇開始，我們將進(jìn)入組件化的開發(fā)、然后再集成在一起，用真實(shí)的數(shù)據(jù)將所有的 UI組件竄起來展示最終的效果。