基于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.1 获取Demo工程并且导入到HbuilderX中
• 1.2 试用云端插件并且导入到Demo工程中

• 1.2.1 试用TXIM Smart插件并且导入到Demo工程中
• 1.3 配置测试用的腾讯云UserId + UserSig

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

2. 了解移动直播应用的设计与改造

• 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

参考文档资源：

uniapp 腾讯云MLVB原生插件文档：https://www.yuque.com/zhimikeji/rnbgvg

uniapp Svga原生插件文档：https://ext.dcloud.net.cn/plugin?id=6076

腾讯云 MLVB 原生SDK文档：https://cloud.tencent.com/document/product/454

uniapp 腾讯云MLVB原生插件地址：https://ext.dcloud.net.cn/plugin?id=4729

uniapp 腾讯云TXIM Smart原生插件地址：https://ext.dcloud.net.cn/plugin?id=5906

uniapp Svga原生插件地址：https://ext.dcloud.net.cn/plugin?id=6076 

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

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

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

https://ext.dcloud.net.cn/plugin?id=4729

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

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

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

打开uniapp 腾讯云TXIM原生插件地址：https://ext.dcloud.net.cn/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插件链接：https://ext.dcloud.net.cn/plugin?id=5906

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

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

（先确保已经登陆腾讯云并且创建了应用，创建应用参考官方文档：https://cloud.tencent.com/document/product/269/32577）

腾讯云IM控制台：https://console.cloud.tencent.com/im

打开腾讯云IM控制台后点击对应的应用进入管理，在这里我们需要先记录一下SDKAppID，如下图所示我们的SDKAppID是1400521882。

得到SDKAppID之后，我们点击【辅助工具】，点击【UserSig生成&校验】，在这里我们通过腾讯云IM控制台的辅助工具来得到所需的UserId + UserSIg，注意这里生成的有效期是180天，请在有效期内完成测试。

重复操作，这样我们就得到了5组UserID + UserSig，以及SDKAppID，数据如下：

{ id: '10001', sign: 'eJwtzF0LgjAYBeD-suuQd5tbInRjGF2kGa3upU17G8owkyL6782Py-MczvkSdTgHg*lITFgAZDVl1KbtscKJKQDQpXhqWzqHmsQ0BAgjSSnMjXk77Ix3IQTzi1l7bEaTXvlaRnx5wXr8rS6FKur0w4fH8XXS21zyJL1fG9btVCttn6Aubb6-ZdmG-P6UADBd' },
{ id: '10002', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgZGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbWEJNyUwHmlvh7e*X52VhWelqnpJtmh9WGZZi6OxvmBRmll0eox9u4Znk4pNvnm*WkesYaqtUCwC*HDA6' },
{ id: '10003', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgbGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbGUFNyUwHWZceo5-sGuzt7p-pGaNfWpUT6F0Q5OrqX2js5Z6aWRkUkuqSl1Xk6ePs6BaVbqtUCwDxBzDx' },
{ id: '10004', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgYmUInilOzEgoLMFCUrQxOgqIWZoaEBRCa1oiCzKBUobmpqagTUAREtycwFiZkBRY3NzY2NoaZkpgPNdXb1TvMMSk0xSw33ci5N83YJCnKr8vfyMshIdUqO0S-PdUvL94r0NCitski3VaoFAL*XMJM_' },
{ id: '10005', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgamUInilOzEgoLMFCUrQxOgqJGhhYURRCa1oiCzKBUobmpqagTUAREtycwFiZkZm5kaG1oaGkJNyUwHmluVm1fkUxCaWFjqllGYEqOfWxQSFlkWblmQ7JTqHpQcllZk7Jvo6ZZrFuUUaKtUCwD1lzGr' },

const SDKAppID = 1400521882

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

在打包之前，我们需要安装依赖，这里需要开发者安装nodejs运行环境，以及安装hbuilderx scss编译插件，没有安装的开发者请按照以下链接安装对应的环境。

nodejs官方网站：https://nodejs.org/zh-cn/

nodejs中文网：http://nodejs.cn

scss/sass编译插件：https://ext.dcloud.net.cn/plugin?id=2046

安装完成之后，开发者可以在hbuilderx中打开终端，输入以下命令完成依赖安装。

由于uniapp框架限制问题， 使用原生插件必须先打包自定义基座，然后通过自定义基座开发调试。这里我们先演示安卓如何打包自定义基座并且使用自定义基座进行开发（IOS操作流程一致，证书需要使用开发证书或者企业证书，不能使用发布证书）

注意：这里提示的报错无关紧要，因为TXIM Smart确实不存在这些功能，只是使用的为同一个JSSDK而已，对于App开发而言没有区别。