点餐小程序 源码

以下是一个简单的点餐小程序的源代码，使用微信小程序原生框架编写：

一、项目结构：

pages/
  index/                  // 首页
    index.js
    index.json
    index.wxml
    index.wxss
  menu/                   // 菜单详情页
    menu.js
    menu.json
    menu.wxml
    menu.wxss
  order/                  // 订单页
    order.js
    order.json
    order.wxml
    order.wxss
app.js
app.json
app.wxss

二、主要代码：

1. app.json

{
  "pages": [
    "pages/index/index",
    "pages/menu/menu",
    "pages/order/order"
  ],
  "window": {
    "navigationBarTitleText": "点餐小程序"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单"
      }
    ]
  }
}

2. index.wxml

<view class="container">
  <view class="menu-list">
   <block wx:for="{{menus}}" wx:key="id">
      <view class="menu-item" data-id="{{item.id}}" bindtap="goToMenu">
       <image src="{{item.image}}" class="menu-image" />
        <text class="menu-name">{{item.name}}</text>
      </view>
    </block>
  </view>
</view>

3. index.js

Page({
  data: {
    menus: [
      {
        id: 1,
        name: "菜品1",
        image: "https://example.com/image1.jpg"
      },
      {
        id: 2,
        name: "菜品2",
        image: "https://example.com/image2.jpg"
      },
      // 更多菜品...
    ]
  },
  goToMenu: function (e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: "/pages/menu/menu?id=" + id
    });
  }
});

4. menu.wxml

<view class="container">
  <view class="menu-detail">
   <image src="{{menu.image}}" class="menu-image" />
    <view class="menu-info">
      <text class="menu-name">{{menu.name}}</text>
      <text class="menu-price">¥ {{menu.price}}</text>
     <button class="add-to-order" bindtap="addToOrder">加入订单</button>
    </view>
  </view>
</view>

5. menu.js

Page({
  data: {
    menu: {
      id: 1,
      name: "菜品1",
      image: "https://example.com/image1.jpg",
      price: 10
    }
  },
  onLoad: function (options) {
    const id = options.id;
    // 根据 id 获取菜品详情，这里为了简化直接使用固定数据
  },
  addToOrder: function () {
    // 将菜品添加到订单，这里可以使用本地存储或者全局变量来保存订单数据
    wx.navigateBack();
  }
});

6. order.wxml

<view class="container">
  <view class="order-list">
   <block wx:for="{{order}}" wx:key="id">
      <view class="order-item">
        <text class="menu-name">{{item.name}}</text>
        <text class="menu-price">¥ {{item.price}}</text>
      </view>
    </block>
  </view>
 <button class="submit-order" bindtap="submitOrder">提交订单</button>
</view>

7. order.js

Page({
  data: {
    order: []
  },
  onShow: function () {
    // 从本地存储或全局变量中获取订单数据，这里为了简化直接使用固定数据
    this.setData({
      order: [
        {
          id: 1,
          name: "菜品1",
          price: 10
        },
        {
          id: 2,
          name: "菜品2",
          price: 20
        }
        // 更多订单数据...
      ]
    });
  },
  submitOrder: function () {
    // 提交订单逻辑，如发送请求到服务器，这里为了简化直接使用 alert 弹窗
    alert("订单提交成功");
  }
});

以上代码实现了一个简单的点餐小程序，包括首页展示菜品列表、菜品详情页、订单页等功能。请注意，这里的代码仅作为示例，实际开发中需要根据具体需求进行调整和优化。