微信小程序制作学习打卡记录页面代码

以下是一个简单的微信小程序打卡记录页面的代码示例：

<!-- index.wxml -->
<view class="container">
  <view class="title">打卡记录</view>
  <view class="card" wx:for="{{records}}" wx:key="index">
    <view class="card-title">{{item.date}}</view>
    <view class="card-content">
      <view class="card-item">
        <text>早起打卡：</text>
        <text class="{{item.early ? 'checked' : ''}}">{{item.early ? '已打卡' : '未打卡'}}</text>
      </view>
      <view class="card-item">
        <text>跑步打卡：</text>
        <text class="{{item.run ? 'checked' : ''}}">{{item.run ? '已打卡' : '未打卡'}}</text>
      </view>
      <view class="card-item">
        <text>学习打卡：</text>
        <text class="{{item.study ? 'checked' : ''}}">{{item.study ? '已打卡' : '未打卡'}}</text>
      </view>
    </view>
  </view>
</view>

/* index.wxss */
.container {
  padding: 20rpx;
}

.title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.card {
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  overflow: hidden;
}

.card-title {
  background-color: #f5f5f5;
  font-size: 26rpx;
  font-weight: bold;
  padding: 10rpx;
}

.card-content {
  padding: 10rpx;
}

.card-item {
  display: flex;
  align-items: center;
  margin-bottom: 5rpx;
}

.checked {
  color: green;
}

// index.js
Page({
  data: {
    records: [
      {
        date: '2022-01-01',
        early: true,
        run: false,
        study: true
      },
      {
        date: '2022-01-02',
        early: false,
        run: true,
        study: false
      },
      {
        date: '2022-01-03',
        early: true,
        run: true,
        study: true
      }
    ]
  }
})

这个示例中，我们使用了 WXML 模板语言来渲染打卡记录页面的内容，并使用了 WXSS 样式语言来设置页面的样式。在 JavaScript 文件中，我们使用了 Page() 函数来定义页面，并将打卡记录数据存储在 data 对象中，以便在页面中使用。

可以根据实际需求修改代码和样式，实现自己想要的打卡记录页面。