前言
Hello 大家好我是欧呦，大概一个月前，我写了一篇文章 🗃️耗时一周，肝了一个超丝滑的卡盒小程序，那时候我开始做自己的第一个卡盒小程序，那一个月后，这个小程序做到什么程度了呢？今天就给大家汇报一下情况:
我做了哪些功能？
在这一个月里，我基本每天下班和周末都在开发这个小程序，发了大概二三十个版本，实现了以下这些功能：
文件夹、卡盒、卡片的增删查改
我的系统中一共有三种资源，文件夹 > 卡盒 > 卡片，这三种资源的关系是层层嵌套，每个资源都有自己一套完整的增删改查的逻辑，这些是这个小程序的基础功能。
| 文件夹 | 卡盒 | 卡片 |
|---|---|---|
批量操作
批量操作这里我单独拎出来，虽然也是于删除和移动的操作，但是批量操作是可有可无的，支持为了更好的体验才做的，而且这个功能也挺花时间的，目前我就卡片支持的批量操作，因为卡片的数量可能会比较多。
导入、导出
这是我最早做的一批功能之一，和资源的增删改查一起做的，因为当时自己就是着急用上自己的小程序来学习，才把这个功能的优先级提高很多，其实也并没有那么重要。
导出就是可以将现在系统里的卡片通过指定的分隔符连接在一起，最终生成一段很长的文本，用户可以直接复制，导入就是可以将一段很长的文本基于两个分隔符来解析成一张张的卡片，导入的时候我还做了预览窗口和正反面交换的功能，便于在导入前检查一下实际解析效果。
| 导入 | 导出 |
|---|---|
自定义卡片、卡盒样式
在我发了第一篇小红书后，小红书一个用户反馈导入单词后字体太小了看着不是很舒服。我原本是自己用来看句子的，尝试了一下导入单词，感觉确实看着很空很不得劲儿，于是支持了四种卡片样式自定义：
- 列表/卡片的切换
- 大/小字体的切换
- 靠左/居中布局的切换
- 开启/关闭序号展示
这个卡片样式是跟着整个卡盒走的，而且后续任何引用卡片组件的位置，都会基于用户设置的卡盒样式进行展示，这样体验就不会割裂。卡盒的颜色支持自定义，用 cursor 生成了很多比较清新的渐变色，再自己设计了一点纹理效果，卡盒整体的精致度就上去了，用起来更舒服。
| 卡片样式自定义 | 卡盒颜色自定义 |
|---|---|
关于背景的小纹理小元素，我在很多地方都用到了，是一种很好提升产品设计感的技巧。
拖拽排序
卡盒、卡片的顺序都支持拖拽排序，这个功能我有写一篇文章将如何实现的 🥲干货长文，如何用 uniapp 实现一个丝滑的英语学习卡盒小程序，感兴趣可以去看。
搜索功能
卡片支持搜索，可以跨文件夹，跨卡盒搜索，而且还有搜索结果的高亮，点击搜索结果还会跳转到卡片列表，滚动到指定的卡片位置，并且闪烁两下告诉用户具体位置。这个功能有写文章具体介绍的： 🔍给我的小程序加了个丝滑的搜索功能，踩坑表情包长度问题
朗读功能
在大卡片页面，点击操作栏中的朗读就可以将当前页面的内容读出来，中文英语都可以，我自己使用的时候就经常跟读，这个功能的实现也有写文章介绍的 🤔uniapp 小程序如何实现中英文人声朗读功能？
挖空提示功能
在大卡片模式正面时，可以点击提示按钮提示一部分背面的内容，中英文的挖空逻辑有点不同，第一次提示百分之 20%，第二次提示 50%，最多提示两次。这个功能也还有文章详细介绍的：🌟纯前端实现一个精致的中英文挖空提示功能
| 英文 | 中文 |
|---|---|
AI 生成卡片，AI 生成笔记
因为自己整理卡片数据有时候挺麻烦的，所以支持通过 AI 去整理已有的数据生成卡片，或者直接让 AI 根据需求生成卡片，目前做了四种模式。卡片的笔记区域还可以直接基于当前卡片内容去生成几条相关的笔记，自己觉得有用就可以插入到笔记里，默认会插在当前笔记的末尾。AI 的功能也有写文章介绍如何实现： 🧠如何给你的小项目加点 AI 功能？
| AI 生成卡片 | AI 生成笔记 |
|---|---|
卡片关联功能
这个功能时最近才加的，花了不老少时间去调试，功能就是用于两张卡片之间的双向绑定，绑定后就可以相互跳转查看，比如我在一句英语对话中看到一个句子，句子中有一个单词我想记下来，那么我可以创建一个单词卡盒，然后创建这个单词并且和原本那句话相互关联一下，这样彼此都能够快速查看到关联的卡片。
| 选择关联卡片 | 查看关联卡片 |
|---|---|
各种占位图、加载效果
除了功能外，一些边界情况的处理也挺花时间，但是这些小细节还是很影响整体使用感受的，下面放一部分展示一下：
| 空文件夹 | 没有关联卡片 | AI 生成中 |
|---|---|---|
后续的计划？
现在小程序做了大概一个月，前面两个星期都在堆基础功能，第三周中间上线了一版，期间发了几篇掘金写一些技术实现，有些同学也体验了一下。我还发了两三篇小红书演示一些基础功能，到今天大概 150 人使用过了，其实很少，不过产品也还很初期，我是压根不着急的。小红书上有一两个用户会经常给我反馈问题，有些建议还是很有用的，我也积极的在优化。
- 宣传方面：在我预期中的功能没有全部实现前，我不会做很多宣传相关的投入了，只是偶尔分享下开放进度，毕竟自己不太擅长做营销，如果在这里投入精力没有收获回报容易对自己的开发热情有打击，先专注把东西做好，这也是我喜欢又擅长的事情，这样能够坚持。
- 功能方面：后续还有两个大功能点在我的计划中，都是根据我自己的需求去设计的：
- 制定学习计划功能，根据遗忘曲线去生成一个卡盒的总学习时间，然后动态提醒用户每张卡片的复习时间和当前掌握的状态，并反馈一个总的掌握情况。
- 开发方向：之所以选择小程序，不仅是因为熟悉，而且也是因为 IOS 和安卓的 APP 要上架太难了，基本都需要在上架方面花大量的时间和金钱。我这个小程序做到现在，就花了 cursor 的一个会员费和 30 块钱的微信认证。AI 功能的免费 token 都还没用完。我还有去看鸿蒙的元服务，uniapp 说是可以直接构建出元服务，但是上架还是一样需要软著。说来讽刺，大家都说小程序个人主体审核很严，事实确实是如此，但是相比软件和 Web 端在国内上线需要域名备案，软著，各种杂七杂八的东西，小程序竟然已经算是菩萨心肠了。
开发的感受
我在上周把 UI 全部优化了，这次的 UI 改造其实把我最初实现的那一版 Demo 给推翻了，我最初的想法是将所有的功能都放在一个页面中，通过弹窗或者过渡的形式进行不同功能点之间的交互，这也是我第一篇文章中发布的那个效果。
不过我的想法还是太理想化了，我当初自己尝试了大概一个卡盒五六十张卡片是很丝滑的，所以下意识认为应该一百张也没问题。但实际上线后，有个用户反馈她用来背单词，一个卡盒里面有上千张卡片，如果我还保留原本的交互方式，不论如果优化，展开卡盒时注定卡顿很严重了。
在推翻前我尝试了两天用各种优化方式，比如懒加载，分页加载，优化一些计算逻辑，效果都不好，最终还是不理想。这种很丝滑的交互如果在 app 端可能可以做到，但是在小程序里面各种限制太多了，很多行为原生组件没有提供参数就一定没法实现，更何况原生组件只会给你拖后腿。小程序的坑真的很多，建议没吃过💩的朋友们都去体验一下，写上一个月再去写 Web 端简直是一种享受，原来 Ctrl+s 是可以热更新的，原来开调试控制台的时候，元素是真的可以选中的，还可以在控制台调整 css 样式😭。
一些思考
我知道现在很多笔记类，todolist类的工具很烂大街了，它们大体上的功能是接近的，但是其实里面很多细节都有所不同，比如a产品一进去是个日历，b产品一进去是个列表，a的添加按钮是通过点击右下角的添加按钮，b产品是直接点击顶部的输入框。这些一个一个的小点会一步一步的筛选使用的用户，最终留下一批觉得这个产品是用起来最舒服的用户。所以并不是必须有颠覆性的功能。很多产品技术门槛都不高，主要就是比拼一下创意和营销了。
我作为我自己产品的核心用户，也作为产品的开发者，只有这个产品我自己用着都觉得不错，我才会有信心推荐给其他人使用。到目前为止，除了一些电商平台类的小程序端，我就没有见到真的觉得很好用的小程序，尤其是工具类的，所以我觉得还是有点机会的。现在我对我的卡盒小程序还是很自信的，我认为是目前最好用的卡片小程序了，基本每个交互和功能点我都有细细打磨，让小程序也能做出 APP 的质感。
做自己的产品真的很爽，很长时间没有这么投入了，有一次周末我为了解决 textarea 在弹窗中层级穿透的问题，我从下午四点钟一直调到晚上十二点，期间为了实现一个好的交互效果以及避开微信小程序中原生组件的一些坑，换了很多版交互都不是太满意，最终也只是做了一版凑合用的，但是在这期间我感觉时间是飞快流逝的，换做以往，这段时间我可能看看剧，看看书，健健身再吃个饭，还会提早一些睡觉，感觉周末很充实惬意。现在一个周末不够我做两三个功能点的，感觉前一秒周五刚下班，小程序一发版，已经周日晚上准备睡觉了🥹。
每天晚上睡下，我就会开始思考很多关于后续还有哪些功能点可以优化，真的是越想越多，越想就越觉得现在应该爬起来再优化一下，其实这种追求完美想法很不适合做商业化产品，但是如果只是做自己的东西，那种灵感源源不断带来的快感还是很爽的，除了有点影响睡眠😔。
后续我还是会继续打磨这个小产品，把我平时灵光一现的小点子都实现进去，复杂的功能偶尔发发文章记录一下，感兴趣的同学可以直接小程序搜索学习卡盒体验一下，紫色图标那个就是了，如果文章对你有帮助欢迎点个赞关注一下，respect~