制作todo list微信小程序应该注意些什么

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

　　制作ToDo List微信小程序

　　工具

　　微信开发者工具 v1.02

　　微信小程序框架文档

　　weui for 小程序 基础样式库

　　过程

　　打开微信开发工具，创建新项目

 

　　导入weui for 小程序 基础样式库

　　下载weui for 小程序源码

　　在项目中创建目录src/wxss/

　　复制dist/style/weui.wxss文件到项目src/wxss/目录下

　　在全局引入weui基础样式库

　　打开app.wxss文件

　　添加代码到开头

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

　　创建todo页面

　　打开app.json

　　在pages数组第一行中添加pages/todo/todo,保存文件

　　添加tasks数据

　　打开pages/todo/todo.js

　　在data对象中添加tasks数据

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

　　content: 内容

　　key: 键

　　status: true - 完成状态， false - 未完成状态

　　渲染tasks列表

　　打开pages/todo/todo.wxml

　　清空文件

　　添加如下代码到文件， 保存文件

　　添加

　　待办事项

　　{{item.content}}

　　删除

　　完成事项

　　{{item.content}}

　　删除

　　改变task状态

　　打开pages/todo/todo.wxml

　　待办事项和完成事项下的label更改为

　　bindtap="changeTaskStatus" 绑定点击事件

　　data-value="{{item.value}}" 将task的value值传递给changeTaskStatus函数

　　打开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

　　打开pages/todo/todo.wxml

　　待办事项和完成事项下的button更改为button class="weui-btn" type="warn" data-value="{{item.value}}" catchtap="removeTask">删除

　　catchtap="removeTask" 绑定点击事件，和bindtap区别在于它阻止事件冒泡 【更多】

　　data-value="{{item.value}}" 将task的value值传递给removeTask函数

　　打开pages/todo/todo.js, 添加removeTask函数, 保存文件查看效果

　　添加task

　　创建task

　　打开pages/todo/todo.wxml

　　将添加新任务下的input更改为

　　bindinput="typeNewTask" 绑定input事件

　　value="{{newTask}}" 绑定newTask到input valu，可以用来初始化input中的内容

　　打开pages/todo/todo.js

　　在data对象中添加两个新的变量,newTask: '', key: ''

　　newTask 保存新的task的内容

　　key 保存下一个task value值

　　添加typeNewTask，更新newTask变量的值

　　typeNewTask: function(e) {

　　this.setData({

　　newTask: e.detail.value.trim()

　　});

　　},

　　保存task

　　打开pages/todo/todo.wxml

　　将添加新任务下的button更改为添加

　　bindtap="addTask" 绑定点击事件

　　disabled="{{newTask == ''}}" 当newTask为空时，禁用button

　　打开pages/todo/todo.js

　　清空data中tasks变量的内容，tasks: []

　　添加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: ''

　　});

　　},

　　完成