3.3 KiB
3.3 KiB
小程序，做一个给老师用的快速批改作文的应用。老师通过小程序，拍照或上传1张或多张学生的作文，上传到服务器（已有接口，假设是/api/upload），服务器调用后端接口，把照片转换成文字，并给到小程序，显示在前端。老师确认文字，并选择作文评分标准、作文要求(作文题目)后，再次传给后端服务器（已有接口，假设是/api/rate）。后端服务器返回评分到小程序（返回分数rate、一句话评价summary、详细评价detail）。在小程序内，老师还可以设置评分标准、作文要求的地方。这些都通过接口（/getuserinfo /gethistory）读取。小程序用户体系采用微信openid登录的方式，自动获取用户用户手机号。 以下是详细的小程序设计思路，分为6个核心模块：
- 用户体系模块
- 采用
<button open-type=\"getPhoneNumber\">获取用户手机号 - 通过
wx.login获取code换取openid - 全局维护用户凭证，每次请求携带token
- 登录异常时引导用户重新授权
- 采用
- 作文上传模块
- 使用
wx.chooseMedia实现多图拍摄/上传 - 展示上传进度条（可用
<progress>组件） - 分片上传大文件（需自行实现断点续传）
- 图片预览支持缩放/旋转/删除操作
- 调用
/api/upload时携带压缩后的base64数据
- 使用
- OCR确认模块
- 展示服务器返回的识别文字（带段落标记）
- 集成富文本编辑器（如使用
<editor>组件） - 文字对比功能：原始图片与识别文字左右分屏
- 常见错误自动高亮（如标点、错别字）
- 添加"修改完成"确认按钮触发下一步
- 评分设置模块
- 从
/getuserinfo获取用户自定义评分模板 - 评分标准使用级联选择器（如字词/句子/篇章结构）
- 作文要求展示历史记录（最近5次使用记录）
- 支持模板保存功能（本地缓存+服务端同步）
- 评分细则弹出式说明（hover显示示例）
- 从
- 结果展示模块
- 分数展示使用仪表盘组件（0-100动态动画）
- 评价内容分栏显示：左侧summary，右侧detail
- 支持生成PDF报告（调用
wx.downloadFile） - 历史记录列表（带时间轴样式的/gethistory数据）
- 错误标记定位功能（点击评价跳转对应段落）
- 技术实现要点
- 图片处理：使用
wx.compressImage压缩到200KB内 - 数据缓存：评分模板使用
wx.setStorageSync本地存储 - 网络优化：设置
\"networkTimeout\"配置超时时间 - 错误监控：封装统一请求拦截器处理API异常
- 权限管理：敏感接口（如手机号）添加二次确认弹窗流程设计：上传图片 → OCR确认 → 设置评分 → 获取结果 → 保存/分享
- 图片处理：使用
体验优化点：
- 首次使用引导视频（演示完整批改流程）
- 常用评语快捷输入（用户行为分析自动排序）
- 夜间模式切换（保护教师视力）
- 字数统计/常见错误统计面板
- 跨设备同步功能（通过微信服务通知发送报告）建议先实现核心流程（上传-识别-评分），再逐步迭代优化功能和体验。需特别注意图片处理性能和文字识别准确率提示机制。