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

　　制作ToDo List微信小程序

　　工具

　　微信開(kāi)發(fā)者工具 v1.02

　　微信小程序框架文檔

　　weui for 小程序 基礎(chǔ)樣式庫(kù)

　　過(guò)程

　　打開(kāi)微信開(kāi)發(fā)工具，創(chuàng)建新項(xiàng)目

　　導(dǎo)入weui for 小程序 基礎(chǔ)樣式庫(kù)

　　下載weui for 小程序源碼

　　在項(xiàng)目中創(chuàng)建目錄src/wxss/

　　復(fù)制dist/style/weui.wxss文件到項(xiàng)目src/wxss/目錄下

　　在全局引入weui基礎(chǔ)樣式庫(kù)

　　打開(kāi)app.wxss文件

　　添加代碼到開(kāi)頭

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

　　創(chuàng)建todo頁(yè)面

　　打開(kāi)app.json

　　在pages數(shù)組第一行中添加pages/todo/todo,保存文件

　　添加tasks數(shù)據(jù)

　　打開(kāi)pages/todo/todo.js

　　在data對(duì)象中添加tasks數(shù)據(jù)

　　tasks每個(gè)元素包含三個(gè)字段：

　　content: 內(nèi)容

　　key: 鍵

　　status: true - 完成狀態(tài)， false - 未完成狀態(tài)

　　渲染tasks列表

　　打開(kāi)pages/todo/todo.wxml

　　清空文件

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

　　添加

　　待辦事項(xiàng)

　　{{item.content}}

　　刪除

　　完成事項(xiàng)

　　{{item.content}}

　　刪除

　　改變task狀態(tài)

　　打開(kāi)pages/todo/todo.wxml

　　待辦事項(xiàng)和完成事項(xiàng)下的label更改為

　　bindtap="changeTaskStatus" 綁定點(diǎn)擊事件

　　data-value="{{item.value}}" 將task的value值傳遞給changeTaskStatus函數(shù)

　　打開(kāi)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

　　打開(kāi)pages/todo/todo.wxml

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

　　catchtap="removeTask" 綁定點(diǎn)擊事件，和bindtap區(qū)別在于它阻止事件冒泡 【更多】

　　data-value="{{item.value}}" 將task的value值傳遞給removeTask函數(shù)

　　打開(kāi)pages/todo/todo.js, 添加removeTask函數(shù), 保存文件查看效果

　　添加task

　　創(chuàng)建task

　　打開(kāi)pages/todo/todo.wxml

　　將添加新任務(wù)下的input更改為

　　bindinput="typeNewTask" 綁定input事件

　　value="{{newTask}}" 綁定newTask到input valu，可以用來(lái)初始化input中的內(nèi)容

　　打開(kāi)pages/todo/todo.js

　　在data對(duì)象中添加兩個(gè)新的變量,newTask: '', key: ''

　　newTask 保存新的task的內(nèi)容

　　key 保存下一個(gè)task value值

　　添加typeNewTask，更新newTask變量的值

　　typeNewTask: function(e) {

　　this.setData({

　　newTask: e.detail.value.trim()

　　});

　　},

　　保存task

　　打開(kāi)pages/todo/todo.wxml

　　將添加新任務(wù)下的button更改為添加

　　bindtap="addTask" 綁定點(diǎn)擊事件

　　disabled="{{newTask == ''}}" 當(dāng)newTask為空時(shí)，禁用button

　　打開(kāi)pages/todo/todo.js

　　清空data中tasks變量的內(nèi)容，tasks: []

　　添加addTask函數(shù)，保存文件查看效果

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

　　});

　　},

　　完成