微信小程序-TodoList

TodoList

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2. 熟悉git代码管理流程，将源代码上传到到github 3. 在博客园班级中写一篇相应的博文
作业源代码	https://github.com/czwzy2017/WeChat-app-TodoList
学号	31801138
院系	浙大城市学院计算分院

前言

第一次接触小程序，先从github上下载了一个他人的小程序进行学习。

原小程序GitHub地址：https://github.com/charleslo1/weapp-todo

然后去掉了一些我觉得没啥必要的功能，添加了一个清除已完成功能。

界面展示

文件结构

components/checkbox 勾选框组件

components/todo-item 任务条目组件

models/Todo.js todo数组模块

pages/todo/index 主页面

pages/todo/create 创建任务页面

pages/store/todoStore.js 对todo的一系列操作

功能

读取用户信息

    wx.getUserInfo({
      success: (res) => {
        // 可以将 res 发送给后台解码出 unionId
        this.globalData.userInfo = res.userInfo
      }
    })

当小程序隐藏或退出时，保存数据

  onHide() {
    todoStore.save()
  },
  onError() {
    todoStore.save()
  }
})

长按删除

 handleTodoLongTap(e) {
    // 获取 index
    let index = e.currentTarget.dataset.index
    wx.showModal({
      title: '删除提示',
      content: '确定要删除这项任务吗？',
      success: (e) => {
        if (e.confirm) {
          this.data.todos.splice(index, 1)
          this.update()
        }
      }
    })
  }

删除所有已完成

handleDeleteTodo(e){
    for (var i=0;i<this.data.todos.length;i++){
      if ((this.data.todos[i].completed)==true){
        this.data.todos.splice(i,1);
        i--;
      }
    }
    this.update()
    
  }

首次起用时，会在页面上显示各种操作提示

  __init() {
    let isInited = wx.getStorageSync('__todos_inited__')
    if (isInited) return
    this.todos = this.todos.concat([new Todo({
      title: '欢迎使用TodoList',
      completed: false,
      level: 1,
      createdAt: new Date()
    }), new Todo({
      title: '点击左边勾选框完成一项任务',
      completed: false,
      level: 1,
      createdAt: new Date()
    }), new Todo({
      title: '点击标题可以编辑任务哦',
      completed: false,
      level: 2,
      createdAt: new Date()
    }), new Todo({
      title: '点击右边日期可修改日期',
      completed: false,
      level: 3,
      createdAt: new Date()
    }), new Todo({
      title: '点击下面的 + 新建一项任务吧',
      completed: false,
      level: 4,
      createdAt: new Date()
    }), new Todo({
      title: '点击下面的 - 可以清除所有已完成',
      completed: false,
      level: 4,
      createdAt: new Date()
    }), new Todo({
      title: '长按可删除任务',
      completed: false,
      level: 4,
      createdAt: new Date()
    }),new Todo({
      title: '这是一条已完成的任务1',
      completed: true,
      level: 4,
      date: new Date('2017/11/18'),
      createdAt: new Date(),
      completedAt: new Date('2017/11/18')
    }), new Todo({
      title: '这是一条已完成的任务2',
      completed: true,
      level: 4,
      date: new Date('2017/11/19'),
      createdAt: new Date(),
      completedAt: new Date('2017/11/19')
    }), new Todo({
      title: '这是一条已完成的任务3',
      completed: true,
      level: 4,
      date: new Date('2017/11/20'),
      createdAt: new Date(),
      completedAt: new Date('2017/11/20')
    }), new Todo({
      title: '这是一条已完成的任务4',
      completed: true,
      level: 4,
      date: new Date('2017/11/20'),
      createdAt: new Date(),
      completedAt: new Date('2017/11/20')
    })])
    this.save()
    wx.setStorageSync('__todos_inited__', true)
  }

保存数据至本地

 save() {
    wx.setStorageSync(this.key, this.todos)
  }
}

添加计划

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // todo
    todo: new Todo(),

    // 级别
    levels: ['紧急且重要', '重要不紧急', '紧急不重要', '不紧急不重要']
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.todo = new Todo()
    this.update()
  },

  /**
   * 分享
   */
  onShareAppMessage: function (options) {

  },

  /**
   * Todo 改变事件
   */
  handleTodoItemChange (e) {
    let todo = e.detail.data.todo
    Object.assign(this.data.todo, todo)
    this.update()
  },

  /**
   * 级别改变事件
   */
  handleLevelChange(e) {
    this.data.todo.level = parseInt(e.detail.value) + 1
    this.update()
  },

  /**
   * 描述输入事件
   */
  handleDescChange (e) {
    this.data.todo.desc = e.detail.value
    this.update()
  },

  /**
   * 取消按钮点击事件
   */
  handleCancelTap (e) {
    wx.navigateBack()
  },

  /**
   * 保存按钮点击事件
   */
  handleSaveTap(e) {
    todoStore.addTodo(this.data.todo)
    todoStore.save()
    wx.navigateBack()
  },

  /**
   * 更新数据
   */
  update (data) {
    data = data || this.data
    this.setData(data)
  }
})