微信小程序开发（四）入门之打卡功能开发-即速应用

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

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

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

前言

本篇文章将介绍打卡小程序打卡页面相关功能的开发，涉及到的知识点有小程序分享功能，动画实现，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;}

实现方式很简单，上面说到小程序在页面内分享只能通过<button>标签通过添加open-type='share'来实现，将<button>层叠在图片上，设置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图有点卡顿。

    <image class=='sign-icon' animation='{{animationData}}' bindtap='signClick' src='../../imgs/sign_button.png'></image>

首先，要在我们实现动画的组件上添加'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. 模态弹窗实现

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

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