今天給大家分享如何制作todo list微信小程序。

資源

• 視頻 - BiliBili，
  

  制作ToDo List微信小程序

  http://v.youku.com/v_show/id_XMzc5NjgwMDM5Ng==.html
  ， YouTube
• 源碼地址 - https://github.com/JKooll/sha...

工具

• 微信開發者工具 v1.02
• 微信小程序框架文檔
• weui for 小程序 基礎樣式庫

過程

打開微信開發工具，創建新項目

導入weui for 小程序 基礎樣式庫

1. 下載weui for 小程序源碼
2. 在項目中創建目錄src/wxss/
3. 復制dist/style/weui.wxss文件到項目src/wxss/目錄下

在全局引入weui基礎樣式庫

1. 打開app.wxss文件
2. 添加代碼到開頭

@import './src/wxss/weui.wxss';

創建todo頁面

1. 打開app.json
2. 在pages數組第一行中添加pages/todo/todo,保存文件

添加tasks數據

1. 打開pages/todo/todo.js
2. 在data對象中添加tasks數據

tasks每個元素包含三個字段：

• content: 內容
• key: 鍵
• status: true - 完成狀態， false - 未完成狀態

渲染tasks列表

1. 打開pages/todo/todo.wxml
2. 清空文件
3. 添加如下代碼到文件， 保存文件

<view class="page">

  <view class="page__bd">

    <view class="weui-cell">
      <view class="weui-cell__bd">
        <input class="weui-input" placeholder="添加新任務"/>
      </view>

      <view class="weui-cell__ft">
        <button class="weui-btn" type="primary">添加</button>
      </view>
    </view>

    <view class="weui-cells__title">待辦事項</view>
    <view class="weui-cells weui-cells__after-title">
      <radio-group>

        <block wx:for="{{tasks}}" wx:key="value" wx:if="{{!item.status}}">
          <label class="weui-cell weui-check__label">
            <radio class="weui-check" value="{{item.value}}"></radio>

            <view class="weui-cell__hd weui-check__hd_in-checkbox">
              <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
            </view>
            <view class="weui-cell__bd">{{item.content}}</view>

            <view class="weui-cell__ft"><button class="weui-btn" type="warn">刪除</button></view>
          </label>
        </block>
        
      </radio-group>
    </view>

    <view class="weui-cells__title">完成事項</view>
    <view class="weui-cells weui-cells__after-title">
      <radio-group>

        <block wx:for="{{tasks}}" wx:key="value" wx:if="{{item.status}}">
          <label class="weui-cell weui-check__label">
            <radio class="weui-check" value="{{item.value}}"></radio>

            <view class="weui-cell__hd weui-check__hd_in-checkbox">
              <icon class="weui-icon-checkbox_success" type="success" size="23"></icon>
            </view>

            <view class="weui-cell__bd">{{item.content}}</view>

            <view class="weui-cell__ft"><button class="weui-btn" type="warn">刪除</button></view>
          </label>
        </block>
        
      </radio-group>
    </view>
    
  </view>

</view>

改變task狀態

1. 打開pages/todo/todo.wxml

2. 待辦事項和完成事項下的label更改為<label class="weui-cell weui-check__label" data-value="{{item.value}}" bindtap="changeTaskStatus">

   • bindtap="changeTaskStatus" 綁定點擊事件
   • data-value="{{item.value}}" 將task的value值傳遞給changeTaskStatus函數
3. 打開pages/todo/todo.js, 添加changeTaskStatus, 保存文件查看效果

changeTaskStatus: function (e) {
    let value = e.currentTarget.dataset.value;

    let tasks = this.data.tasks;

    let index = tasks.findIndex(task => task.value == value);

    if (index < 0) {
      return;
    }

    tasks[index].status = !tasks[index].status;

    this.setData({
      tasks: tasks
    });
  }

刪除task

1. 打開pages/todo/todo.wxml

2. 待辦事項和完成事項下的button更改為button class="weui-btn" type="warn" data-value="{{item.value}}" catchtap="removeTask">刪除</button>

   • catchtap="removeTask" 綁定點擊事件，和bindtap區別在于它阻止事件冒泡 【更多】
   • data-value="{{item.value}}" 將task的value值傳遞給removeTask函數
3. 打開pages/todo/todo.js, 添加removeTask函數, 保存文件查看效果

添加task

創建task

1. 打開pages/todo/todo.wxml

2. 將添加新任務下的input更改為<input class="weui-input" placeholder="添加新任務" bindinput="typeNewTask" value="{{newTask}}"/>

   • bindinput="typeNewTask" 綁定input事件
   • value="{{newTask}}" 綁定newTask到input valu，可以用來初始化input中的內容
3. 打開pages/todo/todo.js

4. 在data對象中添加兩個新的變量, newTask: '', key: ''

   • newTask 保存新的task的內容
   • key 保存下一個task value值
5. 添加typeNewTask，更新newTask變量的值

typeNewTask: function(e) {
    this.setData({
      newTask: e.detail.value.trim()
    });
  },

保存task

1. 打開pages/todo/todo.wxml

2. 將添加新任務下的button更改為<button class="weui-btn" type="primary" bindtap="addTask" disabled="{{newTask == ''}}">添加</button>

   • bindtap="addTask" 綁定點擊事件
   • disabled="{{newTask == ''}}" 當newTask為空時，禁用button
3. 打開pages/todo/todo.js
4. 清空data中tasks變量的內容， tasks: []
5. 添加addTask函數，保存文件查看效果

addTask: function () {
    let tasks = this.data.tasks;
    let key = this.data.key;

    let newTaskObj = { content: this.data.newTask, value: key++, status: false };
    tasks.push(newTaskObj);

    this.setData({
      tasks: tasks,
      key: key,
      newTask: ''
    });
  },

完成