微信小程序开发（四）入门之打卡功能开发

相关文章

微信小程序开发（一）微信开发者工具以及小程序框架介绍

微信小程序开发（二）开发之日历打卡小程序发现页

微信小程序开发（三）入门之创建打卡活动

前言

本篇文章将介绍打卡小程序打卡页面相关功能的开发，涉及到的知识点有小程序分享功能，动画实现，setData修改数组值等问题。

需求

打卡页面部门功能需求图。

1. 小程序分享功能

小程序中分享的入口有两处，第一处是menu:右上角转发菜单（
右上角&＃8230;）,第二处是页面内通过
转发。下面看下打卡页面右上角分享功能的实现。












.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;
}


实现方式很简单，上面说到小程序在页面内分享只能通过
标签通过添加open-type=&＃8217;share&＃8217;来实现，将
层叠在图片上，设置opcity为0即可。当用户做分享操作会触发下面的方法，用户进入时onLoad()的options参数会携带分享的参数。

/**
* 用户点击右分享操作
*/
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. 打卡动画实现

效果如下，GIF图有点卡顿。





首先，要在我们实现动画的组件上添加&＃8217;
animation&＃8217;属性，下面看下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. 模态弹窗实现

微信小程序中目前没有提供较好的模态弹窗，很多也不适合项目的需求。如上图中，打卡规则的弹窗需要自己定义。






打卡规则




{
{ruleItem}}




确定




部分样式代码如下。

/* 遮罩层 */
.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框架也是比较火热。打算使用一把，到时候遇到的问题也会做个记录分享。