小程序外卖项目实践：左右菜单联动

2024-01-03 09:16:14





**前言** 
本项目是公司之前的一个app项目，一个餐厅自己的订餐app，已经下线了。我用来练手，最早是html+jq版本，准备放在公从号里的。后来先是用vue实现了它，最近研究下小程序，当然也是好的练手。

**实现步骤** 
1. 首先，需要在小程序中新建一个项目，然后在项目中创建一个页面，作为外卖项目的首页。
2. 在首页的布局中，需要设计两个菜单，一个在左侧，一个在右侧。左侧菜单是分类菜单，右侧菜单是商品菜单。
3. 当用户点击左侧菜单中的某个分类时，右侧菜单中的商品列表需要根据该分类进行更新。
4. 为了实现这一功能，需要在小程序中使用事件绑定，监听左侧菜单中各个分类的点击事件。当某个分类被点击时，触发一个事件，然后在事件处理函数中，更新右侧菜单中的商品列表。
5. 在更新右侧菜单中的商品列表时，需要使用小程序中的请求接口，向服务器发送请求，获取该分类下的所有商品信息。
6. 当服务器返回商品信息后，需要将这些信息渲染到右侧菜单中，以便用户查看。

**代码示例** 
```javascript
// 左侧菜单的分类数据
const categories = [
  {
    id: 1,
    name: '主食',
  },
  {
    id: 2,
    name: '小吃',
  },
  {
    id: 3,
    name: '饮品',
  },
];

// 右侧菜单的商品数据
const products = [
  {
    id: 1,
    name: '米饭',
    categoryId: 1,
  },
  {
    id: 2,
    name: '面条',
    categoryId: 1,
  },
  {
    id: 3,
    name: '包子',
    categoryId: 2,
  },
  {
    id: 4,
    name: '饺子',
    categoryId: 2,
  },
  {
    id: 5,
    name: '可乐',
    categoryId: 3,
  },
  {
    id: 6,
    name: '果汁',
    categoryId: 3,
  },
];

// 左侧菜单的点击事件处理函数
const handleCategoryClick = (event) => {
  const categoryId = event.currentTarget.dataset.id;
  // 根据分类ID获取该分类下的所有商品信息
  const productsByCategory = products.filter((product) => product.categoryId === categoryId);

  // 更新右侧菜单中的商品列表
  this.setData({
    products: productsByCategory,
  });
};

// 页面数据
const data = {
  categories: categories,
  products: products,
  handleCategoryClick: handleCategoryClick,
};

// 创建页面实例
const page = new Page(data);