微信点餐小程序—美食物

本项目是基于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、打开开发者工具，使用注册的微信小程序账号登录

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

（一）用户注册与登录

用户操作

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

前端处理

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

后端处理

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

前端响应

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

（二）菜品浏览与点餐

用户操作

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

前端处理

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

后端处理

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

前端响应

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

（三）订单管理

用户操作

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

前端处理

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

后端处理

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

前端响应

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

（四）后台管理

商家操作

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

后端处理

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

前端响应

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

部分代码展示

1、index.wxml

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

html 复制代码

<!--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

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

html 复制代码

<!--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

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

html 复制代码

<!--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模块来处理价格格式化和满减优惠判断

html 复制代码

<!--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:需要源代码的小伙伴可以私信我