之前写了一个todolist，但是不能保存数据，所以就用微信的云开发进行了进一步的改进

https://developers.weixin.qq.com/community/develop/article/doc/000e6082dd0dd818ef0d026ff56413

第一步，先创建一个集合——todo_list, 并进行初始化

const db = wx.cloud.database()

第二步，添加字段

todo_one 表示用户输入的数据

  add(e){
    var that =  this
    // 获取到所有的数据
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
        db.collection('todo_list')
        .add({
          // data 字段表示需新增的 JSON 数据
          data: {
            value: that.data.todolist_one,   // 获取到输入的事件
            checked:false
          },
          success:function(res){
            that.show()
          }
        })
    }
  },

第三步，删除数据

delete(e){
    // 接收对应数组数目的参数
    var _id = e.currentTarget.dataset._id
    var that = this
    console.log(_id)
    db.collection('todo_list').doc(_id).remove({
      success: function(res) {
        that.show()
        console.log(res.data)
      }
    })
  },

第四步，对完成的数据进行标志

  mark(e){
    // 查看选择标记
    var that = this
    console.log('checkbox发生change事件，携带value值为：', e.detail.value) // 未指定的_id
    const  value = e.detail.value     //选中的值
    for(var i = 0; i < value['length'];i++){
      console.log(value[i])
      db.collection('todo_list').doc(value[i]).update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          checked: true
        },
        success: function(res) {
          console.log(res.data)
          that.show()
        }
      })
    }
  },

js

// pages/todolist/todolist.js
// 初始化
const db = wx.cloud.database()


Page({


  /**
   * 页面的初始数据
   */
  data: {
    todolist_one:"",
    todolist:["11232","2",3,4,5],
    choose:[1,2,3,4,5],
    todo:[]
  },
  bindKeyInput(e){
    this.setData ({
      todolist_one:e.detail.value
    })
  },
  show(e){
    var that = this
    var todo
    wx.showLoading({
      title: '加载数据中',
    })
     db.collection('todo_list')
      .get({
      success: function(res) {
        todo = res.data
        todo = todo.reverse()
        // 设置好todo的数据
        that.setData({
          todo:todo,
          todolist_one:''
        })
        wx.hideLoading({
          success: (res) => {console.log("加载成功!")},
        })
        console.log(todo)
      }
    })
  },
  add(e){
    var that =  this
    // 获取到所有的数据
    // 不为空的时候才可以添加
    if(this.data.todolist_one !== ''){
        db.collection('todo_list')
        .add({
          // data 字段表示需新增的 JSON 数据
          data: {
            value: that.data.todolist_one,   // 获取到输入的事件
            checked:false
          },
          success:function(res){
            that.show()
          }
        })
    }
  },
  mark(e){
    // 查看选择标记
    var that = this
    console.log('checkbox发生change事件，携带value值为：', e.detail.value) // 未指定的_id
    const  value = e.detail.value     //选中的值
    for(var i = 0; i < value['length'];i++){
      console.log(value[i])
      db.collection('todo_list').doc(value[i]).update({
        // data 传入需要局部更新的数据
        data: {
          // 表示将 done 字段置为 true
          checked: true
        },
        success: function(res) {
          console.log(res.data)
          that.show()
        }
      })
    }
  },
  delete(e){
    // 接收对应数组数目的参数
    var _id = e.currentTarget.dataset._id
    var that = this
    console.log(_id)
    db.collection('todo_list').doc(_id).remove({
      success: function(res) {
        that.show()
        console.log(res.data)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


  },
    /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 调用显示数据库
    this.show()
  },
})

wxml

<!--index.wxml-->
<view class="container">


<view class="add-list">
  <!-- 使用变量的保存 -->
  <input  type="text" auto-focus placeholder="你想要做什么？" value="{{todolist_one}}" bindinput="bindKeyInput" />
  <button class="btn" bindtap="add">添加</button>
</view>
<view>
  <!-- 使用for循环遍历数组 -->
  <checkbox-group bindchange="mark">
    <view class="add-list" wx:for="{{todo}}" wx:key="{{item.value}}">
      <checkbox value="{{item._id}}" checked="{{item.checked}}"></checkbox>
      <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>
      <view wx:else>{{item.value}}</view>
      <!-- 通过data-index来传递参数 -->
      <button class="btn" bindtap="delete" data-_id="{{item._id}}">删除</button>
    </view>
  </checkbox-group>


</view>
</view>

wxss

/* pages/todolist/todolist.wxss */
.container{
  margin-top: 30rpx;
  margin-left: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 100%;
  padding-bottom: 1rpx;
  
}
.add-list{
  width: 100%;
  display: flex;
  float: left;
  outline-color: rgb(230, 230, 230);
}
.btn{
  margin-right: 30rpx;
  display: flex;
  float: right;
  background-color: gold;
}