第九节 ”我的“页面制作
这个项目是当时大一大二自学前端的时候做的一个算是比较大的项目,主体原型是汕头大学校团委微信小程序,该微信小程序使用微信原生语法和腾讯云开发框架开发,旨在简化汕头大学校团委的教师预约申请和活动申请的审批流程。因为一切的代码以及框架都是从零搭建的,经过了几个版本的迭代和摸爬滚打的探索,已经稳定运行了将近两年的时间。所以想写这个系列的文章,一方面是分享一些开发经历以及心得,另一方面是对学校组织贡献一点微薄之力~
希望通过这个系列的博客,能够深入介绍“汕头大学校团委微信小程序”的开发过程、功能实现和技术细节,帮助更多的开发者和用户了解和使用该小程序。我们也欢迎更多的开发者为这个开源项目做出贡献,共同完善和优化这个项目。欢迎提交PR请求和留下你的问题。这个项目单纯为爱发电,所以不会有任何金钱相关的利益。如果这个项目对你有帮助,可以给我一个小星星吗?
前言
在第八节的结尾我们得知,一个活动有多个状态的值,这一节我们将制作“我的”页面,在这个页面我们会展示自己申请全部活动,并且根据每个状态制作其不同的样式。如下图
”我的“页面的思维导图(这节我们不实现第三点的功能)
知道了大概的内容,那么我们现在开始吧~
成品图
注:这里只显示自己申请的活动,若有多个自己申请的活动,那么盒子将会从上到下依次排列
核心思想
1.页面一运行就调用云函数来获取用户的openid
2.请求查询数据库里的记录,利用获取的openid来进行筛选
3.请求到符合条件的数据通过this.setData方法赋给data中的一个空数组
4.在wxml中通过wx:for对其数组进行列表渲染
5.使用wx:if配合state的值进行条件渲染
实现步骤
WXML:
如果前面已经对所有记录进行了列表渲染,那么在后面调用每个记录的单个属性值则可用item._属性的格式。
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!-- 活动 -->
<view class="mine_application">
<!-- 活动标题 -->
<view class="mine_application_title">
我发起的活动<image src="../../icon/backaround.png" style="width: 40px; height: 40px;position: relative; left: 140px; top: 7px;" bindtap="back"></image>
</view>
<block wx:for="{{infor}}"></block>
<!-- 活动内容 点击可跳转至详情页面 -->
<view class="mine_application_content" wx:for="{{imfor}}" >
<view class="event" bindtap="goDetail" data-id="{{item._id}}">
<view class="">活动名称:{{item.a1_huodongName}}</view>
<view class="eventTime">活动开始时间:{{item.a2_startTime}}</view>
</view>
<!-- 右上角的状态栏 -->
<!-- 用条件渲染来展示多种样式的活动内容 -->
<!-- 状态为3代表已结束,2为已驳回,1为已通过,0为审核中 -->
<block wx:if="{{item.state==0}}">
<!-- 审核中 -->
<view class="state_0">
<view class="state_content">审核中</view>
</view>
<!-- 活动下方的小点 -->
<image src="../../icon/yellow.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
</block>
<block wx:if="{{item.state==1}}">
<!-- 已通过 -->
<view class="state_1">
<view class="state_content">已通过</view>
</view>
<!-- 活动下方的小点 -->
<image src="../../icon/green.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
<view class="next_location" >
<button class="button_detail" size="mini" bindtap="" data-id="{{item._id}}">活动总结 >
</button>
</view>
</block>
<block wx:if="{{item.state==2}}">
<!-- 已驳回 -->
<view class="state_2">
<view class="state_content">已驳回</view>
</view>
<!-- 活动下方的小点 -->
<image src="../../icon/red.png" style="width: 11px;height: 11px;position: absolute;left: 15px;bottom: 15px;"></image>
<view class="reject_location">
<button class="button_detail" size="mini" bindtap="" data-id="{{item._id}}">驳回详情 >
</button>
</view>
</block>
</view>
</view>
</view>
</view>
WXSS:
.button_location{
border-radius: 80rpx;
margin-top: 55%;
color:#FFFFFF;
background-color: #D43030;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);
}
.Teacherbutton_location{
margin-top: 10px;
border-radius: 80rpx;
color:black;
background-color: #FFFFFF;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
.mine_application{
margin-left: 15px;
margin-right: 15px;
}
.mine_application_title{
border-bottom: 5rpx solid #A6A6A6;
font-size: 28px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.mine_application_content{
height: 150px;
width: 100%;
display: flex;
position: relative;
box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.1);
margin-top: 20px;
border-radius: 15px;
}
.event{
font-size: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
margin:15px;
width: 90%;
flex: 1;
}
.eventTime{
margin-top: 5px;
font-size: 14px;
color: #A0A9BD;
}
.state_0{
float: right;
width: 80px;
height: 40px;
background-color:#FFC300;
border-radius: 0 15px 0 15px;
}
.state_1{
width: 80px;
height: 40px;
background-color:#43CF7C;
border-radius: 0 15px 0 15px;
z-index: 2;
}
.state_2{
width: 80px;
height: 40px;
background-color:#FF5733;
border-radius: 0 15px 0 15px;
z-index: 2;
}
.state_content{
position: relative;
margin-top:10px ;
margin-left: 15px;
font-size: 12;
color: white;
}
.button_detail{
background-color: white;
color:#727885;
}
.next_location{
width:110px;
height:40px;
position: absolute;
z-index: 1;
bottom: 0px;
right: 0px;
}
.reject_location{
width:110px;
height:40px;
position: absolute;
z-index: 1;
bottom: 0px;
right: 0px;
}
JS:
在这里通过调用了getData云函数来获取用户id跟注册页面同理,同时利用了where多重查询的条件,只查询了第一次待审批,已通过、已驳回状态的活动(利用了command)
const db = wx.cloud.database()
const app = getApp()
const _ = db.command
Page({
data: {
list:[],
imfor:[],
},
//获取活动列表
getList(){
//调用云函数来获取用户openid
wx.cloud.callFunction({
name:'getData'
})
.then(res=>{
console.log("用户openid",res.result.openid)
db.collection("huoDong")
.where({
//使用用户的openid来筛选活动
_openid:res.result.openid,
// 使用state的值来筛选活动,过滤掉已结束的活动
state: _.lt(3)
})
.get()
.then(res=>{
console.log('查询数据库成功',res.data)
//将返回的res.data里面的值赋值给list
this.setData({
imfor :res.data,
})
wx.stopPullDownRefresh()
console.log("结束刷新")
})
})
.catch(err=>{
console.log("请求云函数失败",err)
})
},
onLoad() {
// 启动的时候自动刷新页面
wx.startPullDownRefresh()
this.getList()
},
//监听下拉刷新
onPullDownRefresh:function(){
console.log('用户刷新了页面')
//刷新页面数据
this.getList()
},
//返回首页并退出登录
back(){
console.log("点击了返回")
wx.showModal({
title: '退出登录并返回主页',
content: '您确定退出用户端吗?',
success (res) {
if (res.confirm) {
wx.redirectTo({
url: '../choicePage/choicePage',
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
题外话
这一系列文章会持续更新,手把手教你从零创建一个小程序项目!并且免费提供源码。如果有什么疑问欢迎大家在底下留言讨论!你的赞和收藏是我最大的动力!!