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

你我哈2025-01-26 23:43

目录

概要

整体架构流程

（一）用户注册与登录

（二）菜品浏览与点餐

（三）订单管理

（四）后台管理

部分代码展示

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

这段代码主要实现了首页的轮播图展示、开启点餐之旅的按钮、最新消息展示以及底部菜品分类图标展示的功能。

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

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

  2. 数据交互标准化：

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

  3. 扩展性强：

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

  4. 安全性高：

    • 数据通过HTTPS传输，后端对用户密码加密存储，保障用户信息安全。
相关推荐
呦呦鹿鸣Rzh2 小时前
HTML-新浪新闻-实现标题-样式1
前端·html
徊忆羽菲2 小时前
Centos7系统php8编译安装ImageMagick/Imagick扩展教程整理
php
一只风里5 小时前
头像生成小程序搭建（免费分享）
微信小程序·小程序·uniapp·头像框小程序·头像生成·流量主·壁纸头像
V+zmm101345 小时前
食堂订餐小程序ssm+论文源码调试讲解
java·数据库·微信小程序·小程序·毕业设计
说私域5 小时前
私域流量池构建与转化策略：以开源链动2+1模式AI智能名片S2B2C商城小程序为例
大数据·人工智能·小程序·开源
weixin_418654695 小时前
Cursor 帮你写一个小程序
小程序·cursor ai
ac-er88887 小时前
Yii框架中的正则表达式：如何实现高效的文本操作
开发语言·正则表达式·php
计算机-秋大田8 小时前
微信阅读网站小程序的设计与实现（LW+源码+讲解）
spring boot·后端·微信·微信小程序·小程序·课程设计
前端Hardy10 小时前
HTML&CSS ：下雪了
前端·javascript·css·html·交互
Мартин.12 小时前
[Meachines] [Easy] Bashed PHP Bash+Python计划任务权限提升
python·php·bash
热门推荐
01具身智能之RT-H02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04xgboost: Why not implement distributed XGBoost on top of spark05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07Vue Router 快速入门08centos7 init.d 和system.d09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10PyTorch AMP 混合精度中grad_scaler.py的scale函数解析