小程序数据变了页面未变_12. 小程序项目实战：设置分类页面（1）

大家好！今天我们进入新的篇章—分类页面！

首先，这个小程序中的分类页面长这样：

为实现以上页面的""模样，我们分三大步来进行：

1、 分析接口数据如何渲染成页面数据

2、 为分类页面加点击切换效果；

3、 为分类页面加缓存处理

这一章我们来完成第一大步——分析页面数据与接口数据的逻辑关系。

首先，打开分类页面的接口文档，复制url路径(见扩展链接)至浏览器打开。

打开后，页面如下：

可以看到这个分类页面所包含的内容是很多的，

所以加载起来也需要时间，大家在打开时多一些耐心哦~

当页面内容很多时，我们如何与页面数据进行对接呢？

之前接口数据较少时，可以通过理清接口数据与页面数据的映射关系来完成。

但当数据复杂时，我们要采用另一种方法来实现。

步骤如下：

1、 复制浏览器中的代码，在微信开发者工具中新建文件data.json(与components文件夹同层级)，并粘贴代码。

2、 我们具体来看一下这个分类页面，左侧是"大家电"，点击后出现"电视"、"空调"等分类。

我们将页面截图放在画图中，如下图：

在小程序页面的右侧放接口数据，如下图：

对比页面与接口数据，可知：

页面中的"大家电"对应于代码中的"大家电"；

页面中的"电视"对应于代码中的"电视"。

我们只保留"大家电"这层代码，其余删除，如下：

3、 由小程序页面可知，"电视"与"空调"是同层级的分类，都属于"大家电"，"电视"下面又分为"曲面电视"、"海信"等类别。

这里，我们只保留"大家电""曲面电视"这一层代码，其余删除：

所以，最终data.json文件中的代码如下：

{  "message": [    {      "cat_id": 1,      "cat_name": "大家电",      "cat_pid": 0,      "cat_level": 0,      "cat_deleted": false,      "cat_icon": "",      "children": [        {          "cat_id": 3,          "cat_name": "电视",          "cat_pid": 1,          "cat_level": 1,          "cat_deleted": false,          "cat_icon": "",          "children": [            {              "cat_id": 5,              "cat_name": "曲面电视",              "cat_pid": 3,              "cat_level": 2,              "cat_deleted": false,              "cat_icon": "https://api.zbztb.cn/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"            }          ]        }      ]    }  ],  "meta": {    "msg": "获取成功",    "status": 200  }}

4、 在画图软件中展示上述代码与页面数据的关系，如下：

以上步骤完成后，就做好了第一大步——接口数据与页面数据相对应。

大家根据上面图的不同颜色的对应关系来理解，下一章我们来获取分类页面的数据。