TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
直播列表（Web 桌面浏览器）
概述
本文对 TUILiveKit Demo 中的直播列表页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
快速接入
步骤1：环境配置及开通服务
步骤2: 安装依赖
您可以选择以下任一方式安装依赖：
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
步骤3: 直播列表页面接入
在您的项目下创建 live-list.vue 文件，可直接复制如下代码至您的项目中集成直播列表页面。
<template><UIKitProvider language="zh-CN"><div class="container"><header class="header"><h1 class="title">在线直播</h1></header><main class="main"><LiveList @live-room-click="handleLiveRoomClick" /></main></div></UIKitProvider></template><script setup lang="ts">import { onMounted } from 'vue';import { LiveList, type LiveInfo, useLoginState } from 'tuikit-atomicx-vue3';import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';const { login } = useLoginState();async function initLogin() {try {await login({sdkAppId: 0, // SDKAppID, 可以参考步骤 1 获取userId: '', // UserID, 可以参考步骤 1 获取userSig: '', // userSig, 可以参考步骤 1 获取});} catch (error) {console.error('登录失败:', error);}}onMounted(async () => {await initLogin();});</script><style>:global(*),:global(::after),:global(::before){box-sizing:border-box;margin:0}.container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-color-default)}.header{display:flex;align-items:center;flex-shrink:0}.title{margin:0;font-size:24px;font-weight:600;color:var(--text-color-primary);letter-spacing:-.5px}.main{flex:1;padding:24px;overflow-y:auto;min-height:0}</style>
步骤4: 启动项目
运行下面的命令后可生成直播列表页面，您可选择对应的直播间进入观看。
npm run dev
自由定制
根据上述功能展示图，我们也支持您根据项目需求对直播列表页面进行 UI 定制能力。主要可供定制的能力如下表所示。
类别 | 功能 | 描述 |
直播间列表 | 自定义直播间列表区域展示 | 支持： 直播间信息文字 展示/隐藏、UI 进行定制 直播间一行/一列展示固定数量定制 |
个人信息 | 自定义个人信息展示 | 支持： 展示/隐藏个人信息 个人信息字体、颜色 UI 自定义设置 |
指定直播间
由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目
src 目录下新建 router 文件夹，并创建 index.ts 文件。然后，在您的主文件（例如 main.ts 或 index.ts）中引入并使用路由。可参见 GitHub 代码示例，如果需要直播列表，可参见文档 直播列表页面。// live-list.vue 可增量添加至您的代码中<template><UIKitProvider>// .....省略部分参考快速接入步骤 3 部分<LiveList @live-room-click="handleLiveRoomClick" /></UIKitProvider></template><script setup lang="ts">import { useRouter, useRoute } from 'vue-router';const router = useRouter();const route = useRoute();function handleLiveRoomClick(liveInfo: LiveInfo) {if (liveInfo?.liveId) {router.push({ path: '/live-player', query: { ...route.query, liveId: liveInfo.liveId } });}}<script>//src/router/index.tsimport { createRouter, createWebHistory } from 'vue-router';const routes = [{// 路由跳转至观看页面path: '/live-player',component: () => import('../views/live-player.vue'),},];const router = createRouter({history: createWebHistory(),routes,});export default router;// src/main.tsimport { createApp } from 'vue';import App from './App.vue';import router from './router';const app = createApp(App);app.use(router);app.mount('#app');
文档反馈