前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为了管理日常,我写了个 TODO LIST 微信小程序

为了管理日常,我写了个 TODO LIST 微信小程序

作者头像
Jimmy_is_jimmy
发布2024-07-03 10:54:45
70
发布2024-07-03 10:54:45
举报
文章被收录于专栏:call_me_Rcall_me_R

前言

在日常的生活中,之前笔者是使用 notion 来记录事情,或者是使用苹果自带的备忘录来记录。

但是,这两个工具,自己都不常用。而微信,是日常使用占比最长的应用,就比如下图来自 2024-06-29 20:46 分的截图:

使用时间占比.jpg
使用时间占比.jpg

那么,我直接在微信上使用一个计事的工具不就很方便了。

问题又来了,可是我不希望别人保存我的数据,并且我需要对事件进行定制化,以符合自己使用的习惯。

于是,微信小程序本地服务版本就很适合笔者。

为什么说是 本地化服务,因为这个小程序并不会使用到后端服务,数据存在 localStorage 上。

微信官方小程序文档中表示:同一个微信用户,同一个小程序 storage 上限为 10MB。

下面,我们将手把手教你怎么去开发这么一个小程序。

注册小程序

我们可以通过 小程序注册,根据流程来完整注册。

小程序注册.png
小程序注册.png

注册完成后,通过 微信公众号平台 扫码,选择对应的小程序进行登陆,比如下图笔者的 TodayIsMatter 的小程序。

TodayIsMatter.jpeg
TodayIsMatter.jpeg

注意⚠️,本小程序因为没有缴纳微信要求的付费,故无法被搜索,分享等。如果想体验本小程序,文末会给出对应的小程序码,感兴趣的读者可以扫码进行体验。

开发者工具

我们通过 官方微信开发者工具 来下载对应系统的 IDE。笔者安转的是 Mac 版本的,打开之后,长这样:

小程序开发者工具.png
小程序开发者工具.png

我们直接点击 小程序 -> 大大的 + 号按钮 新建项目。

PS,如果是没有登陆的情况下,会被要求登陆

创建小程序.png
创建小程序.png

按照提示,填写对应的信息。这里的 AppId 是微信小程序唯一的 ID 信息,我们可以通过登陆小程序后台,开发 -> 开发管理 -> 开发设置 -> 开发者 ID -> AppID(小程序ID) 获取。

开发 TODO LIST

TODO LIST 是一个老生常谈的话题。

逻辑图

我们实现的这个微型的应用程序,逻辑很简单,我们简单画个图。

todo_list逻辑.png
todo_list逻辑.png

很简单,是吧。

我们总共就三个页面 - 新增页面详情页面列表页面

我们总共给 TODO ITEM 设定下面几个状态:

  • 已创建: 创建项目,已创建状态可以直接转化成摒弃或者进行中的状态
  • 进行中:进行中的状态可以直接转化成已完成的状态
  • 已完成:已经完成的事件可以直接删除
  • 摒弃:已经摒弃的事件可以直接删除

不支持对事件的主要内容进行更改。如果创建错误,需要先摒弃后删除,然后重新创建事件。

代码项目结构

我们创建项目,选择的是 不使用云服务JS-基础模版 来创建。

然后,我们捣鼓下项目的结构如下图:

项目结构.png
项目结构.png
代码语言:javascript
复制
TodayIsMatter 小程序项目
├── components // 相关的组件
│   └── footer // 页脚组件
├── images // 图片资源
├── miniprogram_npm // 小程序第三方组件
├── pages
│   ├── add // 添加 todo item 页面
│   ├── detail // todo item 页面详情
│   └── list // todo 事件列表页面
├── utils // 实用方法集合
├── app.js // 应用入口文件
├── ...
└── package.json

每个页面或者组件下面都会有四个文件:

  • js 文件:编写对应的逻辑
  • json 文件:配置对应页面或者组件的信息
  • wxml 文件:类似前端开发的 html 文件,编写页面骨架
  • wxss 文件:类型前端开发的 css 文件,用于润色页面

嗯😐,如果是前端开发人员,那么对编写微信小程序来说,小菜一碟~

UI 库选择

本小程序使用的是比较成熟的 vant ui 组件库。官方推荐的 WeUI 组件库 也很不错,读者可以按照个人使用习惯来使用。关于如是在小程序中使用 vant ui,我在章节 引入 vant 上有介绍,这里不赘述。

页面生命周期

我们在新建页面的时候,在对应的 js 文件,默认出现下面的内容:

代码语言:javascript
复制
// pages/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

上面的注解,解析了每个钩子函数的功能。我们结合下官方页面 Page 实例的生命周期图👇,会更好理解。

page-lifecycle.2e646c86.png
page-lifecycle.2e646c86.png
最终效果图

TODO LIST 的列表

这里很简单,只是从 storage 中读取数据,对左滑对数据的状态进行更改。

代码语言:javascript
复制
  getTodoList() {
    // 获取数据
    const keys = wx.getStorageInfoSync().keys;
    if(keys.includes(localStorageVar.TODO_LLST_DATA)) {
      const todoList = wx.getStorageSync(localStorageVar.TODO_LLST_DATA);
      // 对 list 进行排序
      let orderList = [];
      const createdList = [];
      const pendingList = [];
      const doneList = [];
      const abandonList = [];
      for(let index = 0; index < todoList.length; index++) {
        let item = todoList[index];
        switch(item.status) {
          case `${CREATED}`: item.statusCls = 'created'; createdList.push(item); break;
          case `${PENDING}`: item.statusCls = 'pending'; pendingList.push(item); break;
          case `${DONE}`: item.statusCls = 'done'; doneList.push(item); break;
          case `${ABANDON}`: item.statusCls = 'abandon'; abandonList.push(item); break;
          default: break;
        }
        orderList = [...createdList, ...pendingList, ...doneList, ...abandonList];
      }
      this.setData({
        todoList: orderList
      })
    }
  },

TODO LIST 事件项添加

添加事件项的表格中,指定了事件的完成时间,事件的优先级和事件的状态。

代码语言:javascript
复制
  // 保存待办
  async saveTodo() {
    let that = this;

    if(that.data.title === '' || that.data.desc === '' || that.data.date === '' || that.data.status === '') {
      wx.showToast({
        title: '请完善所有字段',
        icon: 'error',
        duration: 2000
      });
      return
    }
    
    // 获取已经保存的数据
    const keys = await wx.getStorageInfoSync().keys;
    let currentData = {
      id: Date.now(), // 生成的时间戳 id
      title: that.data.title,
      desc: that.data.desc,
      date: that.data.date,
      status: that.data.status,
      priority: that.data.priority,
      progress: 0, // 进度默认为 0
    };

    let finalTodoList = [];
    if(keys.includes(localStorageVar.TODO_LLST_DATA)) {
      const todoList = wx.getStorageSync(localStorageVar.TODO_LLST_DATA);
      finalTodoList = [
        ...todoList,
        currentData
      ]
    } else {
      finalTodoList = [currentData];
    }

    // 只允许新建六条记录
    if(finalTodoList.length > 6) {
      wx.showToast({
        title: '最多建六条记录',
        icon: 'error',
        duration: 2000
      });
      return;
    }

    // 有必要则保存到数据库
    await wx.setStorage({
      key: localStorageVar.TODO_LLST_DATA,
      data: finalTodoList
    });

    wx.navigateTo({
      url: '../../pages/list/list',
    })
  },

TODO LIST 事件项详情

代码语言:javascript
复制
  finishPomodoro() {
    // 播放音频
    innerAudioContext.src = srcUrl;
    innerAudioContext.play();
    this.setData({
      isPomodoroFinish: true
    });
  },
  async beginDoing() {
    // 如果是已经创建则更改为进行中
    let currentTodoItem = this.data.todoItem;
    currentTodoItem.status = PENDING;
    let modifyList = modifyToDoList(this.data.todoList, currentTodoItem, false);

    // 保存数据
    await wx.setStorage({
      key: localStorageVar.TODO_LLST_DATA,
      data: modifyList
    }); 

    this.setData({
      doing: true
    });

    this.getTodoDetail(this.data.id);
  },
  getTodoDetail(id) {
    // 获取数据
    const keys = wx.getStorageInfoSync().keys;
    if(keys.includes(localStorageVar.TODO_LLST_DATA)) {
      const todoList = wx.getStorageSync(localStorageVar.TODO_LLST_DATA);
      const item = getTodoItem(todoList, id);
      this.setData({
        todoList: todoList,
        todoItem: item
      });
    }
  },

在详情的页面中,可以将事件项的状态由“已创建”更改为“进行中”,并且可以控制完成的进度。还引入了番茄时间的管理理念,进行片段化时间沉浸学习。到时间点,会有音乐进行提示。

PS:在本地测试中,番茄时间能够正常到点提示,在真机上或许需要申请才能进行音乐提示。这个有点尴尬

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-07-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 注册小程序
  • 开发者工具
  • 开发 TODO LIST
    • 逻辑图
      • 代码项目结构
        • UI 库选择
          • 页面生命周期
            • 最终效果图
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档