微信点餐小程序—美食物

本项目是基于WAMP Server 和PHP 动态网页技术构建的微信小程序点餐系统，该系统主要分为前端（微信小程序）和后端（基于PHP+MySQL服务器端）

整体架构流程

1、前端部分

• 用户界面：展示菜品、处理用户点餐操作、订单管理等
• 数据请求：通过微信小程序的网络请求功能，调用后端API接口获取数据或提交数据
• 数据存储：使用小程序本地存储功能，临时存放用户信息、购物车数据等

2、后端（PHP＋MySQL） 

• API接口层:接收前端请求,处理业务逻辑,返回数据
• 业务逻辑层:处理用户注册登录,菜品管理,订单处理等核心业务处理逻辑
• 数据持久层:通过MySQL数据库存储用户数据,菜品信息,订单数据等

3、数据库

• 数据存储：存储用户表、菜单表、订单表、订单详情表等数据
• 数据查询：为后端提供数据查询、插入、更新和删除操作

开发环境搭建

（一）WAMP Server安排与配置

1、下载与安装

1、查找WAMP Server官网（https://wampserver.com/），选择适合操作系统版本进行下载

2、安装过程中，选择默认设置即可，安装完成后，启动WAMPServer

３、成功启动后，WAMP　Server图标会显示为绿色，表示Apache、MySQL和PHP服务都可正常运行

２、配置MySQL数据库

１、点击WAMP　Server图标，选择“MySQL”>"PHP My Admin"进入数据库管理界面

2、创建一个数据库，用于存储用户信息、菜品信息、订单信息等数据

3、配置PHP环境

1、默认情况下，WAMP Server已集成PHP环境，无需额外配置

2、如需要使用特定的PHP扩展，可在WAMP Server菜单中选择“PHP”>“PHP Extensions”,启用所需的扩展

（二）微信小程序开发环境

1、注册微信小程序账号

1、访问微信小程序管理后台，使用微信扫码登录

2、按照提示完成账号注册，获取AppID

2、安装微信开发者工具

1、访问微信开发者官网，下载并安装

2、打开开发者工具，使用注册的微信小程序账号登录

用户操作到数据处理完整流程

（一）用户注册与登录

• 用户操作

1. 用户在微信小程序中进行wx账号登录

• 前端处理

1. 小程序通过wx.request发送注册或登录请求到后端API接口

• 后端处理

1. 检查用户名是否存在
2. 将用户信息存入数据库，密码加密存储
3. 返回注册成功或失败提示
4. 验证用户名和密码是否正确
5. 返回登录成功或失败的提示，登录成功返回用户ID

• 前端响应

1. 根据后端返回结果，提示用户注册或登录状态
2. 登录成功后，存储用户ID到本地存储，用于后续操作

（二）菜品浏览与点餐

• 用户操作

1. 用户在小程序中浏览菜品列表，选择菜品加入购物车，提交订单

• 前端处理

1. 调用后端的菜品列表接口获取菜品数据，并展示在小程序页面上
2. 用户选择菜品后，将菜品信息存储到本地购物车
3. 用户提交订单时，将购物车中的菜品信息、用户ID等数据通过wx.request发送到后端订单提交接口

• 后端处理

1. 查询数据库中的菜品表，返回菜品信息
2. 计算订单总价
3. 将订单信息和订单详情分别存入订单表和订单详情表
4. 返回订单提交成功或失败提示

5. 前端响应

6. 根据后端返回的结果，提示用户订单提交成功/失败
7. 订单提交成功后，清空购物车，跳转到订单详细页面

（三）订单管理

• 用户操作

1. 用户在小程序查看订单列表、订单详情、支付以及取消订单等操作

• 前端处理

1. 调用后端订单列表接口获取订单数据，并展示在小程序页面上
2. 用户操作订单时，通过wx.request调用后端订单操作接口（如支付、取消订单）

• 后端处理

1. 查询数据库中的订单表，根据用户ID返回订单列表
2. 根据用户操作更新订单状态

• 前端响应

1. 根据后端返回结果，提示用户操作成功/失败
2. 更新订单列表页面，显示最新订单状态

（四）后台管理

• 商家操作

1. 商家通过后台管理系统查看订单以及管理订单（如确认订单、完成订单）

• 后端处理

1. 提供后台管理接口，供商家管理系统调用
2. 商家操作订单时，更新数据库中的订单状态

• 前端响应

1. 商家管理系统根据后端返回的结果，提示操作成功/失败
2. 更新订单列表页面，显示最新的订单状态

部分代码展示

1、index.wxml

这部分代码主要实现首页轮播图、点餐按钮、最新消息展示以及菜品分类图标

<!--index.wxml-->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
  <block wx:for="{
  
  { swiper }}" wx:key="*this">
    <swiper-item>
      <image src="{
  
  { item }}" />
    </swiper-item>
  </block>
</swiper>
<!-- 开启点餐之旅 -->
<view class="menu-bar">
  <view class="menu-block" bindtap="start">
    <view class="menu-start">开启点餐之旅→</view>
  </view>
</view>
<!-- 最新消息展示 -->
<view class="ad-box">
  <image src="{
  
  { ad }}" class="ad-image" />
</view>
<view class="bottom-box">
  <view class="bottom-pic" wx:for="{
  
  { category }}" wx:key="index">
    <image src="{
  
  { item }}" class="bottom-image" />
  </view>
</view>

2、list.wxml

定义页面，包含商品列表、购物车以及促销信息。页面中分为多个部分，包括顶部折扣信息、商品分类和商品列表、购物车界面、满减优惠以及底部导航栏

<!--pages/list/list.wxml-->
<view class="discount">
  <text class="discount-txt">减</text>满{
  
  { promotion.k }}元减{
  
  { promotion.v }}元（在线支付专享）
</view>
<view class="content">
  <!-- 左侧菜单栏区域 -->
  <scroll-view class="category" scroll-y>
    <view wx:for="{
  
  { foodList }}" wx:key="id" class="category-item category-{
  
  { activeIndex == index ? 'selected' : 'unselect' }}" data-index="{
  
  { index }}" bindtap="tapCategory">
      <view class="category-name">{
  
  { item.name }}</view>
    </view>
  </scroll-view>
  <!-- 右侧商品列表区域 -->
  <scroll-view class="food" scroll-y scroll-into-view="category_{
  
  { tapIndex }}" scroll-with-animation bindscroll="onFoodScroll">
    <block wx:for="{
  
  { foodList }}" wx:for-item="category" wx:key="id" wx:for-index="category_index">
      <view class="food-category" id="category_{
  
  { category_index }}">{
  
  { category.name }}</view>
      <view class="food-item" wx:for="{
  
  { category.food }}" wx:for-item="food" wx:key="id">
        <view class="food-item-pic">
          <image mode="widthFix" src="{
  
  { food.image_url }}" />
        </view>
        <view class="food-item-info">
          <view>{
  
  { food.name }}</view>
          <view class="food-item-price">{
  
  { priceFormat(food.price) }}</view>
        </view>
        <view class="food-item-opt">
          <i class="iconfont" data-category_index="{
  
  { category_index }}" data-index="{
  
  { index }}" bindtap="addToCart"></i>
        </view>
      </view>
    </block>
  </scroll-view>
</view>
<!-- 购物车界面 -->
<view class="shopcart" wx:if="{
  
  { showCart }}">
  <view class="shopcart-mask" bindtap="showCartList" wx:if="{
  
  { showCart }}"></view>
  <view class="shopcart-wrap">
    <view class="shopcart-head">
      <view class="shopcart-head-title">已选商品</view>
      <view class="shopcart-head-clean" bindtap="cartClear">
        <i class="iconfont"></i>清空购物车
      </view>
    </view>
    <view class="shopcart-list">
      <view class="shopcart-item" wx:for="{
  
  { cartList }}" wx:key="id">
        <view class="shopcart-item-name">{
  
  { item.name }}</view>
        <view class="shopcart-item-price">
          <view>{
  
  { priceFormat(item.price * item.number) }}</view>
        </view>
        <view class="shopcart-item-number">
          <i class="iconfont shopcart-icon-dec" data-id="{
  
  { index }}" bindtap="cartNumberDec"></i>
          <view>{
  
  { item.number }}</view>
          <i class="iconfont shopcart-icon-add" data-id="{
  
  { index }}" bindtap="cartNumberAdd"></i>
        </view>
      </view>
    </view>
  </view>
</view>
<!-- 满减优惠信息 -->
<view class="promotion">
  <label wx:if="{
  
  { promotion.k - cartPrice > 0 }}">满{
  
  { promotion.k }}立减{
  
  { promotion.v }}元，还差{
  
  { promotion.k - cartPrice }}元</label>
  <label wx:else>已满{
  
  { promotion.k }}元可减{
  
  { promotion.v }}元</label>
</view>
<!-- 小球动画 -->
<view class="operate">
  <view class="operate-shopcart-ball" hidden="{
  
  { !cartBall.show }}" style="left: {
  
  { cartBall.x }}px; top: {
  
  { cartBall.y }}px;"></view>
  <view class="operate-shopcart" bindtap="showCartList">
    <i class="iconfont operate-shopcart-icon {
  
  { cartNumber > 0 ? 'operate-shopcart-icon-activity' : '' }}">
      <span wx:if="{
  
  { cartNumber > 0 }}">{
  
  { cartNumber }}</span>
    </i>
    <view class="operate-shopcart-empty" wx:if="{
  
  { cartNumber === 0 }}">购物车是空的</view>
    <view class="operate-shopcart-price" wx:else>
      <block wx:if="{
  
  { cartPrice >= promotion.k }}">
        <view>{
  
  { priceFormat(cartPrice - promotion.v )}}</view>
        <text>{
  
  { priceFormat(cartPrice) }}</text>
      </block>
      <view wx:else>{
  
  { priceFormat(cartPrice) }}</view>
    </view>
  </view>
  <view class="operate-submit {
  
  { cartNumber !== 0 ? 'operate-submit-activity' : '' }}" bindtap="order">选好了</view>
</view>
<wxs module="priceFormat">
  module.exports = function (price) {
    return '¥ ' + parseFloat(price)
  }
</wxs>

3、checkout.wxml

实现订单确认页面的展示，包含订单信息、备注、支付等

<!--pages/order/checkout/checkout.wxml-->
<view class="content">
  <!-- 标题 -->
  <view class="content-title">请确认您的订单</view>
  <!-- 订单信息-->
  <view class="order">
    <view class="order-title">订单详情</view>
    <view class="order-list">
      <!-- 订单商品列表项 -->
      <view class="order-item" wx:for="{
  
  { order_food }}" wx:key="id">
        <view class="order-item-left">
          <image class="order-item-image" mode="widthFix" src="{
  
  { item.image_url }}" />
          <view>
            <view class="order-item-name">{
  
  { item.name }}</view>
            <view class="order-item-number">x {
  
  { item.number }}</view>
          </view>
        </view>
        <view class="order-item-price">{
  
  { priceFormat(item.price * item.number) }}</view>
      </view>
      <!-- 满减信息 -->
      <view class="order-item" wx:if="{
  
  { checkPromotion(promotion) }}">
        <view class="order-item-left">
          <i class="order-promotion-icon">减</i>满减优惠
        </view>
        <view class="order-promotion-price">- {
  
  { priceFormat(promotion) }}</view>
      </view>
      <!-- 小计 -->
      <view class="order-item">
        <view class="order-item-left">小计</view>
        <view class="order-total-price">{
  
  { priceFormat(price) }}</view>
      </view>
    </view>
  </view>
  <!-- 备注功能 -->
  <view class="content-comment">
    <label>备注</label>
    <textarea placeholder="如有其他要求，请输入备注" bindinput="inputComment"></textarea>
  </view>
</view>
<!-- 支付功能 -->
<view class="operate">
  <view class="operate-info">合计：{
  
  { priceFormat(price) }}</view>
  <view class="operate-submit" bindtap="pay">去支付</view>
</view>
<!-- 处理商品价格格式 -->
<wxs module="priceFormat">
  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }
</wxs>
<wxs module="checkPromotion">
  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }
</wxs>

4、detail.wxml

页面分为四部分：顶部取餐号、订单详情、订单信息列表、提示信息区。同时，使用两个wxs模块来处理价格格式化和满减优惠判断

<!--pages/order/detail/detail.wxml-->
<view class="top">
  <view class="card" wx:if="{
  
  { !is_taken }}">
    <view class="card-title">取餐号</view>
    <view class="card-content">
      <view class="card-info">
        <text class="card-code">{
  
  { code }}</text>
        <text class="card-info-r">正在精心制作中…</text>
      </view>
      <view class="card-comment" wx:if="{
  
  { comment }}">备注：{
  
  { comment }}</view>
      <view class="card-tips">美食制作中，尽快为您服务☺</view>
    </view>
  </view>
</view>
<view class="order">
  <view class="order-title">订单详情</view>
  <view class="order-list">
    <!-- 订单商品列表项 -->
    <view class="order-item" wx:for="{
  
  { order_food }}" wx:key="id">
      <view class="order-item-left">
        <image class="order-item-image" mode="widthFix" src="{
  
  { item.image_url }}" />
        <view>
          <view class="order-item-name">{
  
  { item.name }}</view>
          <view class="order-item-number">x {
  
  { item.number }}</view>
        </view>
      </view>
      <view class="order-item-price">{
  
  { priceFormat(item.price * item.number) }}</view>
    </view>
    <!-- 满减信息 -->
    <view class="order-item" wx:if="{
  
  { checkPromotion(promotion) }}">
      <view class="order-item-left">
        <i class="order-promotion-icon">减</i>满减优惠
      </view>
      <view class="order-promotion-price">- {
  
  { priceFormat(promotion) }}</view>
    </view>
    <!-- 小计 -->
    <view class="order-item">
      <view class="order-item-left">小计</view>
      <view class="order-total-price">{
  
  {priceFormat(price)}}</view>
    </view>
  </view>
</view>
<view class="list">
  <view>
    <text>订单号码</text>
    <view>{
  
  { sn }}</view>
  </view>
  <view>
    <text>下单时间</text>
    <view>{
  
  { create_time }}</view>
  </view>
  <view>
    <text>付款时间</text>
    <view>{
  
  { pay_time }}</view>
  </view>
  <view wx:if="{
  
  { is_taken }}">
    <text>取餐时间</text>
    <view>{
  
  { taken_time }}</view>
  </view>
</view>
<view class="tips" wx:if="{
  
  { is_taken }}">取餐号{
  
  { code }} 您已取餐</view>
<view class="tips" wx:else>请凭此页面至取餐柜台领取美食</view>
<wxs module="priceFormat">
  module.exports = function (price) {
    return price ? '¥ ' + parseFloat(price) : ''
  }
</wxs>
<wxs module="checkPromotion">
  module.exports = function (promotion) {
    return parseFloat(promotion) > 0
  }
</wxs>

技术词解释

1、WAMP Server

 WAMP Server 是 Windows 系统上搭建 Web 开发环境的常用工具，它集成了 Apache（Web 服务器）、MySQL（数据库）和 PHP（编程语言）。安装后，可以快速启动开发环境，方便处理小程序的请求并调用 PHP 脚本。

2、PHP 动态网页技术

PHP 是一种开源的服务器端脚本语言，简单易学，能嵌入 HTML 中。在美食屋项目中，PHP 主要处理订单、用户登录、菜品数据等业务逻辑，并与 MySQL 数据库配合，实现数据的存储和查询。

3、 MySQL 数据库

MySQL 是一款开源的关系型数据库，性能好、可靠性高。在美食屋系统中，它用来存储菜品信息（名称、价格、图片等）、用户信息（姓名、手机号、订单历史等）和订单信息（编号、时间、状态等）。通过优化表结构和索引，能确保数据快速读写，提升系统效率。

最终效果 

ps:需要源代码的小伙伴可以私信我