简单小程序学习入门--做个简易版Todolist

朱雀 2023-03-01 10:15 148阅读 0赞

刚开始学习写小程序不久，通过写个简易版Todolist来加深学习印象

## 主要功能： ##

*  提交要做地事情
 *  删除做的事情
 *  编辑要做的事情（相当于修改的意思）

目前只有这三个功能，后续的功能在后面的学习中再完善啦啦啦啦

首先小程序的制作需要有自己的账号【需要APPID】，没有的可以注册一个，以及下载 微信开发者工具【写代码的地方】 （前面的工作在另外一篇再说）

然后开始一个新的项目，一个小程序一次只能放一个项目！

Todolist大概粗糙是这个样子↓  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]  
**1、首先写提交功能**  
这个提交功能主要是通过这个input来实现提交，提交然后再展示

逻辑思路：要获得input中的值msg，放在data中msg，然后提交中的事件通过获得data中的值来放进数组todo中，这个数组再更新在data中的数组todo中

**注意：在小程序里，每个函数都可以通过console.log（e）来输出看看对象中包含的值，比如input中绑定了事件，输出的对象中的数据都是在input中的酱紫**

//处理获得
     getInfo:function(e){ 
     //这里通过console.log(e)来找到input中的value值
         let msg = e.detail.value
          this.setData({ msg})
      },
    
      // 下面是把待做的事情放进去数组中
      submitInfo:function(){ 
        let todo = []//这里都是用一个同名的变量接收数据，然后再赋值，套路，这样会减少很多错误
        todo = this.data.todo  //这里写少了data，为什么呢
        todo.push(this.data.msg)
        this.setData({ todo})
      },

**这里的小套路：在函数中let一个变量【与data中的同名】来接收data中赋值的数据，然后在setData来更新数据即可**

然后将数组中的数据在下面遍历展示出来即可

<view  wx:for = "{ {todo}}" wx:key ="index">
    { { item}}

**2、实现删除功能**

删除功能分为只删除一个和全部删除

**逻辑思路：点击删除的时候，通过获得对应的下标来删除数组中对应的值，这个时候，下标需要传过来，说明这个按键需要在数组遍历中，才能将下标的值一块儿传过来**

实现删除逻辑
       infoDele:function(e){ 
         console.log(e.target.dataset.index)
         let index = e.target.dataset.index
         let todo = this.data.todo
         todo.splice(index,1)  //splice的写法有多种，这样写才是改变原数组的
         console.log(todo)
         this.setData({ todo})
       }
     })，

然后全部删除的按钮是只有一个，全部删除的时候是将数组清空，这两个可以放在一起写，但是如何判断是删除还是全部删除的话，**这里需要用一个类似flag的东西来判断，可以用个布尔值，**

// 把删除和全部删除写一起，用if来判断
    infoDele:function(e){ 
      // console.log(e.target.dataset.index)
      let index = e.target.dataset.index
      let todo = this.data.todo
      let bool = e.target.dataset.bool
      if(bool == true){ 
          todo.splice(index,1)//splice的写法有多种，这样写才是改变原数组的
      }else{ 
        todo = []
      }
      // console.log(todo)
      this.setData({ todo})
    },

**3、编辑功能**

点击的时候可以将修改这个值，然后展示新的值

**逻辑思路：一开始觉得如何凭空来修改这个值，可以在上面的input中绑定这个value值，然后再通过点击的时候修改的是上面Iuput中的值，再提交酱紫，但是好变扭啊**

**然后第二种，就是一开始提交的时候，遍历展示的时候多展示个input框的，然后隐藏这个Input框的，点击编辑的时候需要将这个框展示出来，然后在这里修改**

**修改后提交就是更改数组中的内容，因为没有决定修改完的按键，所以用input失去焦点时来绑定事件来修改数组的值**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]

infoChange:function(e){ 
      //主要功能就是展示出来，点击编辑时
       let active = this.data.active 
       let index = e.target.dataset.index
       active = index
       this.setData({ active})
    },
    //修改提交功能在这里
    infoPut:function(e){ 
      console.log(e)
      let todo = this.data.todo
      let index = e.target.dataset.index
      let value = e.detail.value;
      console.log(index)
      todo[index] = value
      console.log(value)
      this.setData({ todo,active:-1})
      console.log(todo)
      console.log(index)
    }

**这里遇到了修改后的数组值变成了 undefined，然后打印数组的下标时发现打印不出来，检查是否有将下标传过来了！发现没有传值过来！！然后才改正的！该死的我！**

最后附上展示页的代码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]: /images/20230209/9e1394542e8846bcaee20a4e10dec725.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70 1]: /images/20230209/ff5dd5f2f19f4762b35355c2204dc4c8.png