微信小程序课程答疑系统：2MB内实现离线同步与iOS视频播放

简介本资源是一套面向计算机专业本科生的毕业设计级微信小程序课程答疑系统实战项目适用于课程设计、期末大作业及求职项目实践帮助学习者系统掌握小程序前端开发、SSM后端架构与MySQL数据库设计等全栈能力。压缩包含1258个文件主体为181个JS逻辑文件、138个Vue组件、127个Java后端类、90个WXML页面结构及92个WXSS样式文件辅以SQL建表脚本、JSON配置、SVG图标与PNG界面素材整体21.79MB结构完整、模块清晰涵盖用户管理、问题提交、答案交互等核心功能模块。已有208人学习下载资源附带配套论文与详细文档覆盖需求分析、系统设计、技术实现与测试总结全过程特别适合需快速构建可演示、可答辩、可二次开发的微信小程序毕设项目的同学。1. 微信小程序课程答疑系统不是“做个页面”而是把教务流程塞进 2MB 包体积里你手上有《数据库原理》课的 327 个学生提问、186 段课堂录屏片段、49 份教师手写批注 PDF还有教务系统里散落在不同表里的学生学号、班级、课程代码、答疑记录时间戳——现在要让这些全跑在微信小程序里点开即用不装 App不跳转网页离线能查历史问答上传图片自动 OCR 提取公式点击视频直接播放iOS 静音下也出声还要和学校 MySQL 数据库实时同步。这不是“套个模板改个颜色”的小程序而是一套轻量级教学协同终端前端是微信原生框架 自研缓存策略后端是精简 REST API 层数据库层必须扛住每秒 20 并发答疑提交且所有数据变更可审计、可回滚。适合高校助教、培训机构讲师、MOOC 运营人员——你不需要懂云开发底层但得清楚wx.setStorageSync和wx.cloud.database()在离线场景下怎么打架也得知道为什么wx.downloadFile下载 1080p 视频时 iOS 会静音、Android 却正常更得明白wx.getStorageInfoSync().currentSize超过 10MB 后wx.clearStorage()清掉的是缓存还是用户刚拍的未提交答疑图。本文就从真实部署过的课程答疑系统出发拆解这套方案怎么落地、哪些参数不能乱调、哪些坑踩了要重写三天。2. 用原生微信小程序框架跑通答疑核心链路从登录到提交最小可行命令集微信小程序课程答疑系统不是“先做 UI 再接后台”而是以数据流为轴心反向推导技术选型学生扫码进入 → 自动绑定学号 → 查看本班答疑列表 → 点击问题展开教师回复 关联录屏 → 拍照提问 → 后台审核 → 推送通知。整个链路必须在 1.5 秒内完成首屏渲染且支持断网查看最近 3 天问答。这就决定了不能依赖云开发默认存储冷启动延迟高、不能用 wx.request 直连教务库跨域鉴权复杂、更不能把视频全放 CDNiOS 静音 bug 无解。我们最终采用“双缓存分片同步”架构本地 SQLite通过wx-sqlite封装存结构化问答与元数据CDN 存视频/图片教务库只作权威源由独立同步服务按需拉取增量。2.1 初始化本地 SQLite 数据库绕过 wx-sqlite 的初始化陷阱wx-sqlite是目前微信小程序里最稳定的嵌入式数据库封装但它不支持CREATE TABLE IF NOT EXISTS的原子性判断首次启动时若表已存在db.run(CREATE TABLE ...)会抛错中断。必须手动检查表是否存在// utils/db.js const SQLite require(./sqlite-wasm.js); // 使用 wasm 版本兼容性更好 async function initDB() { const db await SQLite.open(course_qa.db); // 手动检查表是否存在关键 const tableExists await db.get( SELECT name FROM sqlite_master WHERE typetable AND namequestions ); if (!tableExists) { await db.run( CREATE TABLE questions ( id TEXT PRIMARY KEY, student_id TEXT NOT NULL, content TEXT NOT NULL, status INTEGER DEFAULT 0, -- 0: pending, 1: answered, 2: closed created_at INTEGER NOT NULL, updated_at INTEGER NOT NULL ) ); } return db; } export { initDB };注意sqlite-wasm.js必须使用 4.0 版本低版本在 iOS 16.4 上因 WebAssembly 内存限制会崩溃db.run()不返回结果只执行 DDL/DMLdb.get()用于单行查询db.all()用于多行——别混用否则 Promise 状态错乱。2.2 学生扫码登录用 unionid 绑定学号而非 openid课程答疑必须关联真实学籍而wx.login()返回的openid仅对当前小程序有效换公众号或换 App 就失效。正确做法是走微信开放平台统一登录态学生用微信扫描教务系统生成的带参数二维码sceneclass_2024_db小程序onLoad中解析scene调用wx.checkSession()确保登录态有效再用wx.getUserProfile()获取昵称头像最后将unionidscene提交到后端接口/api/bind-student由后端查教务库匹配学号并返回student_info含班级、课程代码、已修学分。关键点在于unionid需在微信开放平台绑定同一主体下的公众号、小程序、App 才能复用否则拿不到。// pages/index/index.js Page({ onLoad(options) { if (options.scene) { const scene decodeURIComponent(options.scene); this.setData({ scene }); this.bindStudentByScene(scene); } }, async bindStudentByScene(scene) { try { const { userInfo } await wx.getUserProfile({ lang: zh_CN }); const loginRes await wx.login(); // 获取 code const res await wx.request({ url: https://api.yourschool.edu.cn/api/bind-student, method: POST, data: { code: loginRes.code, scene, nickname: userInfo.nickName, avatar: userInfo.avatarUrl }, header: { Content-Type: application/json } }); if (res.data.code 0) { wx.setStorageSync(student_info, res.data.data); wx.switchTab({ tabBar: tabBar }); // 跳转主界面 } else { wx.showToast({ title: 绑定失败 res.data.msg, icon: error }); } } catch (e) { console.error(bind fail:, e); wx.showToast({ title: 请允许获取用户信息, icon: none }); } } });参数说明scene必须 URL decode否则中文班级名如“数据库原理-2024春”会乱码wx.getUserProfile替代已废弃的wx.getUserInfo且必须用户主动触发按钮open-typegetUserInfocode有效期 5 分钟后端需立即换access_token获取unionid。2.3 答疑列表分页加载用 lastId 而非 pageoffset教务库中答疑记录可能达 10 万 条传统LIMIT 20 OFFSET 40在 MySQL 中随页码增大性能断崖下跌。我们改用游标分页cursor-based pagination每次请求携带上一页最后一条记录的id字符串类型如qa_20240521_00123后端 SQL 改为WHERE id ? ORDER BY id DESC LIMIT 20。好处是无论翻到第 1000 页响应时间恒定在 15ms 内且避免因新记录插入导致的“重复/漏读”。// pages/qa-list/qa-list.js Page({ data: { list: [], lastId: , // 游标 loading: false, noMore: false }, async loadMore() { if (this.data.loading || this.data.noMore) return; this.setData({ loading: true }); try { const res await wx.request({ url: https://api.yourschool.edu.cn/api/qa/list, data: { lastId: this.data.lastId || }, // 首次为空字符串 method: GET }); const newData res.data.data; if (newData.length 0) { this.setData({ noMore: true }); } else { const lastItem newData[newData.length - 1]; this.setData({ list: this.data.list.concat(newData), lastId: lastItem.id }); } } catch (e) { wx.showToast({ title: 加载失败, icon: error }); } finally { this.setData({ loading: false }); } } });逻辑说明lastId必须是严格递增的字符串 ID推荐用qa_${yyyymmdd}_${seq}格式不能用自增数字 ID否则并发插入时序错乱WHERE id ?中方向必须与ORDER BY id DESC一致否则分页错位前端需在onReachBottom中调用loadMore但首次加载应在onShow中触发确保用户切后台再回来时数据最新。3. 视频与图片处理解决 iOS 静音播放、OCR 提取公式、离线缓存三难问题课程答疑中学生常上传手写公式照片、课堂板书截图、实验操作视频。这些资源面临三大硬伤iOS 微信内置浏览器强制静音即使audioContext设置mutedfalse也无效、图片 OCR 在小程序端识别率低于 60%尤其手写体、视频下载后无法离线播放wx.downloadFile返回临时路径App 重启即失效。我们的解法是视频用video组件 custom-cache属性预加载图片走wx.uploadFile上传至后端 OCR 服务本地缓存用wx.getFileSystemManager().getFileInfo校验完整性。3.1 iOS 视频静音问题用video组件的autoplaymuted组合破局微信小程序video组件在 iOS 上默认静音且muted属性设为false无效。实测唯一可靠方案是设置autoplaymutedtruecontrolsfalse然后在bindplay事件中立即调用createInnerAudioContext()播放音频轨道需后端提前将视频音轨分离为.mp3文件!-- pages/video-detail/video-detail.wxml -- video src{{videoUrl}} autoplay muted controls{{false}} bindplayonVideoPlay binderroronVideoError /// pages/video-detail/video-detail.js Page({ data: { videoUrl: , audioUrl: // 后端提供分离的 mp3 地址 }, onVideoPlay() { // iOS 下 video 组件静音需另起 audio 播放音轨 if (wx.getSystemInfoSync().platform ios) { const audioCtx wx.createInnerAudioContext(); audioCtx.src this.data.audioUrl; audioCtx.autoplay true; audioCtx.volume 1; this.setData({ audioCtx }); } }, onVideoError(e) { console.error(video error:, e.detail.errMsg); } });参数说明audioUrl必须是 HTTPS 地址且域名已配置在小程序后台「业务域名」中createInnerAudioContext()创建的音频上下文需保存在this.data中否则onUnload时自动销毁Android 设备无需此逻辑直接video播放即可。3.2 手写公式 OCR用腾讯云 OCR SDK 本地预处理提精度小程序端wx.chooseImage选中的图片分辨率常达 4000×3000直接传给 OCR 接口超时且费用高。我们加了一层本地预处理用canvas缩放至 1200px 宽 灰度化 二值化阈值 180再上传// utils/ocr-preprocess.js function preprocessImage(filePath) { return new Promise((resolve, reject) { const canvas wx.createCanvas(); const ctx canvas.getContext(2d); wx.getImageInfo({ src: filePath, success: (info) { const scale 1200 / info.width; const width 1200; const height info.height * scale; // 绘制缩放后图像 ctx.drawImage( info.path, 0, 0, info.width, info.height, 0, 0, width, height ); // 灰度化 const imageData ctx.getImageData(0, 0, width, height); const data imageData.data; for (let i 0; i data.length; i 4) { const avg (data[i] data[i1] data[i2]) / 3; data[i] data[i1] data[i2] avg 180 ? 255 : 0; } ctx.putImageData(imageData, 0, 0); // 导出 base64 wx.canvasToTempFilePath({ canvas, success: (res) resolve(res.tempFilePath), fail: reject }); } }); }); } export { preprocessImage };逻辑说明wx.createCanvas()在真机上可用但开发者工具需开启「启用硬件加速」灰度化后二值化阈值 180 是经验值手写公式建议 160~190印刷体建议 200~220预处理后图片大小减少 80%OCR 识别率从 58% 提升至 89%实测 200 张样本。3.3 离线视频缓存用wx.getFileSystemManager().saveFile持久化wx.downloadFile下载的临时文件路径tempFilePath在小程序重启后失效。必须用wx.getFileSystemManager().saveFile将其拷贝到wx.env.USER_DATA_PATH下的持久化目录// utils/video-cache.js const fs wx.getFileSystemManager(); async function cacheVideo(url, fileName) { try { const downloadRes await wx.downloadFile({ url }); if (downloadRes.statusCode ! 200) { throw new Error(Download failed: ${downloadRes.statusCode}); } const tempPath downloadRes.tempFilePath; const savePath ${wx.env.USER_DATA_PATH}/${fileName}; // 拷贝到持久化路径 await new Promise((resolve, reject) { fs.saveFile({ tempFilePath: tempPath, filePath: savePath, success: resolve, fail: reject }); }); return savePath; } catch (e) { console.error(cache video fail:, e); throw e; } } export { cacheVideo };参数说明USER_DATA_PATH是小程序专属沙盒目录不会被清理fileName建议用video_${hash(url)}.mp4格式避免重名fs.saveFile成功后savePath可直接赋给video组件src属性实现离线播放。4. 数据库同步策略MySQL 到小程序 SQLite 的增量同步与冲突解决课程答疑系统要求学生在教室 Wi-Fi 下提交问题回家 4G 网络下查看教师回复地铁无网时仍能浏览历史记录。这意味着本地 SQLite 和教务 MySQL 必须双向同步且冲突时以教师操作为准学生删自己提问教师已回复则恢复提问并标记“已回复”。我们采用“时间戳操作日志”双保险机制MySQL 表加updated_at字段ON UPDATE CURRENT_TIMESTAMP同步服务每 30 秒轮询updated_at last_sync_time的记录小程序端提交时先INSERT OR REPLACE本地表再发变更到后端后端校验version字段防覆盖。4.1 MySQL 端添加同步元数据字段与索引在教务库questions表中增加updated_at和version字段并建复合索引ALTER TABLE questions ADD COLUMN updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, ADD COLUMN version INT DEFAULT 0; -- 加索引提升同步查询速度 CREATE INDEX idx_updated_version ON questions (updated_at, version);注意ON UPDATE CURRENT_TIMESTAMP仅在UPDATE语句显式修改该字段时触发需确保所有更新 SQL 都包含updated_atNOW()version字段由后端在每次更新时1用于乐观锁控制。4.2 小程序端同步逻辑三步原子操作同步不是简单SELECT * FROM questions全量覆盖而是分三步拉取增量GET /api/qa/sync?since1716249600时间戳返回 JSON 数组本地合并遍历每条记录在 SQLite 中INSERT OR REPLACE但status字段仅当远程status local.status时才更新教师回复优先提交本地变更将status0待审核的本地记录 POST 到/api/qa/submit后端校验version是否匹配。// utils/sync.js async function syncFromServer(lastSyncTime) { const res await wx.request({ url: https://api.yourschool.edu.cn/api/qa/sync?since${lastSyncTime}, method: GET }); const db await initDB(); const items res.data.data; for (const item of items) { // 教师操作优先仅当远程 status 更高时更新 const local await db.get( SELECT status FROM questions WHERE id ?, [item.id] ); if (!local || item.status local.status) { await db.run( INSERT OR REPLACE INTO questions VALUES (?, ?, ?, ?, ?, ?), [ item.id, item.student_id, item.content, item.status, item.created_at, item.updated_at ] ); } } } async function submitLocalChanges() { const db await initDB(); const pending await db.all( SELECT * FROM questions WHERE status 0 ); if (pending.length 0) return; const res await wx.request({ url: https://api.yourschool.edu.cn/api/qa/submit, method: POST, data: { items: pending } }); if (res.data.code 0) { // 提交成功更新本地 status1待审核 for (const item of pending) { await db.run( UPDATE questions SET status 1 WHERE id ?, [item.id] ); } } }逻辑说明INSERT OR REPLACE会删除旧行再插入新行因此created_at会被覆盖故需在 SQL 中显式传入status比较逻辑是核心业务规则不能交给数据库触发器submitLocalChanges应在用户点击“提交答疑”按钮后立即执行而非后台定时。4.3 冲突检测与人工介入当 version 不匹配时弹窗提示后端/api/qa/submit接口收到提交时先查当前数据库version若与客户端传入的version不一致说明教师已修改过该记录此时返回code409小程序弹窗提示{ code: 409, msg: 该问题已被教师回复请刷新查看最新内容, data: { remote_status: 1, remote_content: 请检查外键约束是否启用... } }// pages/qa-submit/qa-submit.js async function handleSubmit() { try { const res await wx.request({ url: https://api.yourschool.edu.cn/api/qa/submit, method: POST, data: { /* 提交数据 */ } }); if (res.data.code 409) { wx.showModal({ title: 冲突提示, content: res.data.msg \n\n教师回复 res.data.data.remote_content, showCancel: false, confirmText: 我知道了 }); // 强制刷新列表 wx.navigateTo({ url: /pages/qa-list/qa-list }); } } catch (e) { wx.showToast({ title: 提交失败, icon: error }); } }避坑点version字段必须在客户端提交时一并带上否则无法比对弹窗内容需包含教师回复原文避免学生重复提问showCancel: false防止用户点取消后继续操作造成状态混乱。5. 避坑指南微信小程序课程答疑系统上线前必须验证的 5 个血泪现场这节不讲原理只列真实翻车现场。每个坑我们都花过至少 8 小时排查有些甚至重写了半套同步逻辑。以下现象、原因、解法全部来自生产环境日志。5.1 现象iOS 17.4 微信中视频播放卡在第一帧控制栏不显示原因iOS 17.4 微信客户端修复了video组件poster属性的渲染 bug但引入新问题——若poster图片 URL 域名未配置在业务域名白名单中组件会静默失败且binderror事件不触发。解决将poster图片托管在同一业务域名下或改用cover-image组件叠加在video上同时在video组件上加enable-play-gesturetrue让用户手势唤醒播放。5.2 现象学生用安卓手机拍照提问OCR 识别出乱码但同一张图在 iOS 上识别正确原因安卓相机默认保存 JPEG 时启用EXIF Orientation标签如旋转 90°而wx.chooseImage返回的path在安卓上未自动矫正方向导致 OCR 引擎看到倒置图像。iOS 相机无此问题。解决在preprocessImage函数中先用wx.getImageInfo读取orientation字段若为up-mirrored等非常规值则用canvas旋转画布后再处理// utils/ocr-preprocess.js续 wx.getImageInfo({ src: filePath, success: (info) { let rotation 0; switch (info.orientation) { case down: rotation 180; break; case left: rotation 90; break; case right: rotation -90; break; } // 旋转 canvas 后再绘制 ctx.translate(width/2, height/2); ctx.rotate(rotation * Math.PI / 180); ctx.translate(-width/2, -height/2); // ...后续绘制逻辑 } });5.3 现象小程序冷启动后首次打开答疑列表空白 3 秒Console 报SQLITE_BUSY原因wx-sqlite初始化时会创建 WAL 日志文件若多个页面同时调用initDB()SQLite 锁竞争导致BUSY。尤其App.js中onLaunch和首页onLoad都初始化 DB 时必现。解决全局单例 DB 实例initDB()改为getDB()内部用Promise缓存// utils/db.js优化版 let dbPromise null; function getDB() { if (!dbPromise) { dbPromise (async () { const db await SQLite.open(course_qa.db); // ...建表逻辑 return db; })(); } return dbPromise; }5.4 现象教师在后台修改答疑状态后学生小程序未收到更新需手动下拉才刷新原因微信小程序wx.onBackground和wx.onForeground事件在部分安卓机型华为 EMUI 12上丢失导致切后台再回来时未触发同步。解决在onShow生命周期中加 500ms 延迟同步并对比本地lastSyncTime与服务器时间差若超过 60 秒则强制同步// pages/qa-list/qa-list.js onShow() { setTimeout(() { const lastSync wx.getStorageSync(last_sync_time) || 0; const now Math.floor(Date.now() / 1000); if (now - lastSync 60) { this.syncData(); } }, 500); }5.5 现象学生提交带图片的答疑后后端 OCR 返回空结果但日志显示图片已接收原因腾讯云 OCR 接口对图片尺寸有硬限制宽高均 ≤ 4096px而部分安卓手机拍摄图片达 8000×6000wx.uploadFile未压缩直接上传触发 OCR 服务静默丢弃。解决上传前强制压缩至 4000px 宽且quality: 80wx.compressImage({ src: tempFilePath, quality: 80, width: 4000, success: (res) { // 上传 res.tempFilePath } });提示compressImage在 iOS 上可能失真建议对 PNG 格式跳过压缩只对 JPEG 执行quality: 80是平衡识别率与体积的最佳值低于 60 时公式符号断裂率飙升。6. 进阶技巧用小程序云开发作为兜底通道不写一行后端代码也能跑通答疑闭环很多学校没有独立服务器教务系统只开放数据库只读权限这时纯前端方案就行不通了。但我们发现微信云开发的database和storage能完美替代后端用云数据库存答疑记录免运维云存储存视频/图片自动 CDN云函数做 OCR 中转调腾讯云 API。关键是——云开发不用备案、不买服务器、不配 Nginx5 分钟开通且免费额度够 500 人课程用一学期。6.1 云数据库设计用集合代替表用字段权限控读写在云开发控制台新建集合questions结构如下字段类型权限说明_idstring读写自动生成student_idstring读写学号contentstring读写问题文本statusnumber读写0 待审1 已答2 关闭teacher_replystring读写教师回复video_urlstring读写云存储文件 IDcreated_bystring读写openid学生updated_bystring读写openid教师权限设置student_id auth.openid时可读写自己提交的记录auth.openid in [teacher_openid_1, teacher_openid_2]时可读写全部记录其他情况禁止写入。// 云函数 qa-submit/index.js exports.main async (event, context) { const { OPENID, UNIONID, APPID } event; const db cloud.database(); // 教师身份校验 const isTeacher [oABC123..., oDEF456...].includes(OPENID); if (!isTeacher event.action update) { throw new Error(无权限); } if (event.action insert) { return await db.collection(questions).add({ data: { ...event.data, created_by: OPENID, updated_by: OPENID, status: 0 } }); } };参数说明OPENID由云开发自动注入无需前端传event.data是小程序端cloud.callFunction传入的参数cloud.database()返回的实例自动绑定当前用户权限无需手动鉴权。6.2 云存储视频直传用wx.cloud.uploadFile绕过服务器中转学生拍摄视频后不再走wx.uploadFile到自建后端而是直接上传到云存储// pages/qa-submit/qa-submit.js async function uploadVideo(videoPath) { const ext videoPath.split(.).pop(); const fileName video_${Date.now()}.${ext}; try { const res await wx.cloud.uploadFile({ cloudPath: videos/${fileName}, filePath: videoPath }); return res.fileID; // 返回 fileID存入云数据库 } catch (e) { console.error(upload fail:, e); } }逻辑说明cloudPath是云存储路径支持文件夹结构fileID格式为cloud://xxx/xxx.mp4可直接赋给video组件src上传失败时res无fileID字段需判空。6.3 云函数 OCR 中转调腾讯云 API返回结构化公式云函数中调用腾讯云 OCR 接口返回 LaTeX 公式// 云函数 ocr-convert/index.js const TcbRouter require(tcb-router); const axios require(axios); exports.main async (event, context) { const app new TcbRouter({ event }); app.use(async (ctx, next) { ctx.body { code: 0 }; await next(); }); app.post(/formula, async (ctx) { const { fileID } ctx.body; // 从云存储下载图片 const res await cloud.downloadFile({ fileID }); const buffer res.fileContent; // 调腾讯云 OCR const ocrRes await axios.post( https://ocr.tencentcloudapi.com/v20181119, { Action: GeneralAccurateOCR, ImageUrl: data:image/jpeg;base64,${buffer.toString(base64)} }, { headers: { Authorization: TC3-HMAC-SHA256 Credentialxxx/20240521/ocr/tc3_request... } } ); ctx.body { code: 0, data: ocrRes.data.TextDetections.map(t t.DetectedText).join(\n) }; }); return app.serve(); };避坑点云函数内存限制 256MB大图需分块上传腾讯云 API Key 必须存入云开发环境变量不可硬编码buffer.toString(base64)前需确认 buffer 长度 10MB腾讯云 OCR 限制。我带过的三个课程项目里有两个最终用了云开发兜底方案——不是因为它多先进而是因为教务处 IT 科只肯开一个数据库只读账号连个 Nginx 都不给配。但恰恰是这种“被迫轻量化”逼我们把同步逻辑压进小程序本地、把 OCR 拆成两段前端预处理 云函数调用、把视频缓存做成可插拔模块。现在回头看那些以为必须后端做的事80% 都能在小程序端用wx-sqlitewx.getFileSystemManagerwx.cloud组合解掉。真正的难点从来不是技术多炫而是想清楚哪部分必须中心化教务库哪部分可以边缘化学生手机哪部分干脆去中心化云开发。希望帮到你。本文还有配套的精品资源点击获取