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

---

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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐

---

---

---

⭐前言⭐

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

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

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

开发目标

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

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

前期工作：app.json部分

{"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

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

/**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

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

<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

// 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.indexconsole.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.scrollTopif (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.datavar 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 () {}
})

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖