制作todo list微信小程序應該注意些什么

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

　　制作ToDo List微信小程序

　　工具

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

　　微信小程序框架文檔

　　weui for 小程序 基礎樣式庫

　　過程

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

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

　　下載weui for 小程序源碼

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

　　復制dist/style/weui.wxss文件到項目src/wxss/目錄下

　　在全局引入weui基礎樣式庫

　　打開app.wxss文件

　　添加代碼到開頭

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

　　創(chuàng)建todo頁面

　　打開app.json

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

　　添加tasks數據

　　打開pages/todo/todo.js

　　在data對象中添加tasks數據

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

　　content: 內容

　　key: 鍵

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

　　渲染tasks列表

　　打開pages/todo/todo.wxml

　　清空文件

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

　　添加

　　待辦事項

　　{{item.content}}

　　刪除

　　完成事項

　　{{item.content}}

　　刪除

　　改變task狀態(tài)

　　打開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區(qū)別在于它阻止事件冒泡 【更多】

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

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

　　添加task

　　創(chuàng)建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: ''

　　});

　　},

　　完成