微信點餐小程序

本項目是基于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

這部分代碼主要實現首頁輪播圖、點餐按鈕、最新消息展示以及菜品分類圖標

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