注意：集成提示：
注意：这篇档介绍基于 UI 组件 的开播方式（含完整交互 UI）。若你需通过 Core SDK 自行搭建主播端界面，请参考 主播开播 (Core SDK)。
一、功能预览
主播开播页提供默认的行为和样式，但如果默认行为和样式不能完全满足你的需求，你也可以对 UI 进行自定义。下图介绍了主播开播页的主要功能。
二、步骤1：集成核心文件
已集成核心文件请忽略，已经按照 代码集成指引 将 TUILiveKit 的 pages、uni_modules等核心文件拷贝到了你的项目中。
三、步骤2：完成登录
已登录请忽略该步骤，你的应用已经调用了 登录接口 并成功登录。这是使用所有功能的基础
四、步骤3：制作并使用自定义基座
已制作自定义基座请忽略，由于直播功能依赖原生插件，你必须在 HBuilderX 中为你的项目制作并使用自定义调试基座来运行。
五、步骤4：注册主播开播页面
现在，你需要在 pages.json 文件中告诉你的应用，这个新页面是存在的。
打开你项目根目录下的 pages.json 文件，在 "pages" 数组中，添加以下对象来注册主播开播页。
{ "pages": [ // … 你项目已有的其他页面配置 { "path": "pages/scenes/live/anchor/index", "style": { "navigationBarTitleText": "", "disableSwipeBack": true, // 禁止右滑返回，防止直播中误操作退出 "app-plus": { "titleNView": false // 隐藏原生导航栏，使用页面内的自定义导航 } } } ] // … 其他配置}
六、步骤5：跳转主播开播页面
在你需要开启直播的地方（具体由你的业务决定，在其点击事件里执行），调用 uni.navigateTo 或 uni.redirectTo 方法，即可进入主播开播页面。
// 示例：在一个按钮的点击事件中function startBroadcast() { // 跳转到主播开播页 uni.redirectTo({ url: '/pages/scenes/live/anchor/index' // URL 对应 pages.json 中配置的 path });}
注意：说明：
注意：navigateTo 与 redirectTo
七、AI 助手：知识咨询与代码集成
你在接入直播与语聊 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于产品文档。适用于查询 AtomicXCore SDK 和 UI 组件用法以及集成文档等场景，立即体验，提出你的第一个问题。
八、替换主播开播页图标
TUILiveKit 用到的所有图标都存放于 static/images 目录下，部分示例如下，你可以根据你的诉求来替换目录下的图标。
| 图标路径 | 详细描述 |
| /static/images/link-host.png | 底部操作栏的“连主播”图标 |
| /static/images/link-guest.png | 底部操作栏的“连观众”图标 |
| /static/images/live-more.png | 底部操作栏的“更多”图标 |
| /static/images/live-end.png | 顶部操作栏的“结束直播”图标 |
九、设置字体的大小/颜色
uniapp 对 nvue 页面限制字体的大小和颜色只能在 text 标签上设置，对于你想修改的文案，直接修改其 css 样式即可，示例如下
以 “连主播” 文字为例：
<text class="action-button-text">连主播</text> .action-button-text { color: #fff; font-size: 20rpx; }
修改其 css 样式：
<text class="action-button-text">连主播</text> .action-button-text { color: red; font-size: 40rpx; }
最终效果：
十、设置按钮的大小
设置按钮的大小，也可以直接通过修改 css 属性来进行设置，示例如下
以 “连主播” 按钮为例：
<image class="action-button-icon" src="/static/images/link_host.png" mode="aspectFit" /> .action-button-icon { width: 56rpx; height: 56rpx; margin-bottom: 4rpx; }
设置对应的css 属性：
<image class="action-button-icon" src="/static/images/link_host.png" mode="aspectFit" /> .action-button-icon { width: 70rpx; height: 70rpx; margin-bottom: 4rpx; }
最终效果：
十一、隐藏按钮
隐藏按钮可以通过注释代码的方式来进行直接隐藏，示例如下
以“连主播”的按钮为例：
<!– <view class="action-button-item" @tap="showCoHostPanel"> <image class="action-button-icon" src="/static/images/link-host.png" mode="aspectFit" /> <text class="action-button-text">连主播</text> </view> –>
将其注释掉即可实现隐藏按钮。
十二、新增按钮
在你需要新增的位置，插入对应的按钮实现。
以底部栏新增“商品”按钮为例：
<template> …… <!– 底部操作栏 –> <view class="live-bottom-panel" > …… <view class="action-button-item" @tap="showProductPanel"> <image class="action-button-icon" src="/static/images/product.png" mode="aspectFit" /> <text class="action-button-text">商品</text> </view> </view></template>
最终效果：
十三、其他参考文档
·TUILiveKit uni-app 观众观看页
·TUILiveKit uni-app 直播列表页