🥳 做了三个月的学习卡盒小程序，开源了！

前言

去年的年末，我利用闲暇时间开始开发学习卡盒小程序，截止至今天已经接近三个月了，上线接近两个月，目前有 4150 人使用过学习卡盒小程序，虽然用户不多，但是也收获了 50 个评价，4.9 的评分。

学习卡盒是一个类似于 anki 的卡片式学习小程序，每个用户可以创建多个卡盒，每个卡盒中可以放很多张卡片，每张卡片分为正反两面：

正面可以用来记录 "问题 \ 概念 \ 中英文"
反面可以用来记录 "答案 \ 概念解析 \ 中英文的翻译"

虽然这个小程序的很多核心功能的实现，我都以文章的形式直接给大家分享了：

但既然每天使用的用户不多，我还是决定开源让这个小程序实现更大的价值，开源地址如下：

🧐 GitHub : github.com/oil-oil/car...

🤠 Gitee : gitee.com/lin_zhihuan...

功能介绍

核心概念非常简单，整个小程序就是围绕这种正反面卡片的概念进行拓展设计的，目前为止已经实现了以下功能：

目录管理：每个用户都有一个默认的目录，同时也可以创建更多的目录，每个目录中可以存放多个卡盒，用于区分不同的卡盒空间，属于最外层的一个管理维度。

卡盒管理 ：
- AI 生成卡盒：通过描述所需要的卡盒内容通过 AI 生成卡片，生成后可以先预览效果再选择是否生成，项目中支持指定最大上下文
- 创建空白卡盒：创建空白卡盒，用户手动添加卡片
- 导出/导入卡盒：将卡盒中所有卡片以固定格式导出为文本，或将一段文本以固定格式导入为卡片
- 卡盒封面颜色调整：自定义卡盒的封面颜色
- 卡盒排序 :调整卡盒在目录中的顺序
- 制定移动目录：将卡盒移动到其他目录
- 正反面交换：将卡盒中的所有卡片的正反面内容和笔记进行交换

卡片管理 ：
- AI 生成卡片：通过描述所需要的卡盒内容通过 AI 生成卡片到指定目录
- 卡片的批量删除：可以多选删除卡片
- 卡片排序：调整卡片在卡盒中的顺序
- 卡片关联功能：卡片之间可以创建关联关系，关联后可以随时查看并跳转
- 卡片笔记功能：卡片除了编辑正反面内容，还可以单独添加笔记，也支持基于卡片内容 AI 生成笔记
- 朗读卡片内容：朗读卡片的内容，支持中英文
- 翻面模式：无需进入大卡片模式左右滑动，而是直接在卡盒中快速翻面，便于背单词的场景
- 样式设置：调整卡片的居左/居中排版，文字大小，是否展示序号等等

搜索功能：通过关键字搜索所有目录中卡片的内容，点击卡片可以直接进入对应卡盒并滚动到指定卡片的位置
用户相关功能：
- 本月学习情况记录：用户进入小程序后自动开始记录学习时间并生成热力图
- AI 功能的限额：支持在云端修改 AI 的限额，用户也可以随时查看今日剩余额度

学习相关功能：
- 回忆模式：自主复习，系统展示卡片正面，用户自己选择记得/不记得卡片反面内容
- 单选模式：基于卡片正反面内容 AI 生成反面内容的混淆选项，用户需要选择正确选项，选择错误会有错题解析
- 复述模式：系统展示卡片正面内容，用户手动输入或语音输入卡片反面内容，AI 进行评分，评分超过 80 则回答正确
- 制定学习计划：指定每天要学习的卡片数量，系统根据艾宾浩斯记忆曲线为卡片分解学习阶段，并定时安排学习，用户可以查看单张卡片的学习阶段和整个卡盒的学习进度
- 练一练模式：无需制定学习计划，随时选择三种学习模式进行学习，支持顺序学习或者随机顺序学习
卡盒集市功能：系统提供了一批现成的卡盒方便用户直接导入，例如英语短文，英语单词，考公考研的知识点等等，都可以分类进行上传。

虽然场景简单，但是我做了很多功能帮助用户个性化的学习卡片，功能虽然多，但是不会很繁杂，用不上的功能我都放在更多设置中，保证了小程序整体的设计清爽：

技术栈

前端

整个小程序是使用 uniapp + vue3 + typescript 的框架开发的，仅针对微信小程序一个平台，项目的初始模版使用了 unibest，模版中引入了 wot-design 组件库，和 unocss 样式库。

后端

后端使用了微信小程序的云开发，数据库是云数据库，一些逻辑在云函数中处理。AI 功能通过接入 openrouter 的 API 实现，模型和限额都可以直接在数据库中实时调整，还可以控制所有 AI 功能的上下线，有效避免 api key 泄露或卡审核的风险。

快速开始

首先在 github.com/oil-oil/car... 拉取项目，或者点个 ⭐️

安装依赖

bash 复制代码

pnpm i

开发模式

bash 复制代码

pnpm dev:mp-weixin

然后打开微信开发者工具，导入本地文件夹，选择本项目的 dist/dev/mp-weixin 文件夹

构建发布

bash 复制代码

pnpm build:mp-weixin

在使用本项目前，需要先配置微信云开发环境：

在微信开发者工具中开通云开发，创建云环境
在 env 目录下创建或修改 .env.local，添加以下配置：

bash 复制代码

# 云开发环境 ID
VITE_CLOUD_ENV_ID='xxx'

# 版本号
VITE_APP_VERSION='1.0.0'

# 微信同声传译插件 ID，用于朗读卡片内容
VITE_WECHAT_SI_ID = 'xxx'

在云开发控制台中创建以下数据集合（数据库）：
- users - 用户信息
- config - 系统配置
- market - 卡盒集市数据
- market-classification - 卡盒集市分类
- monthly-study - 月度学习统计
在 config 集合中添加以下初始配置数据：

json 复制代码

{
  "id": "xxx", // 由系统生成
  "limit": { "default": "30", "max": "200", "pro": "100" }, // AI 功能限制
  "model": "microsoft/phi-4", // AI 功能模型名称，可以在 openrouter 中查看
  "reviewVersion": "xxxx" // 限制 AI 功能的版本号，如果系统版本和该版本一致，则无法使用 AI 功能
}

注意：请确保云函数的权限配置正确，以便应用能够正常访问云资源。

在云开发控制台中，为云函数添加以下环境变量：
- KEY - OpenRouter 平台的 API Key，用于访问 AI 模型服务提示：你可以在 OpenRouter 平台注册账号并获取 API Key

最后

小程序的效果可以是直接搜索学习卡盒进行体验的，如果文章对你有帮助欢迎请为我点个 👍🏻 ，respect~ 这篇文章欢迎公众号转发，注明出处即可。