微信小程序-点餐（美食屋）02开发实践

目录

概要

整体架构流程

（一）用户注册与登录

（二）菜品浏览与点餐

（三）订单管理

（四）后台管理

部分代码展示

1.index.wxml

2.list.wxml

3.checkout.wxml

4.detail.wxml

小结优点

概要

        01篇让我们成功搭建开发环境，现在让我们着手开发 “美食屋” 点餐系统了。下面，我会用 PHP 和 MySQL 实现系统核心功能，像用户注册登录、展示和管理菜品，以及处理订单。

        快一起动手，让 “美食屋” 从概念变成现实吧！

整体架构流程

以下是系统从用户操作到数据处理的完整流程：

（一）用户注册与登录

1. 用户操作：

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

2. 前端处理：

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

3. 后端处理：

   • 注册接口：

     • 检查用户名是否已存在。

     • 将用户信息存入数据库，密码加密存储。

     • 返回注册成功或失败的提示。

   • 登录接口：

     • 验证用户名和密码是否正确。

     • 返回登录成功或失败的提示，登录成功时返回用户ID。

4. 前端响应：

   • 根据后端返回的结果，提示用户注册或登录成功/失败。

   • 登录成功后，存储用户ID到本地存储，用于后续操作。

（二）菜品浏览与点餐

1. 用户操作：

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

2. 前端处理：

   • 调用后端的菜品列表接口获取菜品数据，并展示在小程序页面上。

   • 用户选择菜品后，将菜品信息存储到本地购物车。

   • 用户提交订单时，将购物车中的菜品信息、用户ID等数据通过wx.request发送到后端订单提交接口。

3. 后端处理：

   • 菜品列表接口：

     • 查询数据库中的菜品表，返回菜品信息。

   • 订单提交接口：

     • 计算订单总价。

     • 将订单信息存入订单表，将订单详情存入订单详情表。

     • 返回订单提交成功或失败的提示。

4. 前端响应：

   • 根据后端返回的结果，提示用户订单提交成功/失败。

   • 订单提交成功后，清空购物车，跳转到订单详情页面。

（三）订单管理

1. 用户操作：

   • 用户在小程序中查看订单列表、订单详情，进行支付、取消订单等操作。

2. 前端处理：

   • 调用后端的订单列表接口获取订单数据，并展示在小程序页面上。

   • 用户操作订单时，通过wx.request调用后端的订单操作接口（如支付、取消订单）。

3. 后端处理：

   • 订单列表接口：

     • 查询数据库中的订单表，根据用户ID返回订单列表。

   • 订单操作接口：

     • 根据用户操作更新订单状态（如支付成功后将订单状态改为“已支付”）。

4. 前端响应：

   • 根据后端返回的结果，提示用户操作成功/失败。

   • 更新订单列表页面，显示最新的订单状态。

（四）后台管理

1. 商家操作：

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

2. 后端处理：

   • 提供后台管理接口，供商家管理系统调用。

   • 商家操作订单时，更新数据库中的订单状态。

3. 前端响应：

   • 商家管理系统根据后端返回的结果，提示操作成功/失败。

   • 更新订单列表页面，显示最新的订单状态。

部分代码展示

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. 前后端分离：

   • 前端专注于用户体验，后端专注于数据处理，提高开发效率和系统可维护性。

2. 数据交互标准化：

   • 使用JSON格式进行数据交互，便于前后端解析和处理。

3. 扩展性强：

   • 后端接口可独立扩展，支持多端接入（如小程序、Web端等）。

4. 安全性高：

   • 数据通过HTTPS传输，后端对用户密码加密存储，保障用户信息安全。