小程序todo list

第四次作业

制作小程序to do list

（因为QQ小程序开发工具发生了很多的bug，所以利用相似的微信开发工具进行小程序的编写及功能的实现）

• 想要实现的功能
  这次制作小程序主要是想要实现一个类似备忘录的功能，记录每天需要做的事项，并且在完成之后可以删除和修改

• 制作前的思考
  在开始动手之前会先做出一个大概的结构模型，想好需要哪些工具，在做好的小程序页面上要显示哪些内容，首先要出现什么，然后在进行功能的实现之后会出现什么，例如在备忘录页面上第一个要出现的是大排头，其次会出现一个文本框，在文本框内输入自己要完成的任务，回车之后在文本框下“待办事项”要出现自己要完成的任务，当自己完成任务之后，就需要对任务进行删除或者修改，在此之间还可以添加新的任务。

• 用到的语法
  在代码编写的过程中，用到了很多的语法，例如利用input实现事项的添加、利用navigator改变页面的名称、实现页面的跳转，利用image插入图片，利用text输入文本，再加上很多的API（ wx.setStorageSync、wx.getStorageSync、console.log）等等来实现功能的运行， 除此之外还要熟练地运用HTML、css、js的语法。

• 部分代码
  HTML：
  < view class = “container”>
  < view class = “today”>
  < text>{{Today}}< /text>
  < /view>
  < view class = “additem”>
  < view class = “add”>
  < image class = ‘plus’ src = ‘/image/11.jpg’>< /image>
  < input value = “{{input}}” auto-focus class = “InputAdd” placeholder=‘输入一个新计划’ bindinput=‘AddInput’ bindconfirm=‘AddConfirm’ />
  < /view>
  < /view>
  < view class = “todo-today1”>
  < view class = “todo-today”>
  < text class=“hz”>待办事项< /text>
  js：
  Page({

/**
*页面的初始数据
*/
data: {
TodayList: [],
Today: “”,
input: “”
},
/ **
*存储列表数据函数
*/
save: function () {
wx.setStorageSync(‘TodayList’, this.data.TodayList);
},
loadData: function () {
var todo = wx.getStorageSync(‘TodayList’);
if (todo) {
this.setData({
TodayList: todo
});
}
/ **
*增加一条记录
*/
AddConfirm: function (e) {
var that = this;
var todo = this.data.TodayList;
todo.push({ description: this.data.input, completed: false })
that.setData({ TodayList: todo, input: ‘’ });
console.log(this.data.TodayList)
this.save();
},
/ **
*清除一条记录
*/
removeTodoHandle: function (e) {
var todo = this.data.TodayList;
var index = e.currentTarget.id;
todo.splice(index, 1);
console.log(todo);
this.setData({
TodayList: todo
});
this.save();
},

• 效果图片
  
  

总结

这次的小程序制作，虽然最后的结果做出来了但是依旧有许多的报错问题没有解决，所以在后续还会继续改进，语法的使用还不够熟练，即使看过了教学视频也依旧存在一些主观性错误，在之后也会慢慢纠察出来进行改正。