【手把手教程】uniapp + vue 從0搭建仿微信App聊天應用：騰訊雲TXIM即時通訊的最佳實踐

本文轉載自查看原文 2021-11-21 15:52 1684 uniapp插件

基於uniapp + vue 實現仿微信App聊天應用實踐，實現以下功能

1: 用戶登陸

2: 聊天會話管理

3: 文本/圖片/視頻/定位消息收發

4: 貼圖表情消息收發

5: 一對一語音視頻在線通話

項目開發環境

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.3 配置測試用的騰訊雲UserId + UserSig
1.4 打包自定義基座，並且使用自定義基座進行開發調試

2. 了解仿微信App應用的設計與改造

2.1 界面布局的設計與定制化開發
2.2 修改測試UserId + UserSig

2.3 聊天會話管理與更新聊天會話項目
2.4 聊天記錄的加載與消息收發

2.5 定位SDK配置與收發定位消息
2.6 貼圖表情定制化開發

3. 一對一語音視頻在線通話接入

3.1 試用TRTC插件並且導入到Demo工程中
3.2 騰訊雲后台開啟TRTC功能

3.3 配置TRTC-Calling同步登陸SDK功能
3.4 配置音視頻通話並且定制化開發

參考文檔資源：

uniapp 騰訊雲TXIM原生插件文檔

uniapp 騰訊雲TRTCCalling原生插件文檔

騰訊雲 TXIM 原生SDK文檔

騰訊雲 TRTCCalling 原生SDK文檔

uniapp 騰訊雲TXIM原生插件地址

uniapp 騰訊雲TRTCCalling原生插件地址

1. 從0開始配置工程項目

1.1 獲取Demo工程並且導入到HbuilderX中

獲取Demo工程工程可以通過gitee鏈接地址獲取，項目工程地址如下

https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue

獲取方式分為2種，具體方式如下：

方法1: 打開gitee鏈接之后，在線點擊克隆/下載，下載zip包后解壓得到源碼工程

方法2: 通過命令行克隆git得到源碼工程

git clone https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue.git

得到工程之后，我們需要手動將其導入到HbuilderX，這也很簡單，我們只需要將工程拖動到HbuilderX中，即可完成導入的工作。

在完成工程導入之后，我們還需要對項目進行一些調整，雙擊打開manifest.json(根目錄下)，選擇“基礎配置”，點擊重新獲取AppId（PS：否則將有可能出現打包自定義基座時報錯AppId不屬於該賬戶的問題。）

1.2 試用雲端插件並且導入到Demo工程中

打開uniapp 騰訊雲TXIM原生插件地址：點擊試用，選擇我們剛剛重新獲取之后的AppId，為該AppId申請免費試用插件。

確定申請完成之后，我們回到HbuilderX中，打開manifest.json(根目錄下)，點擊App原生插件配置，導入雲端插件。

確定顯示如圖所示（PS：如果需要原生相冊/一對一語音視頻通話的，則需要再多2個對應的雲端插件）之后，就可以開始下一步，在騰訊雲后台配置測試使用UserId和UserSig

1.3 配置測試用的騰訊雲UserId + UserSig

騰訊雲系列的SDK均采用userId + UserSig的方式做用戶登陸，一般情況下我們是通過后端返回的方式獲取，但是這里我們顯然還沒有接入后端，因此我們需要自己生成多個測試使用的UserId + UserSig，一般五個即可，生成之后我們替換到Demo中便可以看到效果。

（先確保已經登陸騰訊雲並且創建了應用，創建應用參考：官方文檔）

騰訊雲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官方網站

nodejs中文網

scss/sass編譯插件

安裝完成之后，開發者可以在hbuilderx中打開終端，輸入以下命令完成依賴安裝。

由於uniapp框架限制問題，使用原生插件必須先打包自定義基座，然后通過自定義基座開發調試。這里我們先演示安卓如何打包自定義基座並且使用自定義基座進行開發

（PS：IOS操作流程一致，證書需要使用開發證書或者企業證書，不能使用發布證書）

2. 了解仿微信App應用的設計與改造

2.1 界面布局的設計與定制化開發

對於仿微信App應用來說，Demo根據UI功能的不同設計划分為7個組件，放置在components目錄下，具體對應如下：

通過將UI組件與業務邏輯分離的方式，降低了業務與UI整體的耦合度，使得需要定制化開發UI的時候只修改UI組件即可，降低開發成本。

各個組件對應的效果如下：

會話好友列表(ChatContactItem)
聊天輸入框(ChatInputBox)
聊天界面容器(ChatLayout)
聊天消息項(ChatMessageItem)
聊天輸入框擴展面板(Drawer)

對於業務界面而言，分為3個界面，分別如下：

login.vue - 登錄界面，用於登錄騰訊雲賬號
list.vue - 會話界面，顯示歷史聊天會話列表與最近一次聊天信息
singleChat.vue - 一對一單聊界面，顯示聊天消息與進行聊天交互的界面。

對於開發者如何進行改造與調試，主要分為2種場景：

更換主題配色與風格。這種情況下主要修改組件內的圖標與顏色即可，對於業務界面部分則根據需求修改navBar BackgroundColor即可。
更換界面排版風格。這種情況下主要修改組件內的圖標與排版位置即可，對於改動較大的部分需要根據排版的要求，調整ChatLayout（比如新增slot等操作）。

2.2 修改測試UserId + UserSig

在demo工程中內置的測試UserId與UserSig存在過期的情況，在上面的操作中我們配置了屬於我們測試的UserId和UserSig，在這里我們需改為我們上面配置的UserId和UserSig，這樣可以方便我們開發調試App，當然同時我們也需要修改SDKAppID，否則將會報錯提示UserId匹配不上該SDKAppID的錯誤。

修改工作很簡單，我們只需要修改2處地方，如

注意：修改之后我們不需要重新打包自定義基座，但是最好重新啟動調試，因為uniapp的編譯機制，有時候會導致部分安卓設備並不會刷新同步額外引入的js文件，從而出現一些調試開發上的意外“驚喜”

2.3 聊天會話管理與更新聊天會話項目

聊天會話指的是用戶與好友/群組聊天之后，生成一個本地的聊天會話記錄，開發者一般顯示為消息/會話列表。在這里TXIM已經將其封裝好了一系列CURD方法，通過事件反饋更新會話列表信息（排序/更新草稿/更新上標等）。

獲取列表

聊天會話列表的獲取在list.vue界面的以下位置，主要是初始化的時候通過getConversationList方法獲取到上一次最后更新的會話信息

在這里我們需要保存this.nextSeq，以便我們分頁獲取會話列表，在這里主要的代碼是這個方法：

let { data } = await this.$txim.getConversationList(this.nextSeq, 999)
// 這里的999代表pageSize = 999，一般情況下生產環境為20即可

根據騰訊的官方定義，我們並不需要像傳統的列表查詢一樣傳pageIndex，騰訊每次會在data中返回nextSeq，以作為下一次查詢的seq記錄，獲取完會話列表之后，我們只需要根據最后一次消息的timestamp進行降序排序，即可以實現讓最新的消息顯示在列表頂部。

更新會話列表

由於即時通訊是實時通信的，消息更新也是實時的，因此我們需要監聽會話消息變更事件，從而實現當會話列表更新的時候，視圖也隨着底層數據變化進行變化，如重排，顯示下標等。在界面中實現這部分監聽邏輯的的代碼主要在這里。

一般來說，當我們獲取到會話更新記錄的情況下，我們不一定只是獲取到一條，因此我們需要循環data以更新所有變更項目，在demo中獲取到新的會話的時候並沒有做排序的處理，生產環境中建議實現排序，以便用戶及時發現新的消息，實現方式也很簡單，我們只需要對最終的conversationList進行timestamp排序即可，代碼如下：

let conversationList = this.conversationList.sort((a,b) => b.lastMessage.timestamp - a.lastMessage.timestamp)
this.conversationList = conversationList

2.4 聊天記錄的加載與消息收發

聊天記錄的加載與消息收發demo中已經集成在singleChat.vue文件中了，主要的邏輯為singleChat封裝所有的消息收發和聊天消息查詢方法，而對於聊天消息的顯示與消息編輯，圖文視頻選擇編輯都由子組件實現后通過emit事件的方式同志singleChat發送消息，具體開發者可以參考componetns目錄下的聊天組件。