通过封装的方法可以保证项目在开发过程中具有一致的功能或效果。使用该方法可以提高开发效率。

然后就可以通过项目的api文档获取接口请求的数据了。

首页的轮播图、nav导航、下面的楼层都需要根据接口地址获取所有需要的数据，最终渲染在页面上。可以采用组件开发的思路，使用组件来注册并在首页引入。

类别页面

1、商品分类页将点击事件绑定到首页的中间导航，然后将跳转路线写入首页的js文件下。这里采用微信小程序文档方式跳转页面。

2、在分类页面，根据api接口文档，在封装的http文件中请求分类页面所需的数据。分类页面顶部的搜索按钮可以根据封装直接引入。下面分类数据请求界面左侧的侧边导航与右侧的侧边导航相同。产品相当于垂直标签切换

您可以根据左侧对应的下标找到合适的产品

列表页面内容

1、通过根据绑定的自定义属性设置商品页面右侧商品的点击事件，即可根据唯一商品找到对应的商品列表数据。

代码如下：

通过点击事件跳转到商品列表页面（这里注意跳转路由需要传入商品当前的id作为参数）

这样就可以实现跳转到列表页了。在列表页面，根据传入的参数id可以获取到当前点击对应的数据。

然后遍历数据并渲染到列表页面

这里的一些功能是上拉加载和下拉加刷新功能的实现。

上拉加载 下拉刷新

详情页

跳转到详情页也是基于配置详情页的界面。需要商品的id，根据id获取整个商品的详细数据，根据界面渲染页面。

代码如下：

在详情页中，可以根据商品ID渲染页面。

详情页有收藏、分享、客服等功能。添加到购物车：根据效果定义需要的数组，用数组接收。给购物车绑定一个点击事件，点击后将数据保存到数组中。保存到本地存储，这样数据就不会丢失。如果通过 wx.方法，可以使用 wx.方法获取本地存储的数据。

这里需要注意的是，添加购物车时需要判断商品ID是否一致。当ID一致时，不会添加到数组中，只会增加对应产品的数量。

handleCartAdd() { console.log(this.data.data); let k = false; // 判重复 let price = this.data.data.goods_price; let image = this.data.data.goods_small_logo; let flag = false; // 复选框的状态 let num =