【手把手教程】uniapp + vue 從0搭建仿鬥魚虎牙直播App：騰訊雲MLVB移動直播實踐連麥PK+帶貨
基於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開發而言沒有區別。