# Wrong question book **Repository Path**: arm-linux/wrong-question-book-weixin ## Basic Information - **Project Name**: Wrong question book - **Description**: 错题集小程序（微信云开发） - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2024-03-02 - **Last Updated**: 2024-03-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 错题本小程序 https://gitee.com/jhan269/wrong-question-book-weixin ## 1. 准备 ### 1.1 简介 基于微信小程序原生的云开发 ### 1.2 技术点、组件库 - 云函数 - 云数据库 - 云存储 - canvas 画布 - OCR 通用文字识别 - 百度智能翻译 - image-cropper 图片裁剪编辑 - VantUI 组件库 - ColorUI 组件库 - Echarts ### 1.3 目录结构 ```text ├── cloudfunctions // 云函数 ├── getProfile // 获取openid ├── reqUserAPI // 包含注册、登录、绑定、修改密码等 ├── reqGradeAPI // 用户年级信息 ├── reqQuestionAPI // 包含录入、获取、删除错题等 ├── reqTalkAPI // 包含发布、删除讨论，进行评论回复、点赞等功能 ├── getOCRTken // 获取OCR接口必须的token值 └── baiduOCR // 百度图片文字识别 ├── miniprogram ├── components // 组件目录 └── image-cropper // 图片裁剪 ├── images // 公共图片 ├── miniprogram_npm // npm构建目录 ├── packageA // 分包A └── pages ├── imgEntry // 图片识别录入错题 ├── textEntry // 手动录入错题 ├── cropper // 拍照或本地选择的图片，经此页面进行编辑 ├── examBefore // 考试引导页 ├── exam // 考试页 ├── questionTotal // 错题总览 ├── reviewToday // 今日待复习 └── utils ├── tool.js // 工具包 ├── useSaveQuestion.js // 录入错题到数据库 └── useFilterText.js // 过滤生成的文字 ├── packageB // 分包B └── pages ├── classCategoryList // 主页面category跳转至此详情页 └── utils ├── packageC // 分包C └── pages ├── creatPost // 发布讨论 └── comment // 讨论详情，可进行回复等功能 ├── packageD // 分包D └── pages ├── register // 注册和忘记密码 ├── bindUser // 绑定用户 ├── setup // 设置 ├── chart1 // 图表 ├── chart2 // 图表 ├── chart3 // 图表 ├── chartBefore // 图表选择页 ├── dictionary ├── idiom ├── poetry ├── schedule ├── study // 学习计划 ├── translate // 多语种翻译 └── utils ├── handleHistory.js // 处理图表所展示的日期信息 ├── language.js // 多语种整理 └── shufflePhone.js // 对注册和解绑后生成的用户名，进行脱敏处理 ├── pages // 主包 ├── index // 首页 ├── category // 分类 ├── discuss // 讨论 ├── mine // 我的 └── questionDetail // 错题详情页，可修改编辑错题 ├── style // 公共样式 ├── login-reg.wxss // 登录注册公用 └── common.wxss // 全局公用 ├── utils ├── mcaptcha.js // 生成图形验证码 ├── regularIpt.js // 输入框的正则验证 ├── userInfo.js // 用户Storage操作 ├── useGetQuestion.js // 获取错题列表 ├── useDelQuestion.js // 删除或清空错题 ├── getnowTime.js // 处理时间戳为标准时间格式 ├── getTimeAge.js // 处理时间戳为历史时间格式 └── constant // 存放一些常量信息 ├── common.wxs // 公用wxs文件，主要解决在wxml文件里，使用函数处理数据的问题 ├── app.js ├── app.json // 小程序全局配置 └── app.wxss ├── .eslintrc.js // 默认eslint规则 ├── .gitignore // 上传git忽略的目录 ├── package.json ├── project.config.json └── README.md ``` ### 1.4 数据库说明 wqb_user ： 存储用户信息 wqb_grade ：存储用户年级和总错题qid信息 wqb_questions：存储错题 wqb_talk：存储讨论内容 ## 2. 登录设计 ### 2.1 思路 各类移动端APP为了简化打开方式，会设计相关联的小程序，此类小程序用的是外部的服务器、后台等内容，因此账号注册登录，存储在外部数据库中； 本次开发使用微信官方的云开发服务，如果只是单纯的在微信使用时，获取当前微信用户的信息，就可实现简单快速登录。但是此方式有很大的限制，如果在别人的微信号上，想登录自己的小程序账号，显然是不行的； 因此专门设计一个云数据库，以手机号码加密码验证的方式，进行账号的注册以及登录；同时也可以直接获取当前用户信息，实现快速登录； 当然此方式，同时还需要实现已注册的账号，与用户的微信账号绑定；不同于在各类APP上的微信第三方登录，而是把微信用户信息，通过账号绑定的方式，同时存储与云数据库中。可以实现微信用户和错题集用户的同步登录。 ### 2.2 数据库 注意点：注册时，是将账号存入数据库中，直接在云函数上操作，无需用户openId；openId是微信与小程序账号绑定时录入数据库的。 数据库名称：wqb_user | 字段 | 类型 | 说明 | | --------- | ------ | ---------------------------------- | | _id | string | 用户的唯一标识uid | | phone | string | 手机号，用于登录 | | password | string | 密码，经过bcryptjs加密 | | avatar | string | 默认头像，绑定微信后使用微信头像 | | nickname | string | 默认昵称，绑定微信后使用微信昵称 | | openid | string | 用户的openid，未绑定微信账号时为空 | | creatDate | date | 账号创建时间 | ### 2.3 实现 #### 2.3.1 注册 ```flow st=>start: 开始 op1=>operation: 输入手机号、密码、确认密码、验证码 op2=>operation: 重新输入 cond1=>condition: 输入框正则 cond2=>condition: 该手机号未注册过 e=>end: 注册成功 st->op1->cond1 cond1(yes)->cond2 cond1(no)->op2 cond2(yes)->e cond2(no)->op2 ``` #### 2.3.2 手机号登录和忘记密码 ```flow st=>start: 开始 op1=>operation: 输入手机号 op2=>operation: 点击忘记密码，进行跳转 op3=>operation: 输入密码 op4=>operation: 手机号和密码错误 op5=>operation: 跳转成功，输入新密码 op6=>operation: 跳转失败，检查输入的手机号 op7=>operation: 修改成功，返回至重新登录 op8=>operation: 修改失败 cond1=>condition: 账号密码校验 cond2=>condition: 密码没有忘记 cond3=>condition: 手机号校验 cond4=>condition: 图形验证码是否正确 e=>end: 登录成功 st->op1->cond2 cond2(no)->op2->cond3 cond2(yes)->op3->cond1 cond1(yes)->e cond1(no)->op4 cond3(yes)->op5->cond4 cond3(no)->op6 cond4(yes)->op7 cond4(no)->op8 ``` #### 2.3.3 微信登录和绑定 ```flow st=>start: 开始 op1=>operation: 点击微信登录 op2=>operation: 显示头像和昵称 op3=>operation: 重新授权获取微信用户信息 op4=>operation: 输入错题集账号密码进行确认 op5=>operation: 取消 op6=>operation: 绑定成功 op7=>operation: 绑定失败 cond1=>condition: 本地是否已获取微信用户信息 cond2=>condition: 此微信是否绑定错题集账号 cond3=>condition: 现在是否去绑定 cond4=>condition: 账号密码校验 e=>end: 登录成功 st->op1->cond1 cond1(yes)->op2->cond2 cond1(no)->op3 cond2(yes)->e cond2(no)->cond3 cond3(yes)->op4->cond4 cond3(no)->op5 cond4(yes)->op6 cond4(no)->op7 ``` ### 2.4 部分实现效果展示 登录通过半屏弹框的形式，进行登录： ![image-20220226233720432](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226233720432.png) 注册： ![image-20220226233655198](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226233655198.png) 微信账号绑定登录： ![image-20220226233907290](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226233907290.png) ## 3. 年级和课程分类设计 ### 3.1 思路 设置此年级分类，考虑到用户的多样化选择和长期性使用。用户在进入小程序后，可以自行选择自己所在的年级，然后可以在此年级中，添加相应的课程。录入错题时，同时将错题记录到用户在当前年级的某课程内，实现年级到课程的二级分类。用户可以实时看到对应课程下的错题数量。 ### 3.2 数据库 **wqb_grade** | 字段 | 类型 | 说明 | | ------ | ------ | ---------------------------------------- | | _id | string | 用户年级的唯一标识id | | uid | string | 用户id | | openid | string | 用户的openid | | phone | string | 用户账号 | | grade | array | 包含用户年级、课程分类，此处参考下方表格 | grade 字段示例： ```js grade:[ { text:'小学', children:[ { class:[ { classImgUrl:"", // 课程图标 name:'语文', qidArr:[], // 错题id集合数组 }, { classImgUrl:"", // 课程图标 name:'数学', qidArr:[], // 错题id集合数组 }, ] id:0, text:'一年级' }, { class:[ { classImgUrl:"", // 课程图标 name:'语文', qidArr:[], // 错题id集合数组 }, { classImgUrl:"", // 课程图标 name:'数学', qidArr:[], // 错题id集合数组 }, ] id:0, text:'二年级' } ] }, { text:'初中', children:[], // 同上 }, { text:'高中', children:[], // 同上 }, { text:'大学', children:[], // 同上 }, { text:'成人', children:[], // 同上 }, ] ``` 选中对应的学科，生成对应的图标，用户录入错题时需选择学科分类； 学科对应的标识图地址： 语文：https://s2.loli.net/2022/02/13/olYgQht1vJw9kMa.png 数学：https://s2.loli.net/2022/02/13/p8ksQTPytfArYRz.png 英语：https://s2.loli.net/2022/02/13/76txpwrqSXMUkHd.png 物理：https://s2.loli.net/2022/02/13/viHzaKoLwZjYN7l.png 化学：https://s2.loli.net/2022/02/13/czBGf4MhiWgVe61.png 地理：https://s2.loli.net/2022/02/13/fGFKuj2Vb1JLpDE.png 历史：https://s2.loli.net/2022/02/13/342IGxUChivVucA.png 生物：https://s2.loli.net/2022/02/13/6bwVpj9USIuoGsL.png 政治：https://s2.loli.net/2022/02/13/IzMaqNkGO7A1WKH.png 其他：https://s2.loli.net/2022/02/13/q617nAWNDy95FZ3.png ### 3.3 实现 注册用户时，同时创建一个年级的集合，用户登陆后，可以选择当前年级信息；这里主要使用了 vant 的 van-popup 和 van-tree-select 两个重要组件构成，选中年级后，将数据同步在缓存中。 添加、删除课程信息，通过操作 wqb_grade 数组的 grade 字段，进行完成。 添加课程时，要根据对应的课程名称，获取对应的 classImgUrl 图标进行展示。 ### 3.4 部分实现效果展示 ![image-20220226234444221](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226234444221.png) ## 4. 错题录入 ### 4.1 思路 题库录入分为两种，文字识别生成题目、手动录入题库，两种方法录入数据库的格式应该要做到相同 ### 4.2 数据库 **wqb_questions** | 字段 | 类型 | 说明 | | -------------- | ------ | ---------------------------------------- | | _id | string | 错题的唯一标识id | | uid | string | 用户id | | gid | string | 年级id | | creatDate | number | 创建时间戳 | | changeTime | number | 修改时间戳 | | className | string | 课程分类 | | gradeDesc | object | 年级分类，例{desc1:'初中,desc2:'八年级'} | | type | string | 题目类型，区分选择、填空、判断等 | | title | string | 题目标题 | | answer | string | 题目答案 | | graspRate | number | 错题掌握程度 | | difficultyRate | number | 错题难易程度 | | option | array | （可选）选择题的选项信息，如下示例 | option 示例： ```js option:[ { opt:'A', cent:'我是选项一', }, { opt:'B', cent:'我是选项二', }, { opt:'C', cent:'我是选项三', }, { opt:'D', cent:'我是选项四', }, ] ``` ### 4.3 手动录入错题 手动录入错题，代指通过表单的形式进行录入，此方式可根据题目的type值，进行区分，然后将所有字段录入数据库。 ### 4.4 图片识别录入错题 图片录入，通过 wx.chooseImage ，选择拍照或者是本地图片，图片经过 image-cropper 裁剪，将图片临时路径，通过百度OCR文字识别，识别图片中包含的文字。 识别出来的文字，会严格按照行数进行展示，因为OCR只是简单的文字转换，没有其他智能解析功能，所以将识别出的words，进行二次处理。分析将录入的错题的类型，生成错题的基本格式后，录入数据库。如果识别的图片，没有有效字段，则将会报错。 因为接口原因，对于图片的内容或格式，稍微严格，格式不正确，则不能进行下一步的成功录入。 ### 4.5 部分展示 ![image-20220226235054626](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226235054626.png) ![image-20220226235117030](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226235117030.png) ![image-20220226235209022](C:\Users\Schindler\AppData\Roaming\Typora\typora-user-images\image-20220226235209022.png) ## 5. 错题列表 错题列表，有两种进入方式； 可从相应的科目入口进入，查看当前科目下的所有错题，支持删除单个错题、清空所有错题、下拉刷新列表、上拉加载更多、关键词搜索、查看错题详情、编辑错题详情、标记该错题等； 可从错题总览入口进入，查看当前用户录入的所有错题，支持按难易度排序、按掌握程度排序、录入时间排序、修改时间排序、年级分类查询等。 ## 6. 随机抽题生成考试 随机抽题，用户首先进入相应的科目下，云函数端通过对错题数据库的聚合操作，来抽取到该科目下对应的题目，目前支持抽取10道选择题、5道判断、5道填空、1道问答、1道其他等，生成试卷后，有30分钟的答题时间，时间结束或用户提交试卷后，系统将对试卷进行评阅，生成考试结果。 ## 7. 今日待复习 来源是用户昨天录入的错题，已经用户标记过的错题。 ## 8. 开放性讨论模块 用户可在此模块，发布自己不会到的错题，内容为文字或图片，图片最多上传3张，保存在云存储中。其他用户可对讨论的内容，进行评论回复、点赞、取消点赞、查看作者详情等操作，评论回复支持文字和图片形式回复。 ## 9. 学习计划 用户在此添加学习计划、近期安排等，此模块功能待完善...... ## 10. 图表分析 用户课程和错题数量汇总（柱状图）； 用户近期录入错题情况（折线图）； 错题的题型分类统计（饼状图）； 其他图表。 ## 11. 学习工具 多语种翻译工具、成语查询、字典查询、诗词查询等。 ## 12. 其他 # 云开发 quickstart 这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力： - 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 文档型数据库 - 文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理 - 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码 ## 参考文档 - [云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)