一、接入前准备
在开始集成前，请确保你满足以下要求。
二、1. 资质与类目要求
本插件属于小程序的社交 > 直播类目，仅限国内注册的非个人主体（如企业、政府、媒体等）使用。
请确保你的小程序符合以下类目要求，并在 微信公众平台 完成类目设置。
| 一级类目 | 二级类目 |
| 电商平台 | 电商平台 |
| | 网上竞价平台（文物） |
| | 网上竞价平台（非文物） |
| 教育 | 学历教育（培训机构） |
| | 学历教育（学校） |
| | 驾校培训 |
| | 驾校平台 |
| | 教育平台 |
| | 在线视频课程 |
三、2. 环境要求
请确保开发环境满足以下最低版本要求：
·微信 App iOS：7.0.9 及以上
·微信 App Android：7.0.8 及以上
·小程序基础库：2.10.0 及以上
四、步骤1：申请插件
登录微信公众平台，在设置 > 第三方设置 > 插件管理中添加插件：
·插件名称：实时互动教育版
·AppID：wxbc2aedd3838d78cd
·也可以直接单击 申请链接。
注意：说明：
注意：请确保你的小程序类目符合要求，否则可能搜索不到、添加不了。
五、步骤2：引入插件
1. 在小程序全局配置文件 app.json 中声明插件：
{ "plugins": { … "tcic-plugin": { "version": "1.8.0", "provider": "wxbc2aedd3838d78cd", "export": "tcicPluginConfig.js", "genericsImplementation": { "interactive": { "interactive-class-info": "components/live/interactive-class-info" } } } … }}
2. 在 app.json 同级目录下创建 tcicPluginConfig.js，用于配置插件行为及导出方法：
或者放置其他目录也可以，但插件配置的 export 字段也需要进行相应的变更，参考产品文档 导出到插件 。
// tcicPluginConfig.jsconst app = getApp();module.exports = { setValue: app.setValue, // 关键：用于传递 IM 消息等事件 loginUrl: '/pages/index/login', // 业务侧登录页路径 homeUrl: '/pages/index/home', // 业务侧首页路径 Config: { LIVE: { MAX_TEXT_NUM: 200, // IM 文本最大长度 RECORD_TIPS: '你可以到课程列表中查看回放', }, IMG: { MAX_SIZE: 20 * 1024 * 1024, // 图片上传限制 20MB }, ENABLE_TROPHY: true, // 启用奖励特效 HIDE_USER_LIST_BAR: false, // 是否隐藏用户列表 ORIENTATION: 'portrait', // 屏幕方向：portrait(竖屏) / landscape(横屏) NAV_TITLE: '实时互动课堂', // 导航栏标题 VIDEO_WATER_MARK: '', // 视频水印 URL },};
3. 在 app.js 中实现 setValue 方法，用于处理插件与宿主小程序的通信：
// app.jsconst events = new Map();App({ onLaunch() {}, // 插件通过此方法与小程序通信 setValue(key, data) { const value = events.get(key); if (Array.isArray(value)) { value.forEach((e) => { if (typeof e.callback === 'function') { e.callback(data); } }); } }});
六、步骤 3：跳转进入课堂
请按照文档 接入准备 获取必要参数。
在业务页面通过 navigator 组件或 API 跳转至插件页面。
使用 API 跳转使用 navigator 组件推荐使用 API 跳转。goToLiveRoom() { const params = { classid: '222', // 课堂 ID userid: 'user_001', // 用户 ID token: 'token_str', // 鉴权 Token type: 'interactive' // interactive(互动课) 或 live(直播课) }; const queryString = Object.keys(params) .map(key => `${key}=${params[key]}`) .join('&'); wx.navigateTo({ url: `plugin://tcic-plugin/${params.type}?${queryString}` });}使用 navigator 组件。<navigator url="plugin://tcic-plugin/interactive?classid=123&userid=abc&token=xyz&type=interactive"> 进入课堂</navigator>
七、参数说明
进入课堂时需传入以下参数，请根据业务需求生成：
| 字段 | 类型 | 必填 | 说明 | 备注 |
| userid | String | 是 | 用户 ID | 来自 RegisterUser 接口。 |
| classid | String | 是 | 课堂 ID | 来自 CreateRoom 接口。 |
| token | String | 是 | 鉴权 Token | 来自 LoginUser 接口。 |
| type | String | 是 | 课堂类型 | 可选值：interactive：互动小班课、强互动大班课live：直播大班课 |
八、步骤 4：业务组件开发
若需自定义直播间简介、水印或分享配置，需自行实现相关组件（如 class-info、landscape-im-container等） 。
参考代码：请查看 微信小程序代码片段。需额外注意的地方：
1. app.js 中挂载 setValue,setWatching,unsetWatching。
2. utils 上挂载 formatTimeStamp。
3. 缓存参数：
wx.setStorageSync('classid', info.classid);wx.setStorageSync('userid', info.userid);wx.setStorageSync('token', info.token);wx.setStorageSync('classmode', info.type); // interactivewx.setStorageSync('nickname', info.username);
4. 关键代码：
·直播简介
components/live/class-info.js 修改 getClassInfo。
·分享内容配置
components/live/class-info.js 修改 tcicPlugin.setShareInfo。
·直播画面水印配置
components/live/class-info.js 修改 tcicPlugin.setValue('watermark', {…})。
5. 配置 Request 合法域名：
https://tcic-api.qcloudclass.com;https://tcic-demo.qcloudclass.com;https://tcic-api.qcloudtiw.com;https://tcic-demo.qcloudtiw.com;https://tcic-demo-login.qcloudclass.com;
九、常见问题 (FAQ)
有问题可通过 联系我们 加群咨询。
十、插件体积较大，导致主包超出 2M 限制怎么办？
建议将插件接入放在分包中。
1. 在 app.json 的 subpackages 中配置分包。
2. 从分包页面跳转至插件页。
注意：若遇到 tcicPluginConfig.js is not defined 错误，请将该配置文件复制一份到分包的根目录下。
十一、分包中引入插件，样式不生效？
这是微信开发工具的已知问题。
解决方案：将分包所需的公共样式写入 app.wxss 中作为全局样式。详情可参考 微信开放社区反馈。