前言

根據(jù)自己平時(shí)的需求，感覺用的 TODOs 沒有起止時(shí)間用著有點(diǎn)不舒服，就想借著這次軟件工程作業(yè)的時(shí)候，做一些改善。本來想實(shí)現(xiàn)微信小程序在每個(gè) TODO 開始前向用戶推送消息提醒，但是后來發(fā)現(xiàn)現(xiàn)在只能發(fā)模板消息且下發(fā)條件只能在用戶本人在微信體系內(nèi)與頁面有交互行為后觸發(fā)，挺遺憾的，不知道有沒有更好的實(shí)現(xiàn)方法。

效果展示

點(diǎn)擊屏幕上方按鈕可添加 TODOs,點(diǎn)擊后會(huì)出現(xiàn)彈窗，可以設(shè)置 TODO 的內(nèi)容以及起止時(shí)間，點(diǎn)擊提交即可成功創(chuàng)建新的 TODO 。完成 TODO后，點(diǎn)擊 TODO 前端的圓圈即可將該 TODO 變?yōu)橐淹瓿蔂顟B(tài)，也可點(diǎn)擊 Toggle all 將所有的 TODO 變?yōu)橐淹瓿蔂顟B(tài)。點(diǎn)擊 TODO 后端的叉號(hào)即可刪除該條 TODO ,而 點(diǎn)擊 Clear Compeleted 可全部刪除。

微信小程序部分代碼

/page/index/index.wxml
前半部分是實(shí)現(xiàn)點(diǎn)擊按鈕彈出彈窗。
后半部分 block 里主要是成功新建 TODO 后，整個(gè)頁面的實(shí)現(xiàn)，TODO 及起始時(shí)間分別綁定 item,startDate,endDate。
在時(shí)間選擇器中，調(diào)用 bindMultiPickerColumnChange 或 bindMultiPickerColumnChange1 來實(shí)現(xiàn)時(shí)間的選擇。

<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 部分代碼
時(shí)間選擇器分為 3 個(gè)部分：日，時(shí)，分。
首先確定用戶選擇哪一列：
如果要選擇第一列，即要改變?nèi)?，日的初始值為今天，明天，如果之后的選擇是今天，就要獲取當(dāng)前設(shè)備的時(shí)和分，如果當(dāng)前的分在0和10之前，則算作10，以此類推。保證起止時(shí)間不早于當(dāng)前時(shí)間。如果不是，時(shí)則可以按24時(shí)制來選擇，分則可以選擇 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 = http://www.wxapp-union.com/{
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    // 把選擇的對(duì)應(yīng)值賦值給 multiIndex
    data.multiIndex[e.detail.column] = e.detail.value;

    // 然后再判斷當(dāng)前改變的是哪一列,如果是第1列改變
    if (e.detail.column === 0) {
      // 如果第一列滾動(dòng)到第一行
      if (e.detail.value =http://www.wxapp-union.com/== 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 =http://www.wxapp-union.com/== 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) {

        // 如果第一列為 '今天'并且第二列為當(dāng)前時(shí)間
        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) {
      // 時(shí)
      for (var i = currentHours + 1; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = 0; i < 60; i += 10) {
        minute.push(i);
      }
    } else {
      // 時(shí)
      for (var i = currentHours; i < 24; i++) {
        hours.push(i);
      }
      // 分
      for (var i = minuteIndex; i < 60; i += 10) {
        minute.push(i);
      }
    }
  }

總結(jié)與不足

1，通過這次作業(yè)，簡(jiǎn)單的了解了微信小程序開發(fā)的流程。
2.存在的不足的是整個(gè)頁面的 UI 還需要改善以及還需拓展思路，繼續(xù)為這個(gè)項(xiàng)目添加新的功能。