把 SCORM 课程包塞进微信小程序，是怎么做到的

技术笔记 · good fun 谷放

不少企业内训、品牌培训课程是用 EasyGenerator、iSpring 这类 SaaS 课件工具做的，导出格式是标准的 SCORM 课程包。这类工具做交互式课程效率很高，但导出的包默认是给浏览器用的 SPA 应用，直接扔进微信小程序播放并不是"上传文件"这么简单——本文记录一次真实的技术评估与集成方案设计过程。

01先搞清楚：SCORM 包里到底是什么

SCORM（Sharable Content Object Reference Model）是课件行业的老牌标准，核心是一套约定：课程内容如何组织、课程如何跟"学习管理系统"（LMS）汇报进度和成绩。一个典型的 SCORM 1.2 课程包解开后大致是这样的结构：

• 前端播放层 —— 通常是 React / Vue 构建的 SPA，负责渲染图文、音视频、答题交互
• SCORM 通信层 —— 一个 lms.js 之类的脚本，按 SCORM API 规范和"LMS"对话，上报进度、成绩、完成状态
• manifest 文件 —— imsmanifest.xml，描述课程结构、章节、资源清单

问题在于：这个"LMS"原本指的是课件工具自己的云端服务。要在自己的系统里播放这个包，就得让课程包认为"我正在和一个真正的 LMS 对话"——而这个 LMS，需要自己实现。

02技术选型：为什么是 scorm-again

SCORM 的 API 层没必要从零手写，业界有现成的开源实现。评估时比较了两条路：

• SCORM Cloud（Rustici） —— 商业化托管方案，成熟但依赖 AWS CloudFront，国内访问不稳定，对面向国内用户的小程序场景不合适
• scorm-again —— MIT 协议开源库，npm 周下载量约 1.5 万+，持续维护，可以直接部署在自己的服务器上，没有海外依赖

最终选了 scorm-again：它在浏览器端模拟了完整的 SCORM API（LMSInitialize、LMSSetValue、LMSCommit 等接口），课程包调用这些接口时无感对接，数据上报地址可以自由指向自己的后端。

03核心原理：运行时注入

不需要改课程包里的任何业务代码。做法是在课程包处理流程里加一步自动化注入：

具体来说，是把 scorm-again 的初始化脚本插入课程包 index.html 的头部，并把数据上报地址配置指向自己的后端接口。课程原有代码完全不用动——它以为自己在和真正的 LMS 通信，实际上是在和注入进去的 scorm-again 通信，再由 scorm-again 把数据转发给自己的服务端。这一步一旦做成自动化流程，以后每次上传新课程包都会自动完成注入，不需要人工介入。

04数据怎么回写

课程运行过程中会产生几类数据，都需要落到自己的系统里，而不是丢给课件工具的云端：

• 学习进度 —— 学到哪一章、哪个单元，支持断点续学
• 答题与成绩 —— 单选/多选题的作答记录、最终得分
• 完成状态 —— 是否通关，用于在小程序界面上做状态联动

这部分直接在后端新增几个接口：进度写入、进度查询（断点续学要用）、成绩记录、完成状态更新。因为是直接在已有后端源码里加接口，而不是对接一份文档，反而能减少沟通成本——直接看数据结构，比对齐接口文档更快。

05小程序侧：一个 WebView 页面就够了

小程序端不需要重新做一套播放器，核心是在已有小程序里新增一个课程播放页，通过 <web-view> 组件加载注入后的课程包页面。课程完成时，页面通过 postMessage 机制向小程序发一次完成通知，小程序收到后更新界面上的完成状态展示。这一层的工作量不大，但有两个真机测试重点：iOS 和 Android 上 WebView 的兼容性差异，以及课程域名要正确加入小程序的 request 合法域名 /业务域名白名单，否则页面直接打不开。

06这类项目要提前确认的三件事

做完这次评估，总结出几个决定工作量和风险的关键前提：

• 后端源码访问权限 —— 直接在源码里加接口，比对接一份可能不完整的文档效率高得多，也更容易保证数据结构一致
• 小程序 WebView 权限与域名白名单 —— 这个如果没提前开通，会卡在最后一步联调上
• 课程内容的版权 —— 课程包本身通常是课件工具生成的，如果要在自己的平台二次部署，需要和内容版权方确认授权范围，这不是技术问题，但会影响项目能不能启动

技术上，这类"把已有内容格式塞进已有系统"的集成工作，复杂度往往不在"能不能做"，而在"对方系统给不给权限、协作响应快不快"。评估阶段把这些前提确认清楚，后续开发反而是最不容易出意外的部分。