大一项目课，微信小程序

Question

小组结课项目，要求写一个微信小程序点餐系统。
要求：
1.不需要完整项目，只需要前段页面代码
2.需要源代码
3.价格好说

Answer 1

引自免费微信小程序：皆我百晓生

首先，我将为你提供一个简单的微信小程序点餐系统的前端页面代码示例。这个例子是一个基本的列表展示菜品和添加到购物车的功能。你可以根据需求进行扩展。

<!--index.wxml-->
<view class="container">
  <scroll-view class="menu" scroll-y="true">
    <block wx:for="{{ menuItems }}" wx:key="*this">
      <view class="item">
        <image src="{{ item.image }}" class="item-image" />
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <text class="item-price">{{ item.price }} 元</text>
          <button open-type="contact" class="add-to-cart">加入购物车</button>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="cart">
    <text>购物车（{{ cartCount }}）</text>
  </view>
</view>

<!--index.wxss-->
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.menu {
  width: 100%;
  height: auto;
}

.item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  line-height: 1.5;
}

.item-price {
  font-size: 14px;
  color: gray;
}

.add-to-cart {
  background-color: #07c160;
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
}

.cart {
  text-align: right;
  font-size: 18px;
}

然后是相关的JS代码，用于处理数据和事件：

// index.js
Page({
  data: {
    menuItems: [
      // 这里可以替换为实际的菜品数据
      { name: '牛肉饭', price: 25, image: 'https://example.com/beef-rice.jpg' },
      { name: '鸡肉饭', price: 20, image: 'https://example.com/chicken-rice.jpg' },
      // ...
    ],
    cart: [],
    cartCount: 0,
  },

  addToCart: function(e) {
    const itemId = e.currentTarget.dataset.itemId; // 获取点击项的id
    if (this.data.cart.includes(itemId)) {
      this.setData({ cart: this.data.cart.filter(item => item !== itemId) });
      this.updateCartCount();
    } else {
      this.setData({ cart: [...this.data.cart, itemId] });
      this.updateCartCount();
    }
  },

  updateCartCount: function() {
    this.setData({ cartCount: this.data.cart.length });
  },
});

这只是一个非常基础的点餐系统的实现，实际项目可能需要后端接口、用户登录、支付功能等。如果你需要这些功能的代码示例或者其他帮助，请告诉我，我会尽力提供更多的指导。记住，你需要在微信开发者工具中创建一个新的小程序项目，并将上述代码放入相应的文件中。同时，别忘了替换menuItems中的菜品信息，使其与实际服务端数据同步。