微信小程序之打卡日历

本文为原创作品，引用请注明出处，欢迎转载。

生活中有各种可以打卡的app，例如背单词打卡什么的，本人觉得很有意思，于是本人在大二时做了一款诚信状打卡的微信小程序，这里讲述一下编写的过程。

先说一下开发环境：用的是微信web开发工具开发的，后台采用了Bmob后台，比较方便。

先展示一下成果：

话不多说，直接上代码，里面也有挺多的注释，以防自己忘记，当然各位如果直接复制过去肯定不能有当前的效果，注意后台数据的交互，不过做一个界面还是没有问题的。

Calendar.wxml 页面文件
页面上显示出来的东西，布局上主要是一个年月栏、上一个月和下一个月的按钮；然后是星期栏，就是日一二三四五六，然后就是每个月的日期，注意每个月的前面可能有空的地方。这里面用wx:if标签来区分当前日期有无打卡的情况。

<!--pages/Calendar/Calendar.wxml-->
<!-- 打卡日历页面 -->
<view class='all'>
  <view class="bar">
    <!-- 上一个月 -->
    <view class="previous" bindtap="handleCalendar" data-handle="prev">
      <image src='../../images/pre.png'></image>
    </view>
    <!-- 显示年月 -->
    <view class="date">{
  {cur_year || "--"}} 年 {
  {cur_month || "--"}} 月</view>
    <!-- 下一个月 -->
    <view class="next" bindtap="handleCalendar" data-handle="next">
      <image src='../../images/next.png'></image>
    </view>
  </view>
  <!-- 显示星期 -->
  <view class="week">
    <view wx:for="{
  {weeks_ch}}" wx:key="{
  {index}}" data-idx="{
  {index}}">{
  {item}}</view>
  </view>
  <view class='days'>
    <!-- 列 -->
    <view class="columns" wx:for="{
  {days.length/7}}" wx:for-index="i" wx:key="i">
      <view wx:for="{
  {days}}&#