微信小程序-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)
  }
})