微信小程序之打卡日历

最新推荐文章于 2025-10-02 13:38:01 发布

原创

最新推荐文章于 2025-10-02 13:38:01 发布 · 置顶 · 5w 阅读

204 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #打卡 #日历 #Bmob

本文作者分享了自己使用微信web开发工具和Bmob后台创建的一款诚信状打卡微信小程序的制作过程。文中通过代码展示了日历界面的设计，包括WXML、WXSS、JS和JSON文件的实现，并提到了Bmob的数据交互。小程序的功能包括切换月份、初始化日期状态及判断后台打卡记录。作者邀请读者试用并提供了GitHub资源链接。

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

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

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

先展示一下成果：
2018年6月的打卡情况，有几天偷懒了没打卡
2018年7月的打卡情况，17号活动结束，就没有打卡了

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

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}}" wx:for-index="j" wx:key="j">
        <!-- 行 -->
        <view class="rows" wx:if="{
  
  {j/7 == i}}">
          <view class="rows" wx:for="{
  
  {7}}" wx:for-index="k" wx:key="k">
            <!-- 每个月份的空的单元格 -->
            <view class='cell' wx:if="{
  
  {days[j

最低0.47元/天解锁文章