【微信小程序】日历打卡之打卡功能开发
2025-08-20 14:03:40相关文章
【微信小程序】开发者工具以及小程序框架介绍https://blog.csdn.net/qq_17470165/article/details/80200857
【微信小程序】日历打卡之小程序发现页https://blog.csdn.net/qq_17470165/article/details/80202743
【微信小程序】日历打卡之创建打卡活动https://blog.csdn.net/qq_17470165/article/details/80215111
前言
本篇文章将介绍打卡小程序打卡页面相关功能的开发，涉及到的知识点有小程序分享功能、动画实现、setData修改数组值等问题。
需求
打卡页面部门功能需求图。
1、小程序分享功能
小程序中分享的入口有两处，第一处是menu:右上角转发菜单,第二处是页面内通过
.share-layout {
position: relative;
width: 100%;
}
.detail-cover {
width: 100%;
height: 312rpx;
}
.share-icon{
position: absolute;
right: 30rpx;
top: 30rpx;
width: 70rpx;
height: 70rpx;
}
.share-button {
z-index: 100;
border: 0;
opacity: 0;
position: absolute;
right: 30rpx;
top: 30rpx;
width: 70rpx;
height: 70rpx;
}
实现方式很简单，上面说到小程序在页面内分享只能通过
/**
* 用户点击右分享操作
*/
onShareAppMessage: function () {
var that = this;
return {
// 分享标题
title: this.data.dakaName,
//分享路径,用户点击微信中分享卡片进入小程序的页面,以及携带的参数
path: 'pages/signdetail/notjoin?userId' + wx.getStorageSync('userId')
+ "&activityId=" + this.data.activityId,
success: function (res) {
//此处为了记录分享次数
that.shareCallback();
}
fail: function (res) {
}
}
},
2、 打卡动画实现
首先，要在我们实现动画的组件上添加animation属性，下面看下animationData是如何创建的。
signClick: function () {
var that = this
//第1步:创建动画实例
var animation = wx.createAnimation({
duration: 1000, //动画时长
timingFunction: "ease", //线性
delay: 0 //0则不延迟
})
//第2步:将创建的动画实例赋值给当前的动画
this.animation = animation;
//第3步:执行动画，Z轴旋转360度
animation.opacity(1).rotateZ(360).step();
//第4步:导出动画对象赋值给数据对象
this.setData({
animationData: animation.export(),
})
//设置指定时间后进行页面跳转
setTimeout(function () {
wx.navigateTo({
url: '../sign/sign?isMessage=' + this.data.isMessage
+ "&actId=" + this.data.activityId
+ "&nickName=" + this.data.nickName,
})
}.bind(this), 800)
},
这里在开发时遇到一个问题，跳转到下一个页面没有做任何操作，返回当前页面，当点击打卡操作，此时旋转动画将不会再执行。按照正常逻辑来说，我每次点击打卡按钮相当于重新创建动画实例执行操作，然而效果看起来并不是。这个动画实例除非页面销毁才会重置，否则一直是动画执行结束后的状态。这里我在页面隐藏的时候将动画重置为初始状态。
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
var animation = wx.createAnimation({
duration: 10,
timingFunction: "ease", //线性
delay: 0, //0则不延迟
})
this.animation = animation;
//重置动画为原始状态,将原始状态赋值给数据对象进行保存
animation.opacity(1).rotateZ(0).step();
this.setData({
animationData: animation.export(),
})
},
3、数组修改值
以一个示例介绍小程序中使用setData方式修改数组的值。修改第0个元素为100。
Page({
data: {
tempArray: [1,2,3,4]
},
//事件处理函数
...
changeArray: function(){
var newArray= "tempArray[0]";
this.setData({
newArray :100
});
}
})
4、模态弹窗实现
微信小程序中目前没有提供较好的模态弹窗，很多也不适合项目的需求。如上图中，打卡规则的弹窗需要自己定义。
部分样式代码如下
//遮罩层
.shade-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
//模态弹窗
.model-box {
width: 600rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 25rpx;
z-index: 1001;
background: #fafafa;
margin: -150px 50rpx 0 50rpx;
border-radius: 6rpx;
}
//确定按钮
.btn-sure {
display: block;
padding: 30rpx;
font-size: 32rpx;
text-align: center;
border-top: 1rpx solid #e8e8ea;
color: #7885e8;
}
结尾
打卡小程序的主要开发点大概就是这么几篇，还有部分功能点日后总结后会在这几篇文章中重新记录。最近美团的mpvue框架也是比较火热，打算使用一把，到时候遇到的问题也会做个记录分享。