制作todo list微信小程序

今天给大家分享如何制作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: ''
    });
  },

完成