微信小程序带有起止时间的TODOs

前言

根据自己平时的需求，感觉用的 TODOs 没有起止时间用着有点不舒服，就想借着这次软件工程作业的时候，做一些改善。本来想实现微信小程序在每个 TODO 开始前向用户推送消息提醒，但是后来发现现在只能发模板消息且下发条件只能在用户本人在微信体系内与页面有交互行为后触发，挺遗憾的，不知道有没有更好的实现方法。

效果展示

点击屏幕上方按钮可添加 TODOs,点击后会出现弹窗，可以设置 TODO 的内容以及起止时间，点击提交即可成功创建新的 TODO 。完成 TODO后，点击 TODO 前端的圆圈即可将该 TODO 变为已完成状态，也可点击 Toggle all 将所有的 TODO 变为已完成状态。点击 TODO 后端的叉号即可删除该条 TODO ,而 点击 Clear Compeleted 可全部删除。

微信小程序部分代码

/page/index/index.wxml
前半部分是实现点击按钮弹出弹窗。
后半部分 block 里主要是成功新建 TODO 后，整个页面的实现，TODO 及起始时间分别绑定 item,startDate,endDate。
在时间选择器中，调用 bindMultiPickerColumnChange 或 bindMultiPickerColumnChange1 来实现时间的选择。

<view class="container">
    <button type="primary" bindtap="modalinput">Click here to add TODOs!</button>
    <modal hidden="{{hiddenmodalput}}" title="添加 TODOs" confirm-text="提交" cancel-text="取消" bindcancel="cancel" bindconfirm="addTodoHandle">  
    <input class="new-todo" value="{{ input }}" placeholder="Anything here..." auto-focus bindinput="inputChangeHandle" bindconfirm="addTodoHandle"/>
    <picker class=\'time-picker\' mode="multiSelector" bindchange="bindStartMultiPickerChange" bindtap=\'pickerTap\' bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">{{startDate}}</picker>
    <picker class=\'time-picker\' mode="multiSelector" bindchange="bindEndMultiPickerChange" bindtap=\'pickerTap2\' bindcolumnchange="bindMultiPickerColumnChange1" value="{{multiIndex}}" range="{{multiArray}}">{{endDate}}</picker>    
    </modal> 
  <block wx:if="{{ todos.length }}">
    <view class="todos">
      <view class="item{{ item.completed ? \' completed\' : \'\' }}" wx:for="{{ todos }}" wx:key="{{ index }}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon class="checkbox" type="{{ item.completed ? \'success\' : \'circle\' }}"/>
        <view>
         <text class="startDate">{{startDate }}</text>
        <text>\n</text>
        <text class="endDate">{{endDate }}</text>
        </view>
        <text class="name">{{ item.name }}</text>
        <icon class="remove" type="clear" size="16" catchtap="removeTodoHandle" data-index="{{ index }}"/>
      </view>
    </view>
    <view class="footer">
      <text class="btn" bindtap="toggleAllHandle">Toggle all</text>
      <text wx:if="{{ leftCount }}">{{ leftCount }} {{ leftCount === 1 ? \'item\' : \'items\' }} left</text>
      <text class="btn" wx:if="{{ todos.length > leftCount }}" bindtap="clearCompletedHandle">Clear completed</text>
    </view>
  </block>
  <block wx:else>
    <view class="empty">
      <text class="title">Congratulations!</text>
      <text class="content">There\'s no more work left.</text>
    </view>
  </block>
</view>

/page/index/index.js 部分代码
时间选择器分为 3 个部分：日，时，分。
首先确定用户选择哪一列：
如果要选择第一列，即要改变日，日的初始值为今天，明天，如果之后的选择是今天，就要获取当前设备的时和分，如果当前的分在0和10之前，则算作10，以此类推。保证起止时间不早于当前时间。如果不是，时则可以按24时制来选择，分则可以选择 10，20 直到50。

bindMultiPickerColumnChange: function (e) {
    date = new Date();

    var that = this;

    var monthDay = [\'今天\', \'明天\'];
    var hours = [];
    var minute = [];

    currentHours = date.getHours();
    currentMinute = date.getMinutes();

    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    // 把选择的对应值赋值给 multiIndex
    data.multiIndex[e.detail.column] = e.detail.value;

    // 然后再判断当前改变的是哪一列,如果是第1列改变
    if (e.detail.column === 0) {
      // 如果第一列滚动到第一行
      if (e.detail.value === 0) {

        that.loadData(hours, minute);

      } else {
        that.loadHoursMinute(hours, minute);
      }

      data.multiIndex[1] = 0;
      data.multiIndex[2] = 0;

      // 如果是第2列改变
    } else if (e.detail.column === 1) {

      // 如果第一列为今天
      if (data.multiIndex[0] === 0) {
        if (e.detail.value === 0) {
          that.loadData(hours, minute);
        } else {
          that.loadMinute(hours, minute);
        }
        // 第一列不为今天
      } else {
        that.loadHoursMinute(hours, minute);
      }
      data.multiIndex[2] = 0;

      // 如果是第3列改变
    } else {
      // 如果第一列为\'今天\'
      if (data.multiIndex[0] === 0) {

        // 如果第一列为 \'今天\'并且第二列为当前时间
        if (data.multiIndex[1] === 0) {
          that.loadData(hours, minute);
        } else {
          that.loadMinute(hours, minute);
        }
      } else {
        that.loadHoursMinute(hours, minute);
      }
    }
    data.multiArray[1] = hours;
    data.multiArray[2] = minute;
    this.setData(data);
  },

  loadData: function (hours, minute) {

    var minuteIndex;
    if (currentMinute > 0 && currentMinute <= 10) {
      minuteIndex = 10;
    } else if (currentMinute > 10 && currentMinute <= 20) {
      minuteIndex = 20;
    } else if (currentMinute > 20 && currentMinute <= 30) {
      minuteIndex = 30;
    } else if (currentMinute > 30 && currentMinute <= 40) {
      minuteIndex = 40;
    } else if (currentMinute > 40 && currentMinute <= 50) {
      minuteIndex = 50;
    } else {
      minuteIndex = 60;
    }

    if (minuteIndex == 60) {
      // 时
      for (var i = currentHours + 1; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = 0; i < 60; i += 10) {
        minute.push(i);
      }
    } else {
      // 时
      for (var i = currentHours; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = minuteIndex; i < 60; i += 10) {
        minute.push(i);
      }
    }
  }

总结与不足

1，通过这次作业，简单的了解了微信小程序开发的流程。
2.存在的不足的是整个页面的 UI 还需要改善以及还需拓展思路，继续为这个项目添加新的功能。