iOS-HTML交互学习笔记（一）-内容概述

案例学习-网易新闻详情页实现

• 技术实现方式：webView加载html
• 数据来源：抓网易应用数据

准备工作

• 网易新闻应用
• Charles（青花瓷）下载地址

数据抓包

设备手机连接WiFi需和电脑连接同一WiFi

• Charles配置
  选择Proxy->Proxy Settings，Port为8888（默认）可修改，勾选Enable transparent HTTP proxying，如下图

Charles配置.png

• 手机设备
  进入无线局域的配置，在HTTP代理项里选择手动，配置服务器ip地址（为电脑的ip地址），端口为Charles设置的端口号。

手机设备.png

• 抓取html链接
  打开网易新闻应用，观察Charles在Sequence中的数据变化，html链接http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html （网易新闻详情链接大多为.html格式存在，路径包含article），如下图所示，

抓取html链接.png

数据分析

打开浏览器，浏览http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html 链接地址，观察html数据，如下图，

html数据.png

打开百度搜索json在线解析，将html数据复制到json在线解析中，格式化校验数据，

格式化校验数据png

分析数据，可以看到BSB33M1000234KO7是一个特殊的key值，在链接的路径中也有。可以推断出，每一个网易新闻详情页面都会包含像BSB33M1000234KO这样的key值，可以根据他得到想要的数据。

那么，有了这样的数据，想要做网易新闻详情就so easy了！