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

在这里插入图片描述


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

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

👨‍💻 本文由 曼亿点 原创

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

🅰


奶茶点餐小程序


文章目录

    • 🅰
    • 前言
    • 🎶 一、点餐首页
      • (1)index.wxml
      • (2)index.wxss
      • (3)index.js
    • 🎶 二、奶茶订单
      • (1)list.wxml
      • (2)list.wxss
      • (3)list.js
        • 结束语🥇


前言

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

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

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

开发目标

  • 用户友好:设计简洁易用的界面,使用户能够快速完成点餐流程,并享受流畅的操作体验。
  • 功能全面:实现奶茶菜单浏览、饮品定制、订单管理、支付功能等核心功能。
  • 系统稳定:确保小程序的稳定性和安全性,处理高并发访问时的性能需求。
  • 数据管理:提供实时的数据统计和分析功能,帮助商家了解销售情况和顾客偏好。
    技术概述
      为了实现上述目标,本项目将采用微信小程序开发框架,结合前端的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 () {}
})

运行结果的显示:
在这里插入图片描述

结束语🥇

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/395185.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机—智能垃圾桶(定时器)

一. 定时器 1. 简介 C51中的定时器和计数器是同一个硬件电路支持的&#xff0c;通过寄存器配置不同&#xff0c;就可以将他当做定时器或者计数器使用。 确切的说&#xff0c;定时器和计数器区别是致使他们背后的计数存储器加1的信号不同。当配置为定时器使用时&#xff0c;每…

数据结构的基本概念

数据结构的基本概念 数据是什么&#xff1f; 数据 &#xff1a; 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别&#xff08;二进制0|1&#xff09;和处理的符号的集合。数据是计算机程序加工的原料。 早期计算机处理的…

【代码随想录】有序数组的平方

本博文为《代码随想录》的学习笔记&#xff0c;原文链接&#xff1a;代码随想录 题目 977. 有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&…

【物联网设备端开发】使用QEMU模拟ESP硬件运行ESP-IDF

目录 一&#xff0c;开发环境搭建 1.1 安装ESP-IDF 1.2 安装vscode插件 1.3 在ESP-IDF插件配置ESP-IDF开发配置 1.4 下载IOTDeviceSDK 设备端开发代码 1.5 通过ESP-IDF插件编译好镜像 1.6 构建QEMU docker镜像 1.7 使用QEMU容器运行镜像 二&#xff0c;搭建QEMU环境步…

PTrade常见问题系列22

反馈定义的上午7点执行run_daily函数&#xff0c;但是每周一上午都没法正常执行&#xff1f; 1、run_daily函数加载在initialize函数中&#xff0c;执行后才会创建定时任务&#xff1b; 2、由于周末会有例行重启操作&#xff0c;在重启以后拉起交易时相当于非交易日启动的交易…

C到C++——C++基础

C是一种通用的、静态类型的、跨平台的编程语言。它是在1979年由Bjarne Stroustrup创建的&#xff0c;最初是作为C语言的扩展来支持面向对象编程。 C在保留C语言的特性的同时&#xff0c;添加了许多其他的功能&#xff0c;包括类、对象、继承、多态、模板等。这使得C成为了一种…

大数据面试SQL(五):查询最近一笔有效订单

文章目录 查询最近一笔有效订单 一、题目 二、分析 三、SQL实战 四、样例数据参考 查询最近一笔有效订单 一、题目 现有订单表t5_order&#xff0c;包含订单ID&#xff0c;订单时间&#xff0c;下单用户&#xff0c;当前订单是否有效。 请查询出每笔订单的上一笔有效订…

Vue - 关于vue-kinesis 移动动画组件

Vue - 关于vue-kinesis 移动动画组件 vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果&#xff1b;除此之外&#xff0c;vue-kinesis 还可以设置音频文件&#xff0c;根据音频频率来控制动画的跳动效果。 一、安装vue-kinesis Vue2版本&#xff1a; 1.安装 …

2024.8.08(python)

一、搭建python环境 1、检查是否安装python [rootpython ~]# yum list installed | grep python [rootpython ~]# yum list | grep python3 2、安装python3 [rootpython ~]# yum -y install python3 安装3.12可以使用源码安装 3、查看版本信息 [rootpython ~]# python3 --vers…

数字信号处理2: 离散信号与系统的频谱分析

文章目录 前言一、实验目的二、实验设备三、实验内容四、实验原理五、实验步骤1.序列的离散傅里叶变换及分析2.利用共轭对称性&#xff0c;设计高效算法计算2个N点实序列的DFT。3.线性卷积及循环卷积的实现及二者关系分析4.比较DFT和FFT的运算时间5.利用FFT求信号频谱及分析采样…

游戏行业最新报告 | 2024年1—6月:中国游戏市场收入上升至1472.67亿元

2024年1—6月收入&#xff1a;达1472.67亿元&#xff0c;同比增长2.08% 伽马数据提供的数据显示&#xff1a;2024年1—6月&#xff0c;国内游戏市场实际销售收入1472.67亿元&#xff0c;同比增长2.08%&#xff0c;增长趋势较为平稳。 中国市场实际销售收入及增长率 游戏用户达…

(24)(24.2) Minim OSD快速安装指南(一)

文章目录 前言 1 概述 2 基本接线图 3 关键冷却条件的可选设置 4 固件可用于MinimOSD 5 MWOSD 前言 MinimOSD “屏幕显示”是一个小型电路板&#xff0c;它从你的自动驾驶仪中提取遥测数据&#xff0c;并将其覆盖在你的第一人称视图监视器上(First Person View)。Minim …

极限挑战:40亿个非负整数中找到没有出现的数(bit数组)

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 大家好!我是小米,一个积极活泼、热爱分享技术的29岁程序员。今天,我们一起来探讨一个有趣且实用的算法问题:如何在40亿个非负整数中找到没有出现的数…

Powershell 禁用系统更新

创建一个关闭系统更新脚本 脚本系统兼容10,11,2012,206,2019,2022,2025powershell-install-stop-System-update.ps1 <# Powershell Install stop System update +++++++++++++++++++++++++++++++++++++++++++++++++++++ + _____ _____ _ …

供应商较多的汽车制造业如何选择供应商协同平台?

汽车制造业的供应商种类繁多&#xff0c;根据供应链的不同环节和产品特性&#xff0c;可以大致分为以下几类。 按供应链等级分包括&#xff1a; 一级供应商通常具有较高的技术水平和生产能力&#xff0c;能够满足汽车厂商对零部件的高品质、高性能和高可靠性的要求。 二级供应…

ImportError: DLL load failed while importing _rust: 找不到指定的程序的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【Android Studio】Webview 内核升级得三种方法

【Android Studio】Webview 内核升级得三种方法 前言X5 腾讯组件crosswalk开源项目webview升级加载的内核&#xff08;完美解决&#xff09;总结 前言 在APP 中进行网页加载&#xff0c;一般采用原生自带的Webview 组件&#xff0c;但在需要加载高版本网页的时候&#xff0c;有…

【CSS入门】第三课 - padding内填充

上一节&#xff0c;我们说了margin外边距&#xff0c;还举了个例子&#xff0c;比如两个人紧挨着站着&#xff0c;如果两个人冬天穿了棉袄&#xff0c;很厚很厚的棉袄&#xff0c;那么他俩占据的空间就会增加&#xff0c;他俩之间的真实距离也会增加。 这一节&#xff0c;我们…

《暗黑破坏神 IV》是什么类型的游戏,苹果电脑能玩暗黑破坏神吗 crossover玩暗黑4

《暗黑破坏神 IV》&#xff08;Diablo IV&#xff09;是由暴雪娱乐开发的一款动作角色扮演游戏&#xff08;Action RPG&#xff09;&#xff0c;是广受欢迎的《暗黑破坏神》系列的最新作品。暗黑破坏神4拥有出色的游戏画面、音效和丰富的游戏玩法&#xff0c;非常值得玩家们去尝…

SpringBoot3热部署

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency> 默认就是,无需配置 可以了…