微信小步调-点餐（美食屋）02开辟实践

目次
  概要
  团体架构流程
  （一）用户注册与登录
  （二）菜品欣赏与点餐
  （三）订单管理
  （四）配景管理
  
  部分代码展示
  1.index.wxml
  2.list.wxml
  3.checkout.wxml
  4.detail.wxml
  小结优点
  
  

• 
  
  
  
  • 
    
  
  

  
概要

        01篇让我们乐成搭建开辟环境，现在让我们动手开辟 “美食屋” 点餐体系了。下面，我会用 PHP 和 MySQL 实现体系核心功能，像用户注册登录、展示和管理菜品，以及处置处罚订单。
        快一起动手，让 “美食屋” 从概念酿成实际吧！

团体架构流程

以下是体系从用户操纵到数据处置处罚的完备流程：
（一）用户注册与登录

• 用户操纵：
  
  
  
  • 用户在微信小步调中举行wx账号登录。
    
  
  
• 前端处置处罚：
  
  
  
  • 小步调通过wx.request发送注册或登录哀求到后端API接口。
    
  
  
• 后端处置处罚：
  
  
  
  • 注册接口：
    
    
    
    • 查抄用户名是否已存在。
      
    • 将用户信息存入数据库，暗码加密存储。
      
    • 返回注册乐成或失败的提示。
      
    
    
  • 登录接口：
    
    
    
    • 验证用户名和暗码是否准确。
      
    • 返回登录乐成或失败的提示，登录乐成时返回用户ID。
      
    
    
  
  
• 前端相应：
  
  
  
  • 根据后端返回的结果，提示用户注册或登录乐成/失败。
    
  • 登录乐成后，存储用户ID到本地存储，用于后续操纵。
    
  
  

（二）菜品欣赏与点餐

• 用户操纵：
  
  
  
  • 用户在小步调中欣赏菜品列表，选择菜品加入购物车，提交订单。
    
  
  
• 前端处置处罚：
  
  
  
  • 调用后端的菜品列表接口获取菜品数据，并展示在小步调页面上。
    
  • 用户选择菜品后，将菜品信息存储到本地购物车。
    
  • 用户提交订单时，将购物车中的菜品信息、用户ID等数据通过wx.request发送到后端订单提交代口。
    
  
  
• 后端处置处罚：
  
  
  
  • 菜品列表接口：
    
    
    
    • 查询数据库中的菜品表，返回菜品信息。
      
    
    
  • 订单提交代口：
    
    
    
    • 盘算订单总价。
      
    • 将订单信息存入订单表，将订单详情存入订单详情表。
      
    • 返回订单提交乐成或失败的提示。
      
    
    
  
  
• 前端相应：
  
  
  
  • 根据后端返回的结果，提示用户订单提交乐成/失败。
    
  • 订单提交乐成后，清空购物车，跳转到订单详情页面。
    
  
  

（三）订单管理

• 用户操纵：
  
  
  
  • 用户在小步调中查察订单列表、订单详情，举行付出、取消订单等操纵。
    
  
  
• 前端处置处罚：
  
  
  
  • 调用后端的订单列表接口获取订单数据，并展示在小步调页面上。
    
  • 用户操纵订单时，通过wx.request调用后端的订单操纵接口（如付出、取消订单）。
    
  
  
• 后端处置处罚：
  
  
  
  • 订单列表接口：
    
    
    
    • 查询数据库中的订单表，根据用户ID返回订单列表。
      
    
    
  • 订单操纵接口：
    
    
    
    • 根据用户操纵更新订单状态（如付出乐成后将订单状态改为“已付出”）。
      
    
    
  
  
• 前端相应：
  
  
  
  • 根据后端返回的结果，提示用户操纵乐成/失败。
    
  • 更新订单列表页面，表现最新的订单状态。
    
  
  

（四）配景管理

• 商家操纵：
  
  
  
  • 商家通过配景管理体系查察订单、处置处罚订单（如确认订单、完成订单）。
    
  
  
• 后端处置处罚：
  
  
  
  • 提供配景管理接口，供商家管理体系调用。
    
  • 商家操纵订单时，更新数据库中的订单状态。
    
  
  
• 前端相应：
  
  
  
  • 商家管理体系根据后端返回的结果，提示操纵乐成/失败。
    
  • 更新订单列表页面，表现最新的订单状态。
    
  
  

部分代码展示

1.index.wxml

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

1. <!--index.wxml-->
2. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
3.   <block wx:for="{
4.   { swiper }}" wx:key="*this">
5.     <swiper-item>
6.       <image src="{
7.   { item }}" />
8.     </swiper-item>
9.   </block>
10. </swiper>
11. <!-- 开启点餐之旅 -->
12. <view class="menu-bar">
13.   <view class="menu-block" bindtap="start">
14.     <view class="menu-start">开启点餐之旅→</view>
15.   </view>
16. </view>
17. <!-- 最新消息展示 -->
18. <view class="ad-box">
19.   <image src="{
20.   { ad }}" class="ad-image" />
21. </view>
22. <view class="bottom-box">
23.   <view class="bottom-pic" wx:for="{
24.   { category }}" wx:key="index">
25.     <image src="{
26.   { item }}" class="bottom-image" />
27.   </view>
28. </view>

复制代码

2.list.wxml

        界说了一个页面，重要用于展示商品列表、购物车功能以及相干的促销信息。页面分为多个部分，包罗顶部的扣头信息、商品分类和商品列表地区、购物车界面、满减优惠提示以及底部的操纵栏。   

1. <!--pages/list/list.wxml-->
2. <view class="discount">
3.   <text class="discount-txt">减</text>满{
4.   { promotion.k }}元减{
5.   { promotion.v }}元（在线支付专享）
6. </view>
7. <view class="content">
8.   <!-- 左侧菜单栏区域 -->
9.   <scroll-view class="category" scroll-y>
10.     <view wx:for="{
11.   { foodList }}" wx:key="id" class="category-item category-{
12.   { activeIndex == index ? 'selected' : 'unselect' }}" data-index="{
13.   { index }}" bindtap="tapCategory">
14.       <view class="category-name">{
15.   { item.name }}</view>
16.     </view>
17.   </scroll-view>
18.   <!-- 右侧商品列表区域 -->
19.   <scroll-view class="food" scroll-y scroll-into-view="category_{
20.   { tapIndex }}" scroll-with-animation bindscroll="onFoodScroll">
21.     <block wx:for="{
22.   { foodList }}" wx:for-item="category" wx:key="id" wx:for-index="category_index">
23.       <view class="food-category" id="category_{
24.   { category_index }}">{
25.   { category.name }}</view>
26.       <view class="food-item" wx:for="{
27.   { category.food }}" wx:for-item="food" wx:key="id">
28.         <view class="food-item-pic">
29.           <image mode="widthFix" src="{
30.   { food.image_url }}" />
31.         </view>
32.         <view class="food-item-info">
33.           <view>{
34.   { food.name }}</view>
35.           <view class="food-item-price">{
36.   { priceFormat(food.price) }}</view>
37.         </view>
38.         <view class="food-item-opt">
39.           <i class="iconfont" data-category_index="{
40.   { category_index }}" data-index="{
41.   { index }}" bindtap="addToCart"></i>
42.         </view>
43.       </view>
44.     </block>
45.   </scroll-view>
46. </view>
47. <!-- 购物车界面 -->
48. <view class="shopcart" wx:if="{
49.   { showCart }}">
50.   <view class="shopcart-mask" bindtap="showCartList" wx:if="{
51.   { showCart }}"></view>
52.   <view class="shopcart-wrap">
53.     <view class="shopcart-head">
54.       <view class="shopcart-head-title">已选商品</view>
55.       <view class="shopcart-head-clean" bindtap="cartClear">
56.         <i class="iconfont"></i>清空购物车
57.       </view>
58.     </view>
59.     <view class="shopcart-list">
60.       <view class="shopcart-item" wx:for="{
61.   { cartList }}" wx:key="id">
62.         <view class="shopcart-item-name">{
63.   { item.name }}</view>
64.         <view class="shopcart-item-price">
65.           <view>{
66.   { priceFormat(item.price * item.number) }}</view>
67.         </view>
68.         <view class="shopcart-item-number">
69.           <i class="iconfont shopcart-icon-dec" data-id="{
70.   { index }}" bindtap="cartNumberDec"></i>
71.           <view>{
72.   { item.number }}</view>
73.           <i class="iconfont shopcart-icon-add" data-id="{
74.   { index }}" bindtap="cartNumberAdd"></i>
75.         </view>
76.       </view>
77.     </view>
78.   </view>
79. </view>
80. <!-- 满减优惠信息 -->
81. <view class="promotion">
82.   <label wx:if="{
83.   { promotion.k - cartPrice > 0 }}">满{
84.   { promotion.k }}立减{
85.   { promotion.v }}元，还差{
86.   { promotion.k - cartPrice }}元</label>
87.   <label wx:else>已满{
88.   { promotion.k }}元可减{
89.   { promotion.v }}元</label>
90. </view>
91. <!-- 小球动画 -->
92. <view class="operate">
93.   <view class="operate-shopcart-ball" hidden="{
94.   { !cartBall.show }}" style="left: {
95.   { cartBall.x }}px; top: {
96.   { cartBall.y }}px;"></view>
97.   <view class="operate-shopcart" bindtap="showCartList">
98.     <i class="iconfont operate-shopcart-icon {
99.   { cartNumber > 0 ? 'operate-shopcart-icon-activity' : '' }}">
100.       <span wx:if="{
101.   { cartNumber > 0 }}">{
102.   { cartNumber }}</span>
103.     </i>
104.     <view class="operate-shopcart-empty" wx:if="{
105.   { cartNumber === 0 }}">购物车是空的</view>
106.     <view class="operate-shopcart-price" wx:else>
107.       <block wx:if="{
108.   { cartPrice >= promotion.k }}">
109.         <view>{
110.   { priceFormat(cartPrice - promotion.v )}}</view>
111.         <text>{
112.   { priceFormat(cartPrice) }}</text>
113.       </block>
114.       <view wx:else>{
115.   { priceFormat(cartPrice) }}</view>
116.     </view>
117.   </view>
118.   <view class="operate-submit {
119.   { cartNumber !== 0 ? 'operate-submit-activity' : '' }}" bindtap="order">选好了</view>
120. </view>
121. <wxs module="priceFormat">
122.   module.exports = function (price) {
123.     return '¥ ' + parseFloat(price)
124.   }
125. </wxs>

复制代码

3.checkout.wxml

        重要实现了订单确认页面的展示，包罗订单信息、备注、付出等功能。

1. <!--pages/order/checkout/checkout.wxml-->
2. <view class="content">
3.   <!-- 标题 -->
4.   <view class="content-title">请确认您的订单</view>
5.   <!-- 订单信息-->
6.   <view class="order">
7.     <view class="order-title">订单详情</view>
8.     <view class="order-list">
9.       <!-- 订单商品列表项 -->
10.       <view class="order-item" wx:for="{
11.   { order_food }}" wx:key="id">
12.         <view class="order-item-left">
13.           <image class="order-item-image" mode="widthFix" src="{
14.   { item.image_url }}" />
15.           <view>
16.             <view class="order-item-name">{
17.   { item.name }}</view>
18.             <view class="order-item-number">x {
19.   { item.number }}</view>
20.           </view>
21.         </view>
22.         <view class="order-item-price">{
23.   { priceFormat(item.price * item.number) }}</view>
24.       </view>
25.       <!-- 满减信息 -->
26.       <view class="order-item" wx:if="{
27.   { checkPromotion(promotion) }}">
28.         <view class="order-item-left">
29.           <i class="order-promotion-icon">减</i>满减优惠
30.         </view>
31.         <view class="order-promotion-price">- {
32.   { priceFormat(promotion) }}</view>
33.       </view>
34.       <!-- 小计 -->
35.       <view class="order-item">
36.         <view class="order-item-left">小计</view>
37.         <view class="order-total-price">{
38.   { priceFormat(price) }}</view>
39.       </view>
40.     </view>
41.   </view>
42.   <!-- 备注功能 -->
43.   <view class="content-comment">
44.     <label>备注</label>
45.     <textarea placeholder="如有其他要求，请输入备注" bindinput="inputComment"></textarea>
46.   </view>
47. </view>
48. <!-- 支付功能 -->
49. <view class="operate">
50.   <view class="operate-info">合计：{
51.   { priceFormat(price) }}</view>
52.   <view class="operate-submit" bindtap="pay">去支付</view>
53. </view>
54. <!-- 处理商品价格格式 -->
55. <wxs module="priceFormat">
56.   module.exports = function (price) {
57.     return price ? '¥ ' + parseFloat(price) : ''
58.   }
59. </wxs>
60. <wxs module="checkPromotion">
61.   module.exports = function (promotion) {
62.     return parseFloat(promotion) > 0
63.   }
64. </wxs>

复制代码

4.detail.wxml

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

1. <!--pages/order/detail/detail.wxml-->
2. <view class="top">
3.   <view class="card" wx:if="{
4.   { !is_taken }}">
5.     <view class="card-title">取餐号</view>
6.     <view class="card-content">
7.       <view class="card-info">
8.         <text class="card-code">{
9.   { code }}</text>
10.         <text class="card-info-r">正在精心制作中…</text>
11.       </view>
12.       <view class="card-comment" wx:if="{
13.   { comment }}">备注：{
14.   { comment }}</view>
15.       <view class="card-tips">美食制作中，尽快为您服务☺</view>
16.     </view>
17.   </view>
18. </view>
19. <view class="order">
20.   <view class="order-title">订单详情</view>
21.   <view class="order-list">
22.     <!-- 订单商品列表项 -->
23.     <view class="order-item" wx:for="{
24.   { order_food }}" wx:key="id">
25.       <view class="order-item-left">
26.         <image class="order-item-image" mode="widthFix" src="{
27.   { item.image_url }}" />
28.         <view>
29.           <view class="order-item-name">{
30.   { item.name }}</view>
31.           <view class="order-item-number">x {
32.   { item.number }}</view>
33.         </view>
34.       </view>
35.       <view class="order-item-price">{
36.   { priceFormat(item.price * item.number) }}</view>
37.     </view>
38.     <!-- 满减信息 -->
39.     <view class="order-item" wx:if="{
40.   { checkPromotion(promotion) }}">
41.       <view class="order-item-left">
42.         <i class="order-promotion-icon">减</i>满减优惠
43.       </view>
44.       <view class="order-promotion-price">- {
45.   { priceFormat(promotion) }}</view>
46.     </view>
47.     <!-- 小计 -->
48.     <view class="order-item">
49.       <view class="order-item-left">小计</view>
50.       <view class="order-total-price">{
51.   {priceFormat(price)}}</view>
52.     </view>
53.   </view>
54. </view>
55. <view class="list">
56.   <view>
57.     <text>订单号码</text>
58.     <view>{
59.   { sn }}</view>
60.   </view>
61.   <view>
62.     <text>下单时间</text>
63.     <view>{
64.   { create_time }}</view>
65.   </view>
66.   <view>
67.     <text>付款时间</text>
68.     <view>{
69.   { pay_time }}</view>
70.   </view>
71.   <view wx:if="{
72.   { is_taken }}">
73.     <text>取餐时间</text>
74.     <view>{
75.   { taken_time }}</view>
76.   </view>
77. </view>
78. <view class="tips" wx:if="{
79.   { is_taken }}">取餐号{
80.   { code }} 您已取餐</view>
81. <view class="tips" wx:else>请凭此页面至取餐柜台领取美食</view>
82. <wxs module="priceFormat">
83.   module.exports = function (price) {
84.     return price ? '¥ ' + parseFloat(price) : ''
85.   }
86. </wxs>
87. <wxs module="checkPromotion">
88.   module.exports = function (promotion) {
89.     return parseFloat(promotion) > 0
90.   }
91. </wxs>

复制代码

小结优点

• 前后端分离：
  
  
  
  • 前端专注于用户体验，后端专注于数据处置处罚，进步开辟服从和体系可维护性。
    
  
  
• 数据交互标准化：
  
  
  
  • 使用JSON格式举行数据交互，便于前后端分析和处置处罚。
    
  
  
• 扩展性强：
  
  
  
  • 后端接口可独立扩展，支持多端接入（如小步调、Web端等）。
    
  
  
• 安全性高：
  
  
  
  • 数据通过HTTPS传输，后端对用户暗码加密存储，保障用户信息安全。