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

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

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

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

需求1.

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

1.小程序分享功能小程序中分享的入口有两处，第一处是menu:右上角转发菜单（右上角...）,第二处是页面内通过button转发。下面看下打卡页面右上角分享功能的实现。viewclass'share-layout'imageclass'detail-cover'src'{{dakaPic}}'mode'aspectFill'/imageviewimageclass'share-icon'bindtap'shareSign'src'../../imgs/share_icon.png'/imagebuttonclass'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(){varthatthis;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图有点卡顿。imageclass'sign-icon'animation'{{animationData}}'bindtap'signClick'src'../../imgs/sign_button.png'/image首先，要在我们实现动画的组件上添加'animation'属性，下面看下animationData是如何创建的。signClick:function(){varthatthis//第1步:创建动画实例varanimationwx.createAnimation({duration:1000,//动画时长timingFunction:"ease",//线性delay:0//0则不延迟})//第2步:将创建的动画实例赋值给当前的动画this.animationanimation;//第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(){varanimationwx.createAnimation({duration:10,timingFunction:"ease",//线性delay:0,//0则不延迟})this.animationanimation;//重置动画为原始状态,将原始状态赋值给数据对象进行保存animation.opacity(1).rotateZ(0).step();this.setData({animationData:animation.export(),})},3.数组修改值以一个示例介绍小程序中用setData方式修改数组的值。修改第0个元素为100。操作如下

Page({data:{tempArray:[1,2,3,4]},//事件处理函数...changeArray:function(){varnewArray"tempArray[0]";this.setData({newArray:100});}})4.模态弹窗实现2.

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

viewclass"root-layout"!--遮罩层，全屏显示，层级z-index1000--viewclass"shade-mask"bindtap"shadeMaskHandler"data-status"close"wx:if"{{showModalStatus}}"/!--模态弹窗，显示打卡规则层级z-index10001--viewanimation"{{animationData}}"class"model-box"wx:if"{{showModalStatus}}"textclass"rule-title"打卡规则/textviewclass"rule-content-layout"blockwx:for"{{dakaRules}}"wx:for-item"ruleItem"viewclass"rule_content"viewclass"dot"/viewtextclass"rule"{{ruleItem}}/text/view/block/view!--确定按钮--textclass"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:-150px50rpx050rpx;border-radius:6rpx;}/*确定按钮*/.btn-sure{display:block;padding:30rpx;font-size:32rpx;text-align:center;border-top:1rpxsolid#e8e8ea;color:#7885e8;}结尾打卡小程序的主要开发点大概就是这么几篇，还有部分功能点日后总结后会在这几篇文章中重新记录。最近美团的mpvue框架也是比较火热。打算使用一把，到时候遇到的问题也会做个记录分享。