代码示例：
首先，我们需要在小程序的 app.json 文件中添加一个页面的配置：
{
"pages": [
"pages/index/index",
"pages/queue/queue"
],
"window": {
"navigationBarTitleText": "排队叫号"
}
}
然后，我们在 pages/queue/queue.wxml 文件中设计一个简单的排队叫号页面：
<view class="container">
<view class="queue-info">
<view class="queue-number">{
{queueNumber}}</view>
<view class="queue-tip">当前排队人数</view>
</view>
<view class="queue-actions">
<button class="queue-btn" bindtap="takeNumber">取号排队</button>
<button class="queue-btn" bindtap="cancelNumber">取消排队</button>
</view>
</view>
在上面的代码中，我们使用了 view 标签来布局页面，使用了 button 标签来添加两个按钮。我们还添加了一些样式来美化页面。
接下来，我们在 pages/queue/queue.js 文件中添加一些逻辑和数据：
Page({
data: {
queueNumber: 0,
isTakingNumber: false
},
takeNumber: function() {
if (!this.data.isTakingNumber) {
wx.showLoading({
title: '正在取号...'
});
// TODO: 请求服务器接口，获取排队号码，并更新页面数据
}
},
cancelNumber: function() {
if (this.data.queueNumber > 0) {
wx.showModal({
title: '取消排队',
content: '您确定要取消排队吗？',
success: function(res) {
if (res.confirm) {
// TODO: 请求服务器接口，取消排队，并更新页面数据
}
}
});
} else {
wx.showToast({
title: '您还没有取号',
icon: 'none'
});
}
}
});
在上面的代码中，我们使用了 Page 构造函数来创建一个页面，定义了一些初始的数据，以及两个点击事件函数。在 takeNumber 函数中，我们会向服务器发送一个请求，获取排队号码，并更新页面数据；在 cancelNumber 函数中，我们会弹出一个对话框提示用户是否要取消排队，并对用户的选择做出相应的处理。
最后，我们可以在 app.wxss 文件中添加一些样式来美化页面：
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
font-size: 20rpx;
color: #333333;
}
.queue-info {
margin-bottom: 30rpx;
}
.queue-number {
font-size: 100rpx;
}
.queue-tip {
font-size: 24rpx;
margin-top: 10rpx;
}
.queue-actions {
display: flex;
justify-content: space-between;
width: 100%;
}
.queue-btn {
width: 40%;
height: 80rpx;
border: 2rpx solid #333333;
border-radius: 8rpx;
background-color: #FFFFFF;
color: #333333;
font-size: 28rpx;
}
到此为止，我们就完成了一个简单的微信小程序排队叫号页面的设计。当用户点击排队按钮时，会向服务器发送请求，获取排队号码，并更新页面数据；当用户点击取消排队按钮时，会弹出对话框提示用户是否要取消排队，并向服务器发送取消排队的请求。
以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。
源码获取方法：
需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~
会员学习群：【一对一答疑】
如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）