我们开发了一款待办事项分享平台——待办库(Todo Store)

于 2021-11-25 13:38:56 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： # 实用工具 # SwiftUI 文章标签： app ios swift
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15041159/article/details/121532569
版权

目录

从另一个方向思考

说起“待办事项”或Todo-List，由于这类型的App基本没有什么技术含量，开发周期短，面向用户广泛，所以各个平台都有很多这类软件，这些软件的核心功能无非就那几个：快速添加待办事项、多设备同步、复杂的统计功能、美观的UI、重复提醒、高级点的还有团队协作、公司内部行事历之类的。
还有一个方向值得探讨，那就是共享知识库。有时候我们使用待办事项App，是因为我们已经认识到有一些事情需要去做，我们会把要做的事情列出来，而在一些特定的场合下，不一定能够想到那么周到，比如说养猫，让你列出养猫所需要准备的事情，对于经常养猫的人来说，你可能会脱口而出：猫粮、猫砂、猫窝、猫碗、打疫苗、绝育、驱虫…而对于养猫新手来说，他可能就不会想得那么周到。在一些较为专业的领域，就拿我们技术人员经常接触的来说吧，建设网站、域名备案要准备哪些事情？小程序审核并上架要准备哪些材料？林林总总的条目，最好是一开始就清除每一步要做什么，要准备什么。这些事情，都要靠自己花时间去百度、翻文档，整理出来，或者见机行事，到时候再准备，往往会浪费时间。如果我们把这些事情，全部列出来，分享到一个共享平台上面，只要搜索，就能列出所有的待办事项和步骤，岂不美哉？这就是我们今天要介绍的——待办事项分享平台。

链接

App Store - 待办库
小程序-敬请期待
安卓-敬请期待

功能介绍

搜索

既然我们是一个分享平台，搜索功能是必不可少的，我们实现了搜索官方合集、待办或两者同时搜索，后台使用Elasticsearch提高检索效率，同时我们还添加了二维码识别功能，可以扫码由本应用产生的二维码快速进入相应的待办事项列表。
在这里插入图片描述

官方合集

我们会定期整理出好评度较高的待办事项列表并添加到官方推荐中：

在这里插入图片描述

支持树状关系

我们考虑到，对于一个待办事项来说，他总会有更小的子待办，比如说去政务中心办事，需要准备一份材料，而材料上需要签名、盖章之类的，这样就形成了一个二层结构，我们支持无限层级的子结构。
在这里插入图片描述

一键添加到日历

挑选好你所需要的待办事项之后，你可以将其一键添加到手机日历中，支持时间、重复、优先度、重要度等。
在这里插入图片描述

分享自己的经验

如果你觉得有什么自己的经验可以分享出来，就使用发布功能，支持设置父级、标题、备注、图标、重要性、标签、优先级、开始时间、结束时间、重复、结束重复、子待办…
在这里插入图片描述

查看自己的数据

在这里插入图片描述

一些技术上的

结构

  • iOS App：SwiftUI
  • 后台：PHP

使用内嵌网页登录

此App没有做登录页面，而是采用内嵌网页登录方案，此方案有以下优点：

  • 前端无版本限制，所有版本都可以登录
  • 后台可随时修改登录逻辑
  • 无需修改前端即可在后期支持更多的第三方登录

此方案的逻辑如下：

Created with Raphaël 2.3.0 加载登录页面 检测页面跳转 检测cookie是否登录成功 完成 yes no

在这里插入图片描述

生成海报

实际上这个功能实现起来不容易，其一是因为SwiftUI这个语言出现得太晚，可参考的资料不多：

SwiftUI将特定的view（非UIView）转为图片并分享（截图海报功能）

在这里插入图片描述
在这里插入图片描述

不足与展望

  • 完善公共Api
  • 优化动画
  • 优化错误提示
  • 优化UI
  • 推出商用版本（公司内部版）
Antonio·Future
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ToDo-List-ReactJS:待办事项列表，其中包含使用 React.js 完成的任务的描述
08-04
:page_facing_up: 待办事项清单 :rocket: 带有 React.js 任务描述的待办事项列表 网站链接： : :hammer_and_wrench: 技术 在项目的建设中使用了以下工具： 特征 :check_mark_button: 在 localStorage 中保存/删除任务。 :check_mark_button: 创建并显示您的任务描述。 :package: 关于 开始研究React的项目。 这是一个待办事项列表，可以选择编写描述。 当访问您的任务的详细信息时，它的 ID 将在 URL 中传递，从而形成一个循环以从 localStorage 中查找与捕获其标题和描述的 ID 匹配的任务。 克隆这个仓库 $ git clone 安装依赖 $npm 安装 运行应用程序 $npm 开始 服务器将在端口：3000 启动 转到http://localhost:3000
系统待办事项设计_产品深度体验（2+2+3模式）-待办清单类App产品
weixin_39634351的博客
12-04 1203
本文以第一视角，进行互联网待办清单类产品体验，可以作为参照。笔者认为，互联网产品体验2+2+3模式。两个维度：静态+动态；3个系列：横向+纵向+时间；3个方面：产品+竞品+其它品类。 静态中两个方向：横向+纵向。其中，横向分为：1）竞品功能异同体验分析；2）功能模块的非竞品主流产品体验分析。纵向：产品的深度体验（主要功能，亮点特色功能，暴力边界体验）。 动态：主要以时间为逻辑...
实战丨Web云开发项目—TodoList待办事项
TCB_CloudBase的博客
02-02 786
背景 TodoList应用，是面向零基础同学的快速入门应用。你可以一行代码完成TodoList的本地化搭建，如果你想要网络同步你的Todo数据，在多个设备之间实时同步共享，云开发构建仅需100行。 体验地址：https://acc.cloudbase.vip/todo/ 此项目适用于零基础用户体验使用，通过一定的模块手段集约了整体编码。如果想要深入学习请掌握js、html、css等编程技术，自主解析模块中的代码（均为入门原生代码） 如果你不想执行以下步骤翻看代码，可以直接点击下方按钮一键部署 一、
前端入门级项目练手： 30分钟从零开发“待办事项”WebApp
代码技巧
06-04 628
我们正在经历一场互联网革命，这是一个时代的趋势，我们必须承认，所有的流量、技术、资本、都会流向这个趋势中，可以预见，技术行业将越来越吃香。前端是进入技术行业的一个捷径。1、前端入门简单；...
推荐一款待办事项和日程管理的微信小程序——腾讯待办
HeHeHe
08-14 6651
腾讯待办微信小程序是腾讯出品的一款非常好用的小程序，是一款待办事项和日程管理工具，可以帮用户高效地完成任务和规划时间，支持分组管理、周期提醒等功能。已经使用一段时间了，确实好用，现在推荐给大家。 一、如何打开腾讯待办小程序 在微信页面下拉屏幕，搜索“腾讯待办” 小程序即可。 二、新建待办事项 点击新建待办或右下角的+按钮，输入待办的内容，第一个按钮可以设置待办事项为重要，第二个按钮可以选择将待办事项分享给哪些微信好友，第三个按钮可以选择提醒时间，第四个按钮可以选择待办事项在某个分类下，第五个.
flask-todo:待办事项列表的 Flask 应用程序存储库
05-30
使用 Flask 和 Python 的待办事项列表该存储库包含待办事项列表的实现并使用以下技术：Python/Flask、HTML、JS、CSS/Bootstrap、SQLite 和 SQLAlchemy。执行要运行该项目，只需安装requirements.txt文件中包含的依赖...
Todo-App:简单的待办事项清单android应用
05-06
Simple Todo是一个Android应用程序，它允许构建待办事项列表和基本的待办事项管理功能，包括添加新项目，编辑和删除现有项目。 提交人： Manchit Gupta 花费时间：总共花费8个小时 用户故事 完成以下必需的功能： ...
记事本工具 备忘、提醒、 应用 记录个人待办事项
07-03
记事本工具 备忘、提醒、团队协作、 应用 记录个人待办事项 电子记事本、便签、备忘录工具。 待办事项(todo list)提醒工具。 时间管理工具。 任务派发和状态跟踪工具。
todo_r —用一个命令找到所有待办事项！-Rust开发
05-27
Todo_r是一个简单的rust命令行实用程序，可在代码中跟踪待办事项。 发音为Todo_r用一个命令查找所有笔记！ Todo_r是一个简单的rust命令行实用程序，可在代码中跟踪待办事项。 像做待办事项的人一样发音为“ todoer”...
待办事项--TODO
10-24
关于待办事项的一个小范例，对于初学者，可以参谋、参谋
待办事宜系统
01-14
能够对任务设置待办事件，时间到时会给你提示
todolist：待在家共享的待办事项列表
02-15
todolist：待在家共享的待办事项列表
待办事项页面随手一写
12-28
待办事项页面，待办事项页面，内嵌人形时钟js，以及标签页切换。怕忘掉基础，随手一写，互相交流学习|||||||待办事项页面，待办事项页面，内嵌人形时钟js，以及标签页切换。怕忘掉基础，随手一写，互相交流学习
待办事项：简单的待办事项网站
02-10
SIMPLE TODO APP-NodeJS，Express，MongoDB，Vue 在计算机上本地运行 您需要安装Node和NPM。 克隆此存储库 git clone https://github.com/gtsopour/nodejs-shopping-cart.git 安装依赖 npm install 在启动NodeJS服务器 npm start 供Nodemon使用 npm run dev 所有默认值都必须放在.env文件中： MONGODB_URL =mongodb://localhost:27017/myapp SESSION_SECRET_KEY =session_secret PORT =3000 JWT_KEY =jwt_secret MONGODB_URL-连接mongobd数据库的URL PORT-服务器端口JWT_KEY-jwt秘密密钥SESSION_
to-do-list-website:待办事项网站
05-28
待办事项网站 待办事项网站
Flowable流程引擎-项目实战篇【2022版】
11-03
课程特色本套课程是在前面的 婉舒管理系统 的基础上再详细的给大家讲解Flowable在实际项目中实际应用，在本项目中既有普通的流程运转，也集成了FlowableUI在项目中，实现了流程设计和部署运行的一体化。更有表单的详细讲解和应用 
代码托管平台的待办事项你知道吗 ?｜GitCode
GitCode
08-26 292
当你登录到 GitCode 时，通常需要看一下哪些内容需要花费较多时间、开始干活或知道需要注意的是哪些，而无需理会大量的电子邮件通知。这里是你工作的地方，因此能够快速下手开展工作尤为重要。待办事项就是这样一个工具，它在一个简单的仪表板中按时间顺序列出了等待你处理的内容。如下图所示，我有 14 个待办事项和 17 个已完成的事项。 待办事项的显示规则如下: 小于 100 的蓝色数字是待办事项的数量 大于或等于 100，则数字显示为 99+，确切的数字显示在"任务列表"上，如下图所示 待办事项类型:
简单的待办事项清单网站--准备工作
qq_38831517的博客
09-07 2928
博客目标 熟悉django 了解简单网站的建立和部署过程。 熟悉tdd（Test-Driven Development）流程
简单的待办事项清单网站--实现基本功
qq_38831517的博客
09-14 4554
功能测试：以用户的视角测试网站。 单元测试：以程序员的视角测试网站。 所以我们的功能实现是以功能测试为基准的，而单元测试则渗透进码代码的过程中
用VUE+element+vuex写一个待办事项页面
最新发布
04-04
抱歉，我是语言模型AI，无法为您编写代码，但我可以提供思路和指导，希望对您有帮助。下面是一个待办事项页面的示例代码： 首先，我们需要安装 Vue.js 和 Element UI： ```bash npm install vue npm install element-ui npm install vuex ``` 然后，我们创建一个 TodoList 组件，它包含一个输入框和一个待办事项列表： ```html <template> <div class="todo-list"> <el-input placeholder="请输入待办事项" v-model="newTodo" @keydown.enter.native="addTodo"></el-input> <el-list v-if="todos.length" v-for="(todo, index) in todos" :key="index"> <el-list-item> <span>{{ todo }}</span> <el-button type="text" icon="el-icon-delete" @click="deleteTodo(index)"></el-button> </el-list-item> </el-list> <p v-else>暂无待办事项</p> </div> </template> ``` 在这里，我们使用了 Element UI 的 el-input 和 el-list 组件。我们将输入框的值绑定到了组件的 data 属性中的 newTodo 变量，并且在用户按下 Enter 键时调用 addTodo 方法添加待办事项。待办事项列表使用了 v-for 指令渲染，每个待办事项都有一个删除按钮，点击按钮时调用 deleteTodo 方法。 接下来，我们在组件的 script 标签中定义 data 和 methods： ```js <script> import { mapActions, mapGetters } from 'vuex' export default { data () { return { newTodo: '' } }, computed: { ...mapGetters(['todos']) }, methods: { ...mapActions(['addTodo', 'deleteTodo']) } } </script> ``` 这里，我们使用了 Vuex 中的 mapActions 和 mapGetters 辅助函数，来将 store 中的数据和方法映射到组件的 props 和 methods 中。 最后，我们需要将 TodoList 组件注册到 Vue 实例中，并且创建一个 store 对象来管理应用的状态： ```js import Vue from 'vue' import Vuex from 'vuex' import TodoList from './TodoList.vue' Vue.use(Vuex) const store = new Vuex.Store({ state: { todos: [] }, mutations: { addTodo (state, todo) { state.todos.push(todo) }, deleteTodo (state, index) { state.todos.splice(index, 1) } }, actions: { addTodo ({ commit }, todo) { commit('addTodo', todo) }, deleteTodo ({ commit }, index) { commit('deleteTodo', index) } }, getters: { todos: state => state.todos } }) new Vue({ render: h => h(TodoList), store }).$mount('#app') ``` 在这里，我们使用了 Vuex 的 state、mutations、actions 和 getters 来管理应用的状态。我们在 state 中定义 todos 数组来存储待办事项，然后使用 mutations 中的 addTodo 和 deleteTodo 方法来添加和删除待办事项。在 actions 中，我们将 addTodo 和 deleteTodo 方法封装成了异步的操作，并且在调用时使用了 commit 方法来触发 mutations 中的方法。最后，我们将 store 对象注册到 Vue 实例中，使得组件可以通过 mapActions 和 mapGetters 辅助函数来访问 store 中的数据和方法。 这样，我们就完成了一个简单的待办事项页面。当用户输入待办事项时，它会被添加到列表中，当用户点击删除按钮时，它会从列表中删除。所有的状态管理都交给了 Vuex 来处理，使得应用更加有条理和易于维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值