构建外卖小程序：技术实践与代码示例

万岳科技

于 2023-12-14 17:00:50 发布

阅读量593

点赞数 7

文章标签：小程序

本文链接：https://blog.csdn.net/wanyuekeji123/article/details/134999758

版权

外卖小程序的开发涉及前后端的多个技术领域，从用户界面设计到数据库管理，都需要巧妙的技术方案。在本文中，我们将以微信小程序平台为例，通过简单的代码示例，介绍如何搭建一个基本的外卖小程序。

1. 准备工作

首先，确保您已在微信开放平台注册并获取小程序的 AppID。在微信小程序开发者工具中创建一个新项目，填入您的 AppID，并选择小程序的基本配置。

2. 构建前端界面

创建首页

在小程序的 pages 目录下创建首页文件 index，并编写对应的 index.js、index.wxml、index.wxss 文件。

// index.js
Page({
  data: {
    restaurants: [
      { id: 1, name: "美味餐厅", cuisine: "中式", deliveryTime: 30 },
      { id: 2, name: "意大利风情屋", cuisine: "意式", deliveryTime: 45 },
      // 添加更多餐厅
    ]
  },
});
html
Copy code
<!-- index.wxml -->
<view>
  <block wx:for="{{ restaurants }}">
    <view>{{ item.name }} - {{ item.cuisine }} - 送餐时间：{{ item.deliveryTime }}分钟</view>
  </block>
</view>

创建菜单页面

同样，在 pages 目录下创建菜单页面文件 menu，并编写对应的 menu.js、menu.wxml、menu.wxss 文件。

// menu.js
Page({
  data: {
    menuItems: [
      { id: 1, name: "招牌菜1", price: 20 },
      { id: 2, name: "招牌菜2", price: 25 },
      // 添加更多菜品
    ]
  },
});

<!-- menu.wxml -->
<view>
  <block wx:for="{{ menuItems }}">
    <view>{{ item.name }} - ￥{{ item.price }}</view>
  </block>
</view>

3. 添加导航和跳转

在小程序的 app.json 文件中配置页面路径和标题，以及底部导航。

{
  "pages": [
    "pages/index/index",
    "pages/menu/menu",
    // 添加更多页面
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/menu/menu",
        "text": "菜单"
      },
      // 添加更多导航项
    ]
  }
}

4. 构建后端服务

在后端使用 Node.js 和 Express 构建一个简单的服务，提供餐厅和菜单的数据。

// server.js
const express = require('express');
const app = express();
const port = 3000;

const restaurants = [
  { id: 1, name: "美味餐厅", cuisine: "中式", deliveryTime: 30 },
  { id: 2, name: "意大利风情屋", cuisine: "意式", deliveryTime: 45 },
  // 添加更多餐厅
];

const menuItems = [
  { id: 1, name: "招牌菜1", price: 20 },
  { id: 2, name: "招牌菜2", price: 25 },
  // 添加更多菜品
];

app.get('/api/restaurants', (req, res) => {
  res.json(restaurants);
});

app.get('/api/menu/:restaurantId', (req, res) => {
  const { restaurantId } = req.params;
  const restaurantMenu = menuItems.filter(item => item.restaurantId == restaurantId);
  res.json(restaurantMenu);
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

5. 发送网络请求

在小程序中使用 wx.request 发送网络请求获取后端数据。

// index.js
Page({
  onLoad: function () {
    // 发送获取餐厅数据的请求
    wx.request({
      url: 'http://localhost:3000/api/restaurants',
      success: (res) => {
        this.setData({
          restaurants: res.data,
        });
      }
    });
  }
});

// menu.js
Page({
  // 在这里发送获取菜单数据的请求
});