微信小程序开发week6-慕尚花坊项目

xshirleyl2026-05-19 10:21

1.商品分类

1.1 获取商品分类数据

在项目根目录下 `api` 目录下新建 `category.js` 文件，用来管理分类页面接口请求
在该文件中导入封装的网络请求模块，根据接口文档，创建获取分类数据的 `API` 函数 `reqCategoryData`
在 `/pages/category/category.js` 中导入封装好的获取分类数据的 `API` 函数
页面数据需要在页面加载的时候进行调用，因此需要在 `onLoad` 钩子函数中调用 `reqCategoryData` 方法
在获取到数据以后，使用后端返回的数据对页面进行渲染

代码：

复制代码

`➡️ api/category.js`

```js
// 导入封装的网络请求模块实例
import http from '../utils/http'

/**
 * @description 获取商品分类的数据
 * @returns Promise
 */
export const reqCategoryData = () => {
  return http.get('/index/findCategoryTree')
}

```



`➡️ page/category/category.js`

```js
// 导入封装的接口 API
import { reqCategoryData } from '../../api/category'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    categoryList: [] // 分类数据列表
  },

  // 生命周期函数--监听页面加载
  onLoad(options) {
    // 获取页面中使用的
    this.getCategoryData()
  },

  // 获取页面初始化时，页面中使用的数据
  async getCategoryData() {
    // 调用接口获取分类的数据
    const res = await reqCategoryData()

    this.setData({
      categoryList: res.data
    })
  },

  // 导航分类点击事件
  // coding...
})

```