微信小程序制作学习计划打卡记录页面包含前几天的学习时间全部代码

### 回答1：
以下是一个简单的微信小程序制作学习计划打卡记录页面的代码。

在 wxml 文件中，我们可以设置页面的布局和样式，以及与用户进行交互的组件，例如按钮、输入框等。

<view class="container">
  <view class="header">
    <text class="title">学习计划打卡记录</text>
  </view>
  
  <view class="card">
    <view class="card-heading">
      <text class="card-title">Day 1</text>
      <text class="card-date">2021-01-01</text>
    </view>
    
    <view class="card-body">
      <text class="card-label">学习时间：</text>
      <input class="card-input" type="number" placeholder="请输入学习时间（单位：小时）" />
    </view>
    
    <view class="card-footer">
      <button class="card-button">提交</button>
    </view>
  </view>
  
  <!-- Day 2、Day 3 等的卡片同上 -->
  
</view>

在 wxss 文件中，我们可以设置页面的样式，例如字体、颜色、边距等。

.container {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.card {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f2f2f2;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.card-date {
  font-size: 24rpx;
  color: #999999;
}

.card-body {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.card-label {
  font-size: 28rpx;
  color: #333333;
}

.card-input {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #999999;
  border: none;
}

.card-footer {
  text-align: center;
  padding: 20rpx;
}

.card-button {
  font-size: 28rpx;
  color: #ffffff;
  background-color: #007aff;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
}

在 js 文件中，我们可以编写页面的逻辑代码。

Page({
  data: {
    days: [
      { title: 'Day 1', date: '2021-01-01', time: null },
      { title: 'Day 2', date: '2021-01-02', time: null },
      { title: 'Day 3', date: '2021-01-03', time: null }
      // Day 4、Day 5 等的数据同上
    ]
  },
  
  handleInput: function(event) {
    // 获取输入框的值
    let index = event.currentTarget.dataset.index;
    let value = event.detail.value;
    
    // 更新数据
    let days = this.data.days;
    days[index].time = value;
    this.setData({ days: days });
  },
  
  handleSubmit: function(event) {
    // 获取提交按钮的索引
    let index = event.currentTarget.dataset.index;
    
    // 获取对应的数据
    let days = this.data.days;
    let day = days[index];
    
    // 判断是否填写了学习时间
    if (day.time === null || day.time === '') {
      wx.showToast({
        title: '请填写学习时间',
        icon: 'none'
      });
      return;
    }
    
    // 提交数据
    wx.cloud.callFunction({
      name: 'submit',
      data: {
        date: day.date,
        time: day.time
      },
      success: res => {
        wx.showToast({
          title: '提交成功'
        });
      },
      fail: err => {
        wx.showToast({
          title: '提交失败',
          icon: 'none'
        });
      }
    });
  }
})

以上代码是一个简单的微信小程序制作学习计划打卡记录页面的示例，仅供参考。具体实现方式可能因个人需求而异。

### 回答2：
微信小程序制作学习计划打卡记录页面包含前几天的学习时间的全部代码如下：

首先，在小程序中创建一个page，命名为"studyRecord"，在studyRecord.json文件中进行配置，设置"navigationBarTitleText"为"学习打卡"，并设置"usingComponents"引入相关组件：

{
  "navigationBarTitleText": "学习打卡",
  "usingComponents": {}
}

接下来，在studyRecord.wxml文件中编写页面结构，包括一个日期选择器和一个列表用于展示打卡记录：

<view class="container">
  <view class="header">
    <picker mode="date" bindchange="dateChange">
      <view class="date-picker">{{ currentDate }}</view>
    </picker>
  </view>
  <view class="record-list">
    <block wx:for="{{ studyRecords }}" wx:key="index">
      <view class="record-item">
        <view class="item-date">{{ item.date }}</view>
        <view class="item-duration">{{ item.duration }}</view>
      </view>
    </block>
  </view>
</view>

我们在studyRecord.js文件中定义相关的事件处理函数和数据：

Page({
  data: {
    currentDate: '', // 当前选择的日期
    studyRecords: [] // 学习打卡记录
  },
  onLoad: function () {
    // 获取最近几天的学习打卡记录
    this.getStudyRecords();
  },
  dateChange: function (event) {
    this.setData({
      currentDate: event.detail.value
    });
    // 根据选择日期的变化更新学习打卡记录
    this.getStudyRecords();
  },
  getStudyRecords: function () {
    // 根据当前日期获取学习打卡记录，假设获取到的数据格式为[{ date: '2022/01/01', duration: '2小时' }, ...]
    // 可以通过调用接口或其他方式获取数据
    const currentDate = this.data.currentDate;
    const studyRecords = this.getStudyRecordsByDate(currentDate);
    this.setData({
      studyRecords: studyRecords
    });
  },
  getStudyRecordsByDate: function (date) {
    // 根据日期获取学习打卡记录的逻辑实现
    // ...
    return studyRecords; // 返回按日期查询到的学习打卡记录
  }
})

在studyRecord.wxss文件中定义样式：

.container {
  padding: 10px;
}
.header {
  margin-bottom: 10px;
}
.date-picker {
  font-size: 18px;
  color: #333;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}
.record-list {
  background-color: #fff;
  border-radius: 4px;
}
.record-item {
  padding: 10px;
  border-bottom: solid 1px #eee;
}
.item-date {
  font-size: 14px;
  color: #666;
}
.item-duration {
  font-size: 16px;
  color: #333;
}

这样，一个包含前几天学习时间的微信小程序制作学习计划打卡记录页面的代码就完成了。

### 回答3：
要制作微信小程序的学习计划打卡记录页面，可以按照以下步骤进行：

1. 首先，需要在微信开发者工具中创建一个新的小程序项目，并在app.json文件中配置页面路由信息。

2. 在项目的根目录下创建一个新的文件夹，用于存放页面相关的文件，比如study-record文件夹。

3. 在study-record文件夹中创建一个study-record.wxml文件用于编写页面的结构。

4. 在study-record文件夹中创建一个study-record.wxss文件用于编写页面的样式。

5. 在study-record文件夹中创建一个study-record.js文件用于编写页面的逻辑代码。

6. 在study-record.js中定义一个数据对象，用于存储前几天的学习时间。可以使用数组来存储每一天的学习时间，比如每个元素都是一个包含日期和学习时间的对象。

7. 在study-record.js中编写一个函数来获取前几天的学习时间。可以使用Date对象和相关的方法来计算前几天的日期，然后根据日期从数据对象中获取对应的学习时间。

8. 在study-record.js中编写一个函数来更新学习时间。可以通过用户输入的方式来更新某一天的学习时间，并将更新后的数据保存到数据对象中。

9. 在study-record.wxml中使用wx:for循环来遍历数据对象中的学习时间，并将日期和学习时间显示在页面上。

10. 在study-record.wxml中添加一个按钮，用于触发更新学习时间的函数。

11. 在study-record.js中监听按钮的点击事件，并在点击时触发更新学习时间的函数。

12. 在study-record.wxss中设置页面的样式，比如学习时间的字体大小、颜色等。

通过以上步骤，就可以完成微信小程序的学习计划打卡记录页面的制作。在页面中包含了前几天的学习时间，并提供了更新学习时间的功能。