tencent cloud

开发指引
最后更新时间：2023-07-13 17:01:30
开发指引
最后更新时间： 2023-07-13 17:01:30
通过此文档您将了解到以下内容：
搭建 VUE 自定义 UI 工程
打包生成 JS 和 CSS
添加自定义菜单示例
如何在浏览器上调试
关于技术栈的说明：
课中业务模块的实现是基于 HTML/CSS/JS 来实现的。完成业务层的自定义开发需要前端人员，针对前端的技术栈并无限制。

搭建工程

1. 可以直接从 demo 中下载示例，也可以用 Vue 脚手架命令自行搭建。
2. 通过 Vue 脚手架搭建 Vue 工程，执行以下命令：
vue create hello-world
3. 其中 HelloWorld.vue 为自定义组件，main.js 为业务主流程入口，加载自定义组件流程如下：
// 1. 导入全局 TCIC
const TCIC = window.TCIC;

// 课堂加载成功后执行
TCIC.SDK.instance.promiseState(TCIC.TMainState.Joined_Class, true).then(() => {
    // 这里实现业务逻辑
    const header = TCIC.SDK.instance.getComponent('header-component').getVueInstance().$refs.header;
    ... 
});
我们在 开放 API 文档 为您准备了丰富的接口和回调。

编译打包

1. 由于 TCIC 在运行时将加载您自定义的 JS 和 CSS，您需要将自定义组件和 业务流程 main.js 打包成一个 JS 和 一个 CSS 文件，可执行以下命令：
  
./node_modules/.bin/vue-cli-service build --target lib --name myLib 'src/main.js'
2. 打包完成后，会在根目录的dist文件夹下生成以下文件：
myLib 为导出的文件名。
myLib.css 为导出的 CSS 文件。
myLib.umd.js 为导出的 JS 文件。
myLib.umd.min.js 为 myLib.umd.js 对应的压缩文件。
3. 其中 myLib.css 和 myLib.umd.min.js 即为 TCIC 加载自定义界面需要的 custom.css 和 custom.js 。

如何实现一个自定义组件

假设我们需要实现一个如图示所示的自定义组件。




代码示例

const header = TCIC.SDK.instance.getComponent('header-component').getVueInstance().$refs.header;
header.addMenu({
    name: 'classcode', //唯一ID
    class: 'zhiqi-classcode-button', //自定义class
    label: '班级码',//组件名（hover时显示）
    icon: 'https://iph.href.lu/24x24?fg=666666&bg=cccccc',//图标资源URL也可以是base64
    enable: true, //是否可用
    active: false, //是否为激活态
    role: {
        teacher: {
            classType: ['interactive', 'live'], //角色及对应课型
        },
    },
    action: (event) => {
        //组件逻辑
        YOUR_WIDGET.toggleVisible(event); //点击回调
    },
}, 0);
单击自定义菜单之后的弹框效果可根据个人业务需要来开发，toggleVisible 回调中可控制弹框的展示。

如何在浏览器上调试

1. 进入课中。
2. 启动本地项目，实现可以通过 localhost 完成 js/css 文件的访达。
http://localhost:443/demo/dist/myLib.css
http://localhost:443/demo/dist/myLib.umd.min.js
3. 进入直播间后，在 URL 后，拼接 以下内容：
&debugjs=http://localhost:443/demo/dist/myLib.umd.min.js&debugcss=http://localhost:443/demo/dist/myLib.css
刷新页面即可看到自定义的菜单效果。

本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈