实时音视频主播开播（uni-app 客户端）

本文将指导您如何快速集成主播开播页，实现主播开播的能力，体验摄像头预览、美颜、音效、摄像头翻转、观众连麦、主播连线、直播间信息展示、观众列表、礼物播放和弹幕互动等功能。
功能预览
主播开播页提供默认的行为和样式，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。下图介绍了主播开播页的主要功能，其中包含直播信息展示、连线主播、连麦观众、查看观众列表、设置美颜音效、直播时长、弹幕互动、礼物播放等。
﻿
开始接入
步骤1：集成核心文件
已集成核心文件请忽略，已经按照 代码集成指引 将 TUILiveKit 的 pages、uni_modules、atomic-x 等核心文件拷贝到了您的项目中。
步骤2：完成登录
已登录请忽略该步骤，您的应用已经调用了 登录接口 并成功登录。这是使用所有功能的基础
步骤3：制作并使用自定义基座
已制作自定义基座请忽略，由于直播功能依赖原生插件，您必须在 HBuilderX 中为您的项目制作并使用自定义调试基座来运行。
步骤4：注册主播开播页面
现在，您需要在 pages.json 文件中告诉您的应用，这个新页面是存在的。
打开您项目根目录下的 pages.json 文件，在 "pages" 数组中，添加以下对象来注册主播开播页。
{
    "pages": [
        // ... 您项目已有的其他页面配置
        {
            "path": "pages/anchor/index",
            "style": {
                "navigationBarTitleText": "",
                "disableSwipeBack": true, // 禁止右滑返回，防止直播中误操作退出
                "app-plus": {
                    "titleNView": false // 隐藏原生导航栏，使用页面内的自定义导航
                }
            }
        }
    ]
    // ... 其他配置
}
步骤5：跳转主播开播页面
在您需要开启直播的地方（具体由您的业务决定，在其点击事件里执行），调用 uni.navigateTo 或 uni.redirectTo 方法，即可进入主播开播页面。
// 示例：在一个按钮的点击事件中
function startBroadcast() {
    // 跳转到主播开播页
  uni.redirectTo({
    url: '/pages/anchor/index' // URL 对应 pages.json 中配置的 path
    });
}
说明：
navigateTo 与 redirectTo
uni.navigateTo：保留当前页面，跳转到新页面。主播可以从开播页返回到上一页。适用于开播前可以取消的场景。
uni.redirectTo：关闭当前页面，跳转到新页面。主播无法返回。适用于点击后直接进入开播流程的场景。 您可以根据自己的业务需求选择使用。
定制您的 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 直播列表页﻿
﻿
﻿

图标路径	详细描述
/static/images/link-host.png	底部操作栏的“连主播”图标
/static/images/link-guest.png	底部操作栏的“连观众”图标
/static/images/live-more.png	底部操作栏的“更多”图标
/static/images/live-end.png	顶部操作栏的“结束直播”图标

主播开播（uni-app 客户端）

本页目录：

功能预览

开始接入

步骤1：集成核心文件

步骤2：完成登录

步骤3：制作并使用自定义基座

步骤4：注册主播开播页面

步骤5：跳转主播开播页面

定制您的 UI

替换主播开播页图标

设置字体的大小/颜色

设置按钮的大小

隐藏按钮

新增按钮

其他参考文档