逻辑层主要实现四个功能,一是页面初始化和卸载时对数据缓存的调用和储存;二是新增待办事项;三是将待办事项变为已办事项;四是待办、已办视图的切换。在代码编写前,请读者复习第3章 Javascript中数组的语法。

程序开始前先对变量进行声明,然后对条件渲染的条件和其他数据进行赋值。首先来看第四个功能,已办和待办切换,只要单击后重新对上述渲染条件和数据赋值即可比较简单,对应代码中的 click1和 click2函数。

接下来看第三个功能,增加待办事项。单击增加按钮时,首先通过赋值将多文本输入框进行显示,同时隐藏列表。然后,在用户输入完成后触发 confirm事件,将用户输入的e. detail. value添加在数组 arraying末尾,然后重新对各元素和条件赋值。再来看第二个功能,待办变已办。它的核心就是将待办数组的一个元素移动到已办数组,通过单击事件获取到列表元素的id,通过id获取到这个数组对应的元素,注意这里使用了中间变量 newitem,避免数组变动后取值的变化。两个数组改变后重新对渲染条件和数据赋值。

最后来实现数据缓存功能。在页面卸载时调用数据缓存 API-WX. restorage,由于数据缓存只保存一个键值,为保存两个数组,我们这里构造二维数组 arraystore在页面加载时调用对应的读取数据API—wx. get Storage,然后再分别赋值给对应的两个数组。