文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>视频直播>观众观看>观众观看（uni-app 客户端）

观众观看（uni-app 客户端）

最近更新时间：2025-10-21 10:12:51

我的收藏

本页目录：

本文将指导您如何快速集成观众观看页，体验观众进入主播的直播间后观看直播，观众连麦 、查看直播间信息、查看在线观众、发送礼物、点赞，弹幕互动等功能。

功能预览

观众观看页提供默认的行为和样式，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。下图介绍了观众观看页的主要功能，其中包含直播信息展示、发起连麦、查看观众列表、发送礼物、直播时长、弹幕互动、礼物播放、点赞等。


开始接入

步骤1：集成核心文件

已集成核心文件请忽略，已经按照 代码集成指引 将 TUILiveKit 的 pages、uni_modules等核心文件拷贝到了您的项目中。

步骤2：完成登录

已登录请忽略该步骤，您的应用已经调用了 登录接口 并成功登录。这是使用所有功能的基础

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

已制作自定义基座请忽略，由于直播功能依赖原生插件，您必须在 HBuilderX 中为您的项目制作并使用自定义调试基座来运行。

步骤4：注册观众观看页面

现在，您需要在 pages.json 文件中告诉您的应用，这个新页面是存在的。
打开您项目根目录下的 pages.json 文件，在 "pages" 数组中，添加以下对象来注册观众观看页。
{
    "pages": [
        // ... 您项目已有的其他页面配置
        {
           "path": "pages/audience/index",
            "style": {
                "navigationBarTextStyle": "white",
                "app-plus": {
                    "titleNView":false
                 }
            }
        },
    ]
    // ... 其他配置
}


步骤5：跳转到观众观看页面

在您需要观众观看的地方（具体由您的业务决定，在其点击事件里执行），调用 uni.navigateTo 或 uni.redirectTo 方法，即可进入观众观看页面。
// 示例：在一个按钮的点击事件中
function startBroadcast() {
  uni.$liveId = liveId //您要加入的直播间 Id;
  joinLive({
    liveId: uni.$liveId,
    success: () => {
      uni.redirectTo({
        url: '/pages/audience/index', // URL 对应 pages.json 中配置的 path
      });
    }
  });
}

定制您的 UI

替换观众观看页图标

TUILiveKit 用到的所有图标都存放于 static/images 目录下, 部分示例如下，您可以根据您的诉求来替换目录下的图标
图标路径
详细描述
/static/images/dashboard.png
底部操作栏的“仪表盘”图标
/static/images/link-guest.png
底部操作栏的“申请连麦”图标
/static/images/live-gift.png
底部操作栏的“礼物”图标
/static/images/live-like.png
底部操作栏的“点赞”图标
/static/images/close.png
顶部操作栏的“离开直播间”图标

设置字体的大小/颜色

uniapp 官方对 nvue 页面限制字体的大小和颜色只能在 text 标签上设置，对于您想修改的文案，直接修改其 css 样式即可，下方以“主播昵称”文字为例：
<text class="stream-title" :numberOfLines="1">{{ currentLive?.liveOwner?.userName || currentLive?.liveOwner?.userId}}</text>
  .stream-title {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 4rpx;
    width: 120rpx;
    height: 40rpx;
    lines: 1;
  }
修改其 css 样式：
<text class="stream-title" :numberOfLines="1">{{ currentLive?.liveOwner?.userName || currentLive?.liveOwner?.userId}}</text>
  .stream-title {
    color: rgba(155, 108, 255, 1);
    font-size: 40rpx;
    font-weight: 500;
    margin-bottom: 4rpx;
    width: 120rpx;
    height: 40rpx;
    lines: 1;
  }
最终效果：


设置按钮的大小

设置按钮的大小，也可以直接通过修改 css 属性来进行设置，下方以 “礼物” 按钮为例：
<image class="action-btn" @click="showGiftPicker()" src="/static/images/live-gift.png" />
  .action-btn {
    width: 64rpx;
    height: 64rpx;
    margin-left: 16rpx;
  }
修改其 css 样式：
<image class="action-btn" @click="showGiftPicker()" src="/static/images/live-gift.png" />
  .action-btn {
    width: 80rpx;
    height: 80rpx;
    margin-left: 16rpx;
  }
最终效果：


隐藏按钮

隐藏按钮可以通过注释代码的方式来进行直接隐藏，下方以“礼物”的按钮为例：
<!-- <image class="action-btn" @click="showGiftPicker()" src="/static/images/live-gift.png" /> -->

新增按钮

在您需要新增的位置，插入对应的按钮实现，下方以视频区域左上角新增“点赞数量”按钮为例：
<view class="live-content">
    ......
    <view class="live-like-container" >
      <image style="width: 36rpx; height: 36rpx;" src="/static/images/gift_heart.png" alt="" />
      <text style="color: #fff; font-size: 24rpx;">8888</text>
    </view>
</view>
  .live-like-container {
    position: fixed;
    top: 200rpx;
    left: 30rpx;
    width: 200rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 45rpx;
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-items: center;
  }
最终效果：


常见问题

如何展示观众等级？

您的业务中若是有需要展示观众等级的需求，可以在目标位置插入对应的元素用于展示观众等级，这里以观众列表展示观众等级为例。在 TUIKit_uni-app/components/atomic-x/LiveAudienceList.nvue组件中找到观众信息展示的代码，并在其中插入观众等级展示代码。
<view class="audience-info">
   <text>{{audience.level}}</text>// 新增观众等级展示代码
   <view class="audience-avatar-container">// 观众头像展示代码
      <image class="audience-avatar" :src="audience.avatarUrl || defaultAvatarUrl" mode="aspectFill" />
   </view>
</view>


其他参考文档

TUILiveKit uni-app 主播开播页
TUILiveKit uni-app 直播列表页


中国站
目录