实时互动-教育版小程序快速接入

本文档旨在指导开发者如何将实时互动-教育版 (LCIC) 小程序插件集成至现有的小程序项目中。该插件提供完整的互动课堂与直播功能。
接入前准备
在开始集成前，请确保您满足以下要求。
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.js
const 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.js
const 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);  // interactive
wx.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 中作为全局样式。详情可参考 微信开放社区反馈。

一级类目	二级类目
电商平台	电商平台
		网上竞价平台（文物）
		网上竞价平台（非文物）
教育	学历教育（培训机构）
		学历教育（学校）
		驾校培训
		驾校平台
		教育平台
		在线视频课程

字段	类型	必填	说明	备注
userid	String	是	用户 ID	来自 `RegisterUser` 接口。
classid	String	是	课堂 ID	来自 `CreateRoom` 接口。
token	String	是	鉴权 Token	来自 `LoginUser` 接口。
type	String	是	课堂类型	可选值： interactive：互动小班课、强互动大班课 live：直播大班课

小程序快速接入

本页目录：

接入前准备

1. 资质与类目要求

2. 环境要求

集成步骤

步骤1：申请插件

步骤2：引入插件

步骤 3：跳转进入课堂

参数说明

步骤 4：业务组件开发

常见问题 (FAQ)

插件体积较大，导致主包超出 2M 限制怎么办？

分包中引入插件，样式不生效？