本文档旨在指导开发者如何在 Electron 环境下快速接入互动课堂（LCIC）。
根据业务需求，我们提供 URL 唤起 和 SDK 集成 两种主要的接入方式，并提供客户端定制与 UI 自定义的高级功能说明。
接入方式
使用浏览器或 Web 页面通过自定义协议（Scheme）唤起本地客户端。
浏览器直接唤起
1. 下载客户端：前往 Demo 下载及体验 下载并安装 Windows 或 Mac 客户端（旗舰版支持定制 OEM 包）。
2. 唤起链接：当浏览器访问以下 URL 时，将自动请求打开客户端：
tcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}
中转页唤起（最佳实践）
建议业务侧实现一个“中转页”，通过集成
ElectronProtocolCheck.js 优化用户体验：自动检测客户端是否安装，成功则直接唤起，失败则引导下载，或降级至 Web 版课堂。集成步骤：
1. 下载检测库：下载 ElectronProtocolCheck.js 并引入项目。
2. 实现唤起逻辑：在中转页中获取上课参数（
classId, userId, token），调用检测函数。示例代码：
// 引入检测库 (代码实现参考 GitHub 示例)import ElectronProtocolCheck from './ElectronProtocolCheck';// 1. 准备入参const classId = 123456;const userId = "JIUzI1NiIsIn123456";// 注意：Token 需从后台动态获取，避免过期const token = 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';// 2. 拼接唤起 URLconst url = `tcic://class.qcloudclass.com/latest/class.html?classid=${classId}&userid=${userId}&token=${token}`;console.log(`callClient->start: ${url}`);// 3. 执行唤起与回调处理ElectronProtocolCheck(url,() => {// 成功回调：客户端已唤起console.log('callClient->success!');},() => {// 失败回调：未检测到客户端console.log('callClient->failed!');// 建议逻辑：弹出提示窗口，引导用户下载客户端// 若用户取消下载，可降级跳转至 Web/H5 版本课堂},() => {// 不支持回调：浏览器环境不支持自定义协议// 建议逻辑：直接加载 Web 版课堂链接});
环境要求
请确保您的开发环境满足以下基础库版本：
开发框架 | 版本要求 |
Node.js | 16.14.2 |
安装 SDK
在项目根目录下执行 npm 命令安装 SDK：
npm install tcic-electron-sdk@latest
说明：
初始化与进课
引入模块并调用初始化接口，传入鉴权参数即可调起课堂窗口。
const TCIC = require('tcic-electron-sdk');TCIC.initialize({// 核心鉴权参数classId: '368507569',userId: '123456',token: 'yJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...', // 务必动态获取// 可选：完整 URL (若提供，优先级高于 classId 等参数)url: 'https://class.qcloudclass.com/latest/class.html?classid=xxxx&userid=xxx',// 可选：自定义参数 (透传至 Web 端)customParams: { key: 'value' },// 可选：业务标识sign: 'your_signature',cid: 'customer_id',uid: 'user_uid',// 生命周期回调onReady() {console.log('课堂窗口正在拉起');},afterInit() {console.log('SDK 初始化完成');},onClose() {console.log('所有课堂窗口已关闭');}});
高级功能
1. OEM 定制打包
若您需要拥有独立品牌（Logo、应用名称）的客户端，并希望快速集成现有业务系统，可申请使用“OEM 定制打包”服务。
接入流程
1. 准备资料发送给腾讯云（商务或者产品经理），或通过 联系我们 加入微信群申请。
说明：
仅支持已购买旗舰版的客户申请。
在接收到资料后，并确认无误的情况下我们将会在1个工作日完成打包。
2. 业务逻辑适配：
在打包后，业务侧可通过
window.joinClass 方法进入课堂 ，若之前业务侧已通过 URL 或 SDK 集成方式实现进课逻辑，可参考以下示例进行兼容。const options = {classId: '368507569',userId: '123456',token: '...'};// 检测是否在定制客户端环境中if (window.joinClass) {// 调用定制客户端的进课方法window.joinClass(options);} else {// 原有的 Web/SDK 进课逻辑}// 退出客户端逻辑// window.closeWin();
2. 自定义 UI 集成
支持开发者自定义课中布局及样式。通过注入 JS 和 CSS，您可以修改界面元素。
调试阶段
在开发调试阶段，可通过 URL 参数
debugjs 和 debugcss 注入本地或远程的资源文件。URL 拼接方式：
tcic://...?classid=...&debugjs=http://localhost:443/myLib.js&debugcss=http://localhost:443/myLib.css
SDK 集成方式：
TCIC.initialize({// ...其他参数debugjs: 'http://localhost:443/demo/dist/myLib.umd.min.js',debugcss: 'http://localhost:443/demo/dist/myLib.css',})
开发
生产发布
调试完成后，请勿继续使用 debug 参数。请通过以下任意方式将自定义资源绑定到“场景”中：
1. 方式一：使用云 API SetAppCustomContent。
2. 方式二：前往 控制台 > 应用管理 > 应用配置 > 场景配置进行绑定。
进课堂时，只需在 URL 或 SDK 参数中指定
scene 参数，即可加载对应的 UI 布局。
