【手把手教程】uniapp + vue 从0搭建仿斗鱼虎牙直播App：腾讯云MLVB移动直播实践连麦PK+带货

admin管理员组

文章数量:1666073

基于uniapp + vue 实现仿斗鱼虎牙腾讯云移动直播应用实践，实现以下功能

1: 用户登陆

2: 房间管理

3: 房间聊天

4: 直播美颜

5: Svga礼物动画

6: 一对一连麦观众

---

项目开发环境

IDE：HbuilderX 3.0+

开发框架：uniapp + vue2.x + sass

运行平台：Android、IOS

环境要求：window7+，macOS 10.12.6+, node 10.14.5+

---

效果演示

---

目录

1. 从0开始配置工程

目录

1. 从0开始配置工程项目

1.1 获取Demo工程并且导入到HbuilderX中

1.2 试用云端插件并且导入到Demo工程中

1.2.1 导入MLVB依赖的TXIM Smart

1.3 配置测试用的腾讯云UserId + UserSig

1.4 打包自定义基座，并且使用自定义基座进行开发调试

2. 了解仿微信App应用的设计与改造

2.1 界面布局的设计与定制化开发

2.2 修改测试UserId + UserSig与设置cdnUrl

 2.3 创建直播间与开启相机预览推流

2.4 监听事件实现收发聊天文本消息

3. 主播美颜的实现

3.1 获取美颜管理对象以初始化美颜实例

3.2 设置美颜参数

3.3 高级版本美颜的获取

4. 一对一主播观众连麦的实现

4.1 连麦流程的探究与实践

4.2 主动发起连麦 + 连麦业务处理

4.3 主动断开连麦 + 退出连麦状态

5. 观众送礼的实现

5.1 试用云端Svga插件并且导入到Demo工程中

5.2 初始化Svga与加载Svga

---

1. 从0开始配置工程

1.1 获取Demo工程并且导入到HbuilderX中

1.2 试用云端插件并且导入到Demo工程中

1.2.1 导入MLVB依赖的TXIM Smart

1.3 配置测试用的腾讯云UserId + UserSig

1.4 打包自定义基座，并且使用自定义基座进行开发调试

2. 了解仿微信App应用的设计与改造

2.1 界面布局的设计与定制化开发

2.2 修改测试UserId + UserSig与设置cdnUrl

 2.3 创建直播间与开启相机预览推流

2.4 监听事件实现收发聊天文本消息

3. 主播美颜的实现

3.1 获取美颜管理对象以初始化美颜实例

3.2 设置美颜参数

3.3 高级版本美颜的获取

4. 一对一主播观众连麦的实现

4.1 连麦流程的探究与实践

4.2 主动发起连麦 + 连麦业务处理

4.3 主动断开连麦 + 退出连麦状态

5. 观众送礼的实现

---

参考文档资源：

uniapp 腾讯云MLVB原生插件文档：智密-腾讯云移动直播(MLVB) · 语雀https://www.yuque/zhimikeji/rnbgvg

uniapp Svga原生插件文档：智密-Svga礼物特效播放插件-直播礼物特效 - DCloud 插件市场https://ext.dcloud/plugin?id=6076

腾讯云 MLVB 原生SDK文档：移动直播 SDK - 文档中心 - 腾讯云https://cloud.tencent/document/product/454

uniapp 腾讯云MLVB原生插件地址：腾讯云移动直播-直播带货连麦与PK(付费版)-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=4729

uniapp 腾讯云TXIM Smart原生插件地址：智密腾讯云即时通讯TXIM Smart版本-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=5906

uniapp Svga原生插件地址：智密-Svga礼物特效播放插件-直播礼物特效-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=6076

---

1. 从0开始配置工程项目

1.1 获取Demo工程并且导入到HbuilderX中

获取Demo工程工程可以通过插件页面获取，插件页面地址如下

腾讯云移动直播-直播带货连麦与PK-智密科技 - DCloud 插件市场

获取方式很简单，通过点击导入示例项目的按钮导入工程即可，具体如下：

 在完成工程导入之后，我们还需要对项目进行一些调整，双击打开manifest.json(根目录下)，选择“基础配置”，点击重新获取AppId，否则将有可能出现打包自定义基座时报错AppId不属于该账户的问题。

1.2 试用云端插件并且导入到Demo工程中

打开uniapp 腾讯云TXIM原生插件地址：腾讯云移动直播-直播带货连麦与PK智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=4729 点击试用，选择我们刚刚重新获取之后的AppId，为该AppId申请免费试用插件。

 确定申请完成之后，我们回到HbuilderX中，打开manifest.json(根目录下)，点击App原生插件配置，导入云端插件。

确定显示如图所示（如果需要Svga插件的，则需要再多1个对应的云端插件）之后，开始下一步

1.2.1 导入MLVB依赖的TXIM Smart

mlvb底层依赖于txim，因此我们需要引入TXIM Smart(定价仅0.01元)，导入的过程参考上面流程

txim smart插件链接：智密腾讯云即时通讯TXIM Smart版本-智密科技 - DCloud 插件市场https://ext.dcloud/plugin?id=5906

1.3 配置测试用的腾讯云UserId + UserSig

腾讯云系列的SDK均采用userId + UserSig的方式做用户登陆，一般情况下我们是通过后端返回的方式获取，但是这里我们显然还没有接入后端，因此我们需要自己生成多个测试使用的UserId + UserSig，一般五个即可，生成之后我们替换到Demo中便可以看到效果。

ÿ

本文标签： 腾讯虎牙手把手教程uniapp