【动手教程】Uniapp+vue从0开始构建模仿Beta虎牙的直播app：腾讯云MLVB移动直播实践连麦PK+带货

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

1： 用户登录

2： 房间管理

3： 房间聊天

4： 活美人

5： Svga礼品动画

6： 一对一观众

项目开发环境

集成开发环境：HbuilderX 3.0+

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

操作平台：Android、IOS

环境要求：window7+，macOS 10.12.6+，节点10.14.5+

效果演示

1.从0配置项目

1.1获取演示项目并将其导入Hbuilder X

1.2尝试云插件并将其导入演示项目

1.2.1尝试TXIM Smart插件并将其导入演示项目

1.3配置腾讯云UserId+UserSig进行测试

1.4包装定制底座，并使用定制底座进行开发和调试

2.了解移动直播App的设计和改造

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

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

2.3创建Live Studio并启用相机预览流

2.4收听事件可发送和接收聊天短信

3.主播美的实现

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

3.2设置美容参数

3.3高级版美容的获取

4.实现一对一主播观众连接到麦克风

4.1小麦连续加工的探索与实践

4.2积极启动连续小麦+连续小麦业务处理

4.3主动断开小麦连接+退出小麦连接

5.观众送礼的实现

5.1尝试云Svga插件并将其导入演示项目

5.2初始化Svga事件侦听和加载Svga

参考文档资源：

Uniapp腾讯云MLVB本机插件文档

Uniapp Svga本机插件文档

腾讯云MLVB原生SDK文档

Uniapp腾讯云MLVB本机插件地址

Uniapp腾讯云TXIM智能本机插件地址

Uniapp Svga本机插件地址

1.从0配置项目

1.1获取Demo项目并将其导入HbuilderX以获取Demo工程，可通过插件页面获取

采集方法简单。单击“导入示例项目”按钮导入项目，如下所示：

导入项目后，我们需要对项目进行一些调整。双击以打开清单Json（在根目录下），选择“基本配置”，然后单击以检索AppId。否则，打包自定义库时可能会出现AppId不属于帐户的问题。

1.2尝试云插件并将其导入演示项目。打开uniapp腾讯云TXIM本机插件地址，单击“尝试”，选择我们刚刚检索到的AppId，然后为AppId申请免费试用插件。

确认显示如图所示（如果需要Svga插件，则需要另一个相应的云插件），然后开始下一步

1.2.1导入MLVB依赖的TXIM Smartmlvb依赖于TXIM，因此我们需要导入TXIM智能（价格仅为0.01元）。有关导入流程，请参考上述流程

1.3用于配置测试的腾讯云UserId+UserSig SDK使用UserId+UserSig的方法进行用户登录。通常，我们通过后端返回的方式获得它，但我们显然无法访问后端。因此，我们需要生成多个UserId+UserSig以供自己测试。一般来说，五个就足够了。生成后，我们可以在演示中替换它们以查看效果。

打开腾讯云IM控制台，点击相应的App进入管理。这里我们需要首先记录SDKAppID，如下图所示。我们的SDKAppID是140052***。

获得SDKPAppID后，我们点击【辅助工具】，点击【UserSig生成和验证】，在这里我们可以通过腾讯云IM控制台的辅助工具获取所需的UserId+UserSig。请注意，此处生成的有效期为180天。请在有效期内完成测试。

重复该操作，我们可以获得5组UserID+UserSig和SDKAppID。数据如下：

｛id:“10001”，符号：“eJwtzF0LgjAYBeD-suuQd5tbInRjGF2kGa3upU17G8owkyL6782Py-MczvkSdTgHg*lITFgAZDVl1KbtscKJQDQpXhqWzqHmsQ0BAgjSSnMjXk77Ix3iQTzi1l7bEaTXvlaRnx5wXr6fKur0w4fH8XXS21zyJL1fG9btVCttn6Aubb6-ZdmG-P6UADBd”｝，

｛id:“10002”，符号：“eJyrVgrxCdYrSy1Ssly0jNQ0gHzM1NS80oy0zLBwoYGBgZGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbWEJNyUwHmlv7e*X52VhWelqnpJtmh9WGZi6OxvmBRmll0eox9u4Znk4pNvnm*WkesYaqtUCwC*HDA6”}，

｛id:“10003”，符号：“eJyrVgrxCdYrSy1Ssly0jNQ0gHzM1NS80oy0zLBwoYGBGBGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbGUFNyUwH