直播列表(uni-app 客户端)

最近更新时间:2025-09-08 22:59:42

我的收藏
本文将指导您如何快速集成直播列表页,实现查看直播列表以及直播间信息功能。

功能预览



前提条件

在开始集成直播列表页前,需要先完成以下步骤:
1. 已集成核心文件:您已经按照 代码集成指引 将 TUILiveKit 的 pagesuni_modulesutils 等核心文件拷贝到了您的项目中。
2. 已完成登录:您的应用已经调用了登录接口并成功登录。这是使用所有功能的基础。
3. 已制作并使用自定义基座:由于直播功能依赖原生插件,您必须在 HBuilderX 中为您的项目制作并使用自定义调试基座来运行。

直播列表页接入

步骤1:注册直播列表页面

现在,您需要在 pages.json 文件中告诉您的应用,这个新页面是存在的。
打开您项目根目录下的 pages.json 文件,在 "pages" 数组中,添加以下对象来注册直播列表页。
{
"pages": [
// ... 您项目已有的其他页面配置
{
"path": "pages/livelist/index",
"style": {
"navigationBarTitleText": "在线直播"
}
},
]
// ... 其他配置
}


步骤2:跳转直播列表页面

在您需要展示直播列表的地方(具体由您的业务决定,在其点击事件里执行),调用 uni.navigateTouni.redirectTo 方法,即可进入直播列表页面
// 示例:在一个按钮的点击事件中
function startBroadcast() {
uni.redirectTo({
url: '/pages/livelist/index', // URL 对应 pages.json 中配置的 path
});
}