微信小程序点餐系统代码

微信小程序点餐系统的代码相对复杂，包括前端和后端两部分。由于篇幅有限，我无法提供完整的代码，但我可以为你提供一个简单的示例，以帮助你入门。实际的点餐系统可能涉及更多功能和安全性考虑。

前端部分

1. 创建页面 index

javascript
// index.js
Page({
  data: {
    menuItems: [], // 存储菜单项
    cart: [], // 存储购物车中的物品
  },

  onLoad: function () {
    // 获取菜单数据
    this.getMenu();
  },

  getMenu: function () {
    // 发送请求获取菜单数据
    // 示例请求，实际中需要替换为你的接口地址
    wx.request({
      url: 'https://your-api-server.com/menu',
      success: (res) => {
        this.setData({
          menuItems: res.data,
        });
      },
    });
  },

  addToCart: function (e) {
    const selectedItem = e.currentTarget.dataset.item;
    this.setData({
      cart: [...this.data.cart, selectedItem],
    });
  },

  removeFromCart: function (e) {
    const index = e.currentTarget.dataset.index;
    const updatedCart = [...this.data.cart];
    updatedCart.splice(index, 1);
    this.setData({
      cart: updatedCart,
    });
  },

  checkout: function () {
    // 处理结账逻辑
    // 可以向后端发送购物车信息
    // 示例请求，实际中需要替换为你的接口地址
    wx.request({
      url: 'https://your-api-server.com/checkout',
      method: 'POST',
      data: {
        cart: this.data.cart,
      },
      success: (res) => {
        // 处理后端返回的结账结果
        console.log(res.data);
        // 清空购物车
        this.setData({
          cart: [],
        });
      },
    });
  },
});

2. 创建页面 index.wxml

html
<!-- index.wxml -->
<view>
  <block wx:for="{{menuItems}}" wx:key="index">
    <view>
      <text>{{item.name}}</text>
      <text>{{item.price}}</text>
      <button bindtap="addToCart" data-item="{{item}}">加入购物车</button>
    </view>
  </block>

  <view>
    <text>购物车</text>
    <block wx:for="{{cart}}" wx:key="index">
      <view>
        <text>{{item.name}}</text>
        <text>{{item.price}}</text>
        <button bindtap="removeFromCart" data-index="{{index}}">移除</button>
      </view>
    </block>
    <button bindtap="checkout">结账</button>
  </view>
</view>

后端部分

后端部分可以使用 Node.js、Express 等构建。

javascript
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.use(bodyParser.json());

const menu = [
  { id: 1, name: '菜品1', price: 10 },
  { id: 2, name: '菜品2', price: 15 },
  // 其他菜品...
];

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

app.post('/checkout', (req, res) => {
  const cart = req.body.cart;
  // 处理购物车信息，例如计算总价等
  const totalPrice = cart.reduce((acc, item) => acc + item.price, 0);
  res.json({ success: true, totalPrice });
});

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

在实际项目中，你需要根据业务需求和安全性考虑进行更详细和复杂的实现。同时，建议使用小程序云开发或其他云服务来存储菜单和订单等数据。

小程序云开发

如果你希望使用小程序云开发，你可以在小程序云开发控制台创建一个云函数来处理后端逻辑。

javascript
// 云函数 getMenu
const cloud = require('wx-server-sdk');
cloud.init();

const db = cloud.database();

exports.main = async (event, context) => {
  try {
    const menuCollection = db.collection('menu');
    const menuData = await menuCollection.get();
    return menuData.data;
  } catch (error) {
    console.error(error);
    return [];
  }
};

你需要在小程序云开发控制台创建一个名为 menu 的数据库集合，并在集合中添加菜单数据。

在小程序前端代码中，你需要调用云函数获取菜单数据：

javascript
// index.js
Page({
  data: {
    menuItems: [],
    cart: [],
  },

  onLoad: function () {
    this.getMenu();
  },

  getMenu: function () {
    wx.cloud.callFunction({
      name: 'getMenu',
      success: (res) => {
        this.setData({
          menuItems: res.result,
        });
      },
      fail: (error) => {
        console.error(error);
      },
    });
  },

  // 其他方法保持不变
});

对于购物车和结账功能，你可以在小程序云开发中使用云函数来处理。你需要在小程序云开发控制台创建对应的云函数和数据库集合。