【微信小程序开发】——奶茶点餐小程序的制作（一）

👨‍💻个人主页 ：@开发者-曼亿点

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由曼亿点原创

👨‍💻 收录于专栏 ：微信小程序开发

⭐🅰⭐

奶茶点餐小程序

文章目录

- ⭐🅰⭐
- ⭐前言⭐
- [🎶 一、点餐首页](#🎶 一、点餐首页)
- [🎶 二、奶茶订单](#🎶 二、奶茶订单)

⭐前言⭐

随着智能手机的普及和移动互联网的迅速发展，微信小程序作为一种新兴的应用形态，正逐渐成为人们日常生活中不可或缺的一部分。尤其是在餐饮行业，微信小程序为商家和顾客提供了更为便捷的服务方式。奶茶作为一种受欢迎的饮品，拥有广泛的消费群体，开发一个功能完善的奶茶点餐小程序不仅可以提升用户体验，还能帮助商家提高运营效率。

本项目旨在开发一个专为奶茶店设计的微信小程序点餐系统，通过现代化的技术手段，实现线上点餐、实时订单管理以及个性化服务。这一小程序的开发过程将包括需求分析、系统设计、前端与后端开发、用户体验优化等多个步骤。

项目背景

奶茶市场在近年来呈现出快速增长的趋势，顾客对便捷和高效的点餐体验有着越来越高的期望。传统的线下点餐方式往往会面临排队等候、信息传递不准确等问题。微信小程序的出现，为解决这些问题提供了新的解决方案。通过微信小程序，顾客可以轻松地浏览菜单、选择喜欢的饮品、进行个性化定制，并快速完成支付。这不仅提升了顾客的购物体验，也使得商家能够更好地管理订单和优化运营流程。

开发目标

用户友好：设计简洁易用的界面，使用户能够快速完成点餐流程，并享受流畅的操作体验。
功能全面：实现奶茶菜单浏览、饮品定制、订单管理、支付功能等核心功能。
系统稳定：确保小程序的稳定性和安全性，处理高并发访问时的性能需求。
数据管理：提供实时的数据统计和分析功能，帮助商家了解销售情况和顾客偏好。
技术概述
为了实现上述目标，本项目将采用微信小程序开发框架，结合前端的WXML和WXSS技术、后端的云函数或服务器端编程，以及数据库的管理和数据处理技术。通过这些技术的有机结合，确保系统的高效性和稳定性。

基本目录展示：其中项目中的图片自行去浏览器中寻找，博主不提供。

前期工作：app.json部分

javascript 复制代码

{
  "pages": [
    "pages/order/list/list",
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list",
    "pages/order/balance/balance",
    "pages/mine/mine",
   
    "pages/order/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FF9C35",
    "navigationBarTitleText": "奶茶可可",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#FF9C35",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/home_s.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/order_s.png",
        "iconPath": "images/order.png",
        "pagePath": "pages/order/list/list",
        "text": "订单"
      },
      {
        "selectedIconPath": "images/mine_s.png",
        "iconPath": "images/mine.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

🎶 一、点餐首页

随着生活节奏的加快，越来越多的消费者希望能够在繁忙的日常中快速完成奶茶点餐，享受美味而无需排队等待。为了满足这一需求，我们推出了这款专为奶茶店设计的微信小程序，通过创新的技术手段，让您的点餐体验更加顺畅、高效。

简洁直观的界面：我们设计了清晰易懂的用户界面，帮助您快速浏览菜单、选择心仪的饮品，并轻松完成订单。
个性化定制：支持多种饮品定制选项，您可以根据自己的口味喜好调整甜度、冰块量等，打造属于您的专属奶茶。
便捷支付方式：集成微信支付功能，让您可以安全、快捷地完成支付，无需再为找零或携带现金烦恼。
实时订单追踪：随时查看您的订单状态，了解制作进度，安心等待美味奶茶的到来。
数据统计与分析：为商家提供全面的数据支持，帮助了解顾客需求和市场趋势，优化服务和产品。
用户体验

我们充分考虑了用户体验，力求通过每一个细节的优化，让您的点餐过程更加顺畅。无论是浏览菜单、选择商品，还是完成支付、查看订单，我们都力求为您提供无缝对接的操作体验。

我们希望通过这款小程序，为奶茶爱好者提供一个高效、便捷的点餐平台，让每一位顾客都能享受到优质的服务和美味的饮品。同时，我们也期待通过数据分析帮助商家更好地了解顾客需求，提升运营效率，推动业务增长。

(1)index.wxml

javascript 复制代码

<!--index.wxml-->
<view>
<!-- 顶部轮播图 -->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 操作按钮 -->
  <view class='btn-bar'>
    <view class='btn-block' bindtap='golist'>
      <view class="btn_op1">开始订餐</view>
    </view>
    <view class='btn-block'>
      <view class="btn_op2">预约订餐</view>
    </view>
  </view>
  <!-- 中部广告 -->
  <view class="ad-box">
    <image src='../../images/2-1.jpg' class="image_ad"></image>
  </view>
  <!-- 底部横向滑动box -->
  <view class='bottom-box'>
    <scroll-view scroll-x="true" class="scroll-box">
      <view class='slide-inline-box'>
        <image src='../../images/bottom_1.png' class='bottom-image'></image>
      </view>
      <view class='slide-inline-box'>
        <image src='../../images/bottom_2.png' class='bottom-image'></image>
      </view>
      <view class='slide-inline-box'>
        <image src='../../images/bottom_3.png' class='bottom-image'></image>
      </view>
    </scroll-view>
  </view>
</view>

(2)index.wxss

javascript 复制代码

/**index.wxss**/
.slide-image{
  width:100%;
  height:280rpx;
}
.btn_op1{
  text-align: center;
  font-size:14px;
  color:#FF9C35;
  padding: 5px 20px;
  border:1px solid #FF9C35;
  border-radius: 25px;
  width: 100px;
  z-index: 10;
}
.btn_op2{
  text-align: center;
  font-size:14px;
  color:#B6D9A9;
  padding: 5px 20px;
  border:1px solid #B6D9A9;
  border-radius: 25px;
  width: 100px;
}
.btn-bar{
  display: flex;
  margin-top:20px;
}
.btn-block{
  width: 50%;
  display: flex;
  justify-content:center;
}
.ad-box{
  margin-top:30px;
  width: 100%;
 text-align: center;
}
.image_ad{
  width: 95%;
  height:370rpx;
}
.scroll-box{
  display:flex;
  white-space: nowrap;
  width:95%
}
.bottom-box{
  margin-top:40rpx;
  display: flex;
  justify-content:center;
}
.bottom-image{
  width:300rpx;
  height:170rpx
}
.slide-inline-box{
  display:inline-block;
  margin-right:10px;
}

(3)index.js

javascript 复制代码

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    //轮播图
    imgUrls: [
      '../../images/1.png',
      '../../images/3.png',
      '../../images/4.png'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },
  onLoad: function () {
    
  },
  golist: function () {
    wx.navigateTo({
      url: '../list/list'
    })
  },
})

运行结果的显示：

🎶 二、奶茶订单

在奶茶点餐小程序中，订单管理是确保顾客体验流畅和商家运营高效的核心功能之一。高效的订单处理不仅能提升顾客满意度，还能优化商家的运营流程，实现业务的持续增长。

订单管理功能

实时订单接收：系统能及时接收顾客的点餐请求，并将订单信息准确传递到商家的后台，确保无延迟处理。
订单状态跟踪：提供详细的订单状态更新，从"待处理"到"制作中"、再到"已完成"，顾客可以实时查看每个阶段的进度。
订单修改与取消：允许顾客在一定时间内对订单进行修改或取消，方便应对临时需求变更。
支付确认：集成支付系统，确保每一笔交易的安全性和准确性，自动更新订单状态。
历史订单记录：提供订单历史查询功能，帮助顾客和商家查看和管理过去的交易记录。
设计目标
简化操作：通过直观的界面和流畅的操作流程，简化订单管理的复杂性，让商家能够高效处理每一笔订单。
提高准确性：减少人工干预，通过自动化的数据处理，降低订单出错的风险。
增强透明度：提供清晰的订单状态跟踪，让顾客能够实时了解订单进度，增强服务透明度。

开发愿景

我们的目标是通过精确的订单管理功能，为奶茶店提供一个可靠、高效的工具，不仅提升顾客的使用体验，也帮助商家优化运营，提升整体服务水平。通过这一系统，我们希望能够推动奶茶店的业务增长，并为每一位顾客带来满意的购物体验。

(1)list.wxml

javascript 复制代码

<view>

  <view class="shopping"><!----><!--大框架-->
  <view class="nav_left"><!--侧边栏盒子-->
    <block wx:for="{{leftitem}}" wx:key="id">
      <!--这里定义了一个变量index，并把这个变量赋值为index，这个是wx：for循环产生的下标，传到js，通过这个下标完成商品的显示-->
      <view class="nav_left_items {{count==index?'active-tag':''}}" bindtap="switchRightTab" data-index="{{index}}"><!--文字盒子-->
        {{item.name}}
      </view>
    </block>
  </view>
  <view class="nav_right"><!--右边主体部分-->
    <!--通过侧边栏的选择传到js中的index的值与js中data数据中的tag进行比较，完成商品的分类显示-->
    <view class="nav_right_goods" wx:for="{{rightitem}}" wx:key="id" wx:if="{{count==item.tag}}" bindtap="changeImage" ><!--商品详情的盒子-->
      <view bindtap="click_nav_right" data-index_two="{{index}}" class="nav">
        <image src="{{item.url}}" mode="widthFix" style="width: 180rpx;height: 180rpx;border-radius: 20rpx;"></image><!--商品图片-->
        <view class="nav_right_textandprice"><!--文字和价格的盒子-->
          <text class="nav_right_text" style="color: black; font-size: 12px;">{{item.name}}</text><!--商品文字-->
          <view class="nav_right_price"><!--商品价格-->
            ￥{{item.price}}.00
          </view>
        </view>
      </view>
    </view>
  </view>
</view>


  <!-- 底部操作菜单 -->
  <view class="operate-bar" wx:if="{{loading}}">
    <view class='gouwuche'>
      <view style='padding:5px;display:flex'>
        <i class="iconfont icon-gouwuchefill gouwuche-icon {{sumMonney!=0?'activity-color':'' }}" bindtap="showCartList">
          <span class="number-msg" wx:if="{{cartList.length!=0}}">{{cupNumber}}</span>
        </i>

        <view class='gouwuche-price' wx:if="{{sumMonney==0}}">购物车是空的</view>
        <view class='gouwuche-price' style='color:white;font-size:18px' wx:if="{{sumMonney!=0}}">¥ {{sumMonney}}.00</view>
      </view>
    </view>
    <view class="submit-btn {{sumMonney!=0?'activity-color-bg':'' }}" bindtap='goBalance'>
      <view class="submit-btn-label {{sumMonney!=0?'color-white':'' }}">选好了</view>
    </view>
  </view>
</view>
<!-- 选择弹窗 -->
<view class="drawer_screen" bindtap="selectInfo" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view class="drawer_box_ad" wx:if="{{showModalStatus}}">
  <view class="drawer_content_ad">
    <view style='font-size:16px;display:flex;justify-content:center;  '> {{listData[currentType].foods[currentIndex].name}} </view>
    <view class="select-line-nav">规格</view>
    <view style='display:flex'>
      <view class="select-tab {{index==sizeIndex?'select-active':''}}" wx:for="{{size}}" wx:key="unique" data-type='0' data-index='{{index}}' bindtap='chooseSE'>{{item}}</view>
    </view>
    <view class="select-line-nav">糖度</view>
    <view style='display:flex'>
      <view class="select-tab {{index==sugarIndex?'select-active':''}}" wx:for="{{sugar}}" wx:key="unique" bindtap='chooseSE' data-type='1' data-index='{{index}}'>{{item}}</view>
    </view>
    <view class="select-line-nav">温度</view>
    <view style='display:flex'>
      <view class="select-tab {{index==temIndex?'select-active':''}}" wx:for="{{tem}}" wx:key="unique" bindtap='chooseSE' data-type='2' data-index='{{index}}'>{{item}}</view>
    </view>
    <view class="select-price">¥{{listData[currentType].foods[currentIndex].specfoods[0].price}}.00
      <button class="btn-putIn" bindtap='addToCart'>加入购物车</button>
    </view>
  </view>
</view>
<!-- 购物车 -->
<view class="drawer_screen" bindtap="showCartList" data-statu="close" wx:if="{{showCart}}"></view>
<view class="cartlist-float" wx:if="{{showCart}}">
  <view style='background:#F0F0F0;height:30px'>
    <label class='label-cart-bar'>
      <label style='padding:5px'>已选商品</label>
    </label>
    <label class='icon-clear' bindtap='clearCartList'>
      <i class="iconfont icon-lajitong"></i>
      <label class="label-clear">清空购物车</label>
    </label>
  </view>
  <scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}">

    <view class='cart-list-box' wx:for="{{cartList}}" wx:key="unique" style='border-bottom:1px #E3E3E3 solid'>
      <view class='list-info'>
        <view>{{item.name}}</view>
        <view class='list-info-size'>{{item.detail}}</view>
      </view>
      <view style='width:50%;padding:10px;'>
        <view style='float:right'>
          <label class='activity-color'>¥ {{item.sum}}.00</label>
          <i class="iconfont icon-jian icon-li-circle" data-index="{{index}}" bindtap="decNumber"></i>
          {{item.number}}
          <i class="iconfont icon-jiahao2fill activity-color font20" data-index="{{index}}" bindtap="addNumber"></i>
        </view>
      </view>
    </view>
  </scroll-view>
</view>
<!-- 优惠宣传条 -->
<view class='cut-bar' wx:if="{{sumMonney==0&&loading}}">
  <label>满20立减3元(手机点餐专享)</label>
</view>
<view class='cut-bar' wx:if="{{sumMonney<20&&sumMonney!=0&&loading}}">
  <label>满20立减3元,还差{{20-sumMonney}}元,去凑单></label>
</view>

(2)list.wxss

/* pages/list/list.wxss */

.hr {
 
  border: 1px solid #ddbcbc;
 
  width: 100%;
 
  opacity: 0.6;
 
}
 
/*输入框样式*/
 
input {
 
  margin: 15rpx 32rpx;
 
  border: 1px solid #FF9C35;
 
  border-radius: 50rpx;
 
  text-align: center;
 
  font-size: 32rpx;
 
}
 
/*布局样式*/
 
.content {
 
  display: flex;
 
  flex-direction: row;
 
}
 
/*大框架*/
.shopping {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: 	#808080;
}
/*左侧栏主盒子*/
.nav_left{
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  width: 25%;
  height: 100%;
  /*主盒子设置背景色为灰色*/
  background: #f5f5f5;
  text-align: center;
}
.nav_left .nav_left_items{
  height: 30px;
  line-height: 30px;
  padding: 6px 0;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}
.nav_right{
  /*右侧盒子使用了绝对定位*/
  position: absolute;
  top: 0;
  right: 0;
  flex: 1;
  width: 75%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
.nav{
  display: flex;
  padding: 40rpx;
}
.nav_right_textandprice{
  display: flex;
  flex-direction: column;
  padding-left: 20rpx;
  position: relative;
}
.nav_right_price{
  color: #FF9C35;
  position: absolute;
  bottom: 20rpx;
}
.active-tag{
  background-color:	white;
  color: #FF9C35;
  border-left: 5px solid #FF9C35;
  border-radius: 5px;
}




.operate-bar{
  z-index: 1001; 
  position: absolute;
  bottom: 0px;
  height:55px;
  width:100%;
  display: flex;
}
.gouwuche{
  width:75%;
  background:#353535;
  height: 100%; 
  
}
.gouwuche-icon{
  font-size:40px;
  color:#87888E;
  margin-left:10px;
   position: relative;
}
.number-msg{
  padding: 1px 7px;
  border-radius:50%;
  background:#FF9C35;
  color:white;
  font-size:14px;
  position: absolute;
  text-align: center;
  top:0px;
  right:-5px;
}

.gouwuche-price{
  color:#A9A9A9;
  display:flex;
  align-items: center;
  margin-left:10px;
  font-size:15px
}
.submit-btn{
  height:100%;
  background:#F7F7F7;
  width:25%;
  display:flex;
}
.submit-btn-label{
  color:#A9A9A9;
  font-size:15px;
  margin:auto;
}

.drawer_screen {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
}  
  
.drawer_box_ad { 
  margin-left: 7%; 
  width: 86%; 
  overflow: hidden;  
  position: fixed;  
  top: 15%; 
  z-index: 1001;  
  background: #FFFFFF;  
  border-radius: 4px;
} 
.cartlist-float{  
  width: 100%; 
  overflow: hidden;  
  position: fixed;   
  z-index: 1001;
  bottom: 55px;
  max-height: 250px;  
} 


.drawer_content_ad {  
  height: 289px;
  width: 100%;
  padding: 10px;
}

.select-line-nav{
  font-size:12px;
  margin-left:5px;
  margin-top:10px;
  color:#ABABAB;
}

.select-tab{
  padding:5px 7px;
  border:1px solid #ABABAB;
  font-size:12px;
  border-radius:5px;
  margin:5px;
  color:#ABABAB;
  z-index:1002;
}
.select-active{
  color:#FF9C35;
  border:1px solid #FF9C35;
}
.select-price{
  font-size:14px;
  color:#FF9C35;
  margin-top:20px;
  display:flex;
  align-items: center;
  margin-left:10px;
}
.btn-putIn{
  height:40px;
  width:100px;
  font-size:14px;
  background:#FF9C35;
  color:white;
  margin-right:20px;
}


.activity-color{
  color:#FF9C35;
}
.color-white{
  color:white;
}
.activity-color-bg{
  background:#FF9C35;
}

.label-cart-bar{
  color:#878787;
  font-size:12px;
  border-left:4px solid #FF9C35;
  margin-left: 20px;
}
.icon-clear{
    color:#878787;
    float: right;
    margin-right: 10px;
}
.label-clear{
    color:#878787;
    font-size: 12px;
}
.cart-list-box{
  background:#FFFFFF;
  display:flex;
  font-size:13px;
}
.list-info{
  width:50%;
  padding:5px 15px;
}
.list-info-size{
  font-size:10px;
  color:#B1B1B1;
}
.icon-li-circle{
  margin-left:15px;
  font-size:20px
}
.font20{
  font-size:20px
}
.cart-scroll-list{
  height:450rpx;
}
.cut-bar{
  height:20px; 
  position: fixed;
  bottom:55px;
  background:#FFCD9B;
  width:100%;
  color:#FFF7EC;
  font-size:12px;
  text-align:center;
}

(3)list.js

javascript 复制代码

// pages/list/list.js
Page({

  changeImage:function(){
    wx.navigateTo({
      url: '/pages/qin/qin',
    })
    
      },
       
      data: {
        //leftitem是定义左边侧边栏的选项，rightitem是定义右边商品的展示，tag主要是把商品进行一个类别的划分
        leftitem:[
          {id:1,name:"真鲜果茶"},
          {id:2,name:"醇香奶茶"},
          {id:3,name:"轻乳系列"},
          {id:4,name:"新鲜冰淇淋"},
          {id:5,name:"芝士奶盖"},
          {id:6,name:"原味纯茶"},
          {id:7,name:"美味咖啡"}
        ],
        rightitem:[
          {id:1,name:"菠萝甜心橘",price:8,url:"../../images/caomeibobo.jpg",tag:0,},
          {id:1,name:"草莓啵啵",price:9,url:"../../images/molilvcha.jpg",tag:0},
          {id:1,name:"柠檬绿茶",price:5,url:"../../images/ningmenglvcha.jpg",tag:0},
          {id:2,name:"芋圆奶茶",price:8,url:"../../images/yuanweibingqiling.jpg",tag:1},
          {id:2,name:"布丁奶茶",price:7,url:"../../images/zhishilvcha.jpg",tag:1},
          {id:3,name:"草莓椰奶露",price:7,url:"../../images/zhishisijic.jpg",tag:2},
          
        ],
        count:0,//我们把前端的index值传到js中，并把它赋值给count，储存在js中，方便右边商品通过count完成与侧边栏的相同的那一类的商品展示，同时完成侧边栏的样式，保证选中的选项有与其他未选择的选项的区别
      },
      click_nav_right(event){//这个主要是完成商品分类页的数据传递到商品详情页
        var data_one=event.currentTarget.dataset.index_two//前端的右边商品定义了一个index_two这个变量，我们在js中把这个值赋值给data变量，并传递到商品详情页
        //console.log(data_one)
        wx.navigateTo({//通过这个函数，完成两个页面中数据的传递，具体的用法可以到微信的小程序文档中搜索，当然除了用这个函数，也可以通过引用全局变量的方式完成数据的传递
          url: '/pages/detail/detail?data='+data_one,
        })
      },
      switchRightTab(event){
        this.setData({
          count:event.target.dataset.index
        });//改变count原本的值，完成右侧商品的根据侧边栏的不同展示商品
      },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var sysinfo = wx.getSystemInfoSync().windowHeight;
    console.log(sysinfo)
    wx.showLoading({
      title: '努力加载中',
    })
    //将本来的后台换成了easy-mock 的接口，所有数据一次请求完 略大。。
    wx.request({
      url: 'https://easy-mock.com/mock/59abab95e0dc66334199cc5f/coco/aa',
      method: 'GET',
      data: {},
      header: {
        'Accept': 'application/json'
      },
      success: function (res) {
        wx.hideLoading();
        console.log(res)
        that.setData({
          listData: res.data,
          loading: true
        })
      }
    })
  },
  selectMenu: function (e) {
    var index = e.currentTarget.dataset.index
    console.log(index)
    this.setData({
      activeIndex: index,
      toView: 'a' + index,
      // scrollTop: 1186
    })
    console.log(this.data.toView);
  },
  scroll: function (e) {
    console.log(e)
    var dis = e.detail.scrollTop
    if (dis > 0 && dis < 1189) {
      this.setData({
        activeIndex: 0,
      })
    }
    if (dis > 1189 && dis < 1867) {
      this.setData({
        activeIndex: 1,
      })
    }
    if (dis > 1867 && dis < 2180) {
      this.setData({
        activeIndex: 2,
      })
    }
    if (dis > 2180 && dis < 2785) {
      this.setData({
        activeIndex: 3,
      })
    }
    if (dis > 2785 && dis < 2879) {
      this.setData({
        activeIndex: 4,
      })
    }
    if (dis > 2879 && dis < 4287) {
      this.setData({
        activeIndex: 5,
      })
    }
    if (dis > 4287 && dis < 4454) {
      this.setData({
        activeIndex: 6,
      })
    }
    if (dis > 4454 && dis < 4986) {
      this.setData({
        activeIndex: 7,
      })
    }
    if (dis > 4986) {
      this.setData({
        activeIndex: 8,
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  selectInfo: function (e) {
    var type = e.currentTarget.dataset.type;
    var index = e.currentTarget.dataset.index;
    this.setData({
      showModalStatus: !this.data.showModalStatus,
      currentType: type,
      currentIndex: index,
      sizeIndex: 0,
      sugarIndex: 0,
      temIndex: 0
    });
  },

  chooseSE: function (e) {
    var index = e.currentTarget.dataset.index;
    var type = e.currentTarget.dataset.type;
    if (type == 0) {
      this.setData({
        sizeIndex: index
      });
    }
    if (type == 1) {
      this.setData({
        sugarIndex: index
      });
    }
    if (type == 2) {
      this.setData({
        temIndex: index
      });
    }
  },

  addToCart: function () {
    var a = this.data
    var addItem = {
      "name": a.listData[a.currentType].foods[a.currentIndex].name,
      "price": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,
      "detail": a.size[a.sizeIndex] + "+" + a.sugar[a.sugarIndex] + "+" + a.tem[a.temIndex],
      "number": 1,
      "sum": a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price,
    }
    var sumMonney = a.sumMonney + a.listData[a.currentType].foods[a.currentIndex].specfoods[0].price;
    var cartList = this.data.cartList;
    cartList.push(addItem);
    this.setData({
      cartList: cartList,
      showModalStatus: false,
      sumMonney: sumMonney,
      cupNumber: a.cupNumber + 1
    });
    console.log(this.data.cartList)
  },
  showCartList: function () {
    console.log(this.data.showCart)
    if (this.data.cartList.length != 0) {
      this.setData({
        showCart: !this.data.showCart,
      });
    }

  },
  clearCartList: function () {
    this.setData({
      cartList: [],
      showCart: false,
      sumMonney: 0
    });
  },
  addNumber: function (e) {
    var index = e.currentTarget.dataset.index;
    console.log(index)
    var cartList = this.data.cartList;
    cartList[index].number++;
    var sum = this.data.sumMonney + cartList[index].price;
    cartList[index].sum += cartList[index].price;

    this.setData({
      cartList: cartList,
      sumMonney: sum,
      cupNumber: this.data.cupNumber+1
    });
  },
  decNumber: function (e) {
    var index = e.currentTarget.dataset.index;
    console.log(index)
    var cartList = this.data.cartList;

    var sum = this.data.sumMonney - cartList[index].price;
    cartList[index].sum -= cartList[index].price;
    cartList[index].number == 1 ? cartList.splice(index, 1) : cartList[index].number--;
    this.setData({
      cartList: cartList,
      sumMonney: sum,
      showCart: cartList.length == 0 ? false : true,
      cupNumber: this.data.cupNumber-1
    });
  },
  goBalance: function () {
    if (this.data.sumMonney != 0) {
      wx.setStorageSync('cartList', this.data.cartList);
      wx.setStorageSync('sumMonney', this.data.sumMonney);
      wx.setStorageSync('cupNumber', this.data.cupNumber);
      wx.navigateTo({
        url: '../order/balance/balance'
      })
    }
  },

  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染

持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序

你们的支持就是曼亿点创作的动力💖💖💖