即时通信 IM 观众观看（uni-app 客户端）

注意：集成提示：

注意：这篇档介绍基于 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/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/scenes/live/audience/index', // URL 对应 pages.json 中配置的 path }); } });}

七、替换观众观看页图标

TUILiveKit 用到的所有图标都存放于 static/images 目录下, 部分示例如下，你可以根据你的诉求来替换目录下的图标

八、设置字体的大小/颜色

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 直播列表页