相关文章
前言
本篇文章将介绍打卡小程序打卡页面相关功能的开发，涉及到的知识点有小程序分享功能，动画实现，setData修改数组值等问题。
需求
打卡页面部门功能需求图。
1. 小程序分享功能
小程序中分享的入口有两处，第一处是menu:右上角转发菜单（
右上角...）,第二处是页面内通过
<button>转发。下面看下打卡页面右上角分享功能的实现。
<view class='share-layout'>
<image class='detail-cover' src='{{dakaPic}}' mode='aspectFill'></image>
<view>
<image class='share-icon' bindtap='shareSign' src='../../imgs/share_icon.png'></image>
<button class='share-button' open-type='share' plain='true'></button>
</view>
</view>
.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(); //此处为了记录分享次数
},2. 打卡动画实现
效果如下，GIF图有点卡顿。
<image class=='sign-icon' animation='{{animationData}}' bindtap='signClick' src='../../imgs/sign_button.png'></image>
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. 模态弹窗实现
微信小程序中目前没有提供较好的模态弹窗，很多也不适合项目的需求。如上图中，打卡规则的弹窗需要自己定义。
<view class="root-layout">
<!-- 遮罩层，全屏显示，层级 z-index=1000 -->
<view class="shade-mask" bindtap="shadeMaskHandler" data-status="close" wx:if="{{showModalStatus}}"/>
<!-- 模态弹窗，显示打卡规则 层级 z-index = 10001 -->
<view animation="{{animationData}}" class="model-box" wx:if="{{showModalStatus}}">
<text class="rule-title">打卡规则</text>
<view class="rule-content-layout">
<block wx:for="{{dakaRules}}" wx:for-item="ruleItem">
<view class="rule_content">
<view class="dot"></view>
<text class="rule">{{ruleItem}}</text>
</view>
</block>
</view>
<!-- 确定按钮 -->
<text class="btn-sure" bindtap="shadeMaskHandler" data-status="close">确定</text>
</view>
</view>
/* 遮罩层 */
.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;
}