微信小程序开发(四)入门之打卡功能开发

相关文章

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

微信小程序开发(二)开发之日历打卡小程序发现页

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


前言

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

结尾

打卡小程序的主要开发点大概就是这么几篇,还有部分功能点日后总结后会在这几篇文章中重新记录。最近美团的mpvue框架也是比较火热。打算使用一把,到时候遇到的问题也会做个记录分享。


©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页