基于uni-app技術開發的仿微信界面IM實例項目，開源Vue版本源碼，對于要求高的開發者我們也開發了NVUE版本，實現了文本消息、圖文消息、表情(gif動畫)，圖片預覽，圖片編輯，視頻預覽，視頻編輯，仿微信的圖片選擇、編輯、長按菜單等功能
項目文章索引
1、項目引言
2、騰訊云后臺配置TXIM
3、配置項目并實現IM登錄
4、會話好友列表的實現
5、聊天輸入框的實現
6、聊天界面容器的實現
7、聊天消息項的實現
8、聊天輸入框擴展面板的實現
9、聊天會話管理的實現
10、聊天記錄的加載與消息收發
11、定位SD配置與收發定位消息
12、貼圖表情的定制化開發
13、騰訊云后臺配置TRTC功能
14、集成音視頻通話功能
15、集成仿微信的拍照，相冊選擇插件
16、集成美顏功能
17、集成TPNS消息推送(暫未接入)
@
目錄- 項目文章索引
- 文章概述
-
一、配置Uniapp工程
- 1.申請試用
- 2.將示例工成導入到HBuilderX
- 3.配置插件
-
二、打包自定義基座
- 1.安裝依賴
- 2.制作自定義基座
-
三、配置項目的AppId、密鑰、用戶信息
- 1.配置AppId
- 2.配置用戶信息
- 3.調用登錄代碼執行登錄
- 四、項目開源地址及交流群
文章概述
前面兩篇文章過去了，啥代碼都沒寫，本來今天還是啥代碼都不像寫的，因為配置Uniapp也有不少內容，但是實在過意不去，咱今天的文章稍微長一點，不僅配置好功能，還要把用戶登錄給實現。愛掏網 - it200.com
一、配置Uniapp工程
1.申請試用
打開uniapp 騰訊云TXIM原生插件地址：https://ext.dcloud.net.cn/plugin?id=5116 并點擊“試用”，如果您已經創建了APP，直接選擇對應的APP即可，如果未創建APP，請點擊“管理我的APP”，創建APP后刷新界面再點擊試用。愛掏網 - it200.com
2.將示例工成導入到HBuilderX
試用成功之后，我們可以將DEMO項目導入到HbuilderX，導入成功之后就看到代碼了...
3.配置插件
點擊左側的"manifest.json"，進入"App啟動界面配置"，先將圖標配置一下，以免生成失敗。愛掏網 - it200.com
進入“App原生插件配置”，將無用的插件刪除，然后點擊“選擇云端插件”
選擇剛才試用的插件，并確定，完成插件的配置
二、打包自定義基座
因為試用插件只能在自定義基座中運行，所以我們需要來打包自定義基座。愛掏網 - it200.com
1.安裝依賴
在打包之前，我們需要安裝依賴，這里需要開發者安裝nodejs運行環境，以及安裝hbuilderx scss編譯插件，沒有安裝的開發者請按照以下鏈接安裝對應的環境。愛掏網 - it200.com
nodejs官方網站：https://nodejs.org/zh-cn/
nodejs中文網：http://nodejs.cn/
scss/sass編譯插件：https://ext.dcloud.net.cn/plugin?id=2046
安裝完成之后，開發者可以在hbuilderx中打開終端，輸入以下命令完成依賴安裝。愛掏網 - it200.com
2.制作自定義基座
由于uniapp框架限制問題，使用原生插件必須先打包自定義基座，然后通過自定義基座開發調試。愛掏網 - it200.com這里我們先演示安卓如何打包自定義基座并且使用自定義基座進行開發
（PS：IOS操作流程一致，證書需要使用開發證書或者企業證書，不能使用發布證書）
三、配置項目的AppId、密鑰、用戶信息
1.配置AppId
首先我們需要修改來自Demo工程中的SDKAppID，正如前文所說，每個IM應用都有其專屬的SDKAppID，那么在demo工程中我們需要修改utils/txim.js文件此處位置
愛掏網 - it200.com<b class=" ahide> 來自 vuebug.com) 一張圖，告訴人家改哪里" loading="lazy">
2.配置用戶信息
一般情況來說我們是需要后端反饋用戶信息的以便登錄TXIM，而測試環境下我們需要先預置測試用戶信息，以便前端的本地開發，在demo中我們需要找到以下文件修改對應位置（請注意此處的userId為字符串，請勿提供整數）
3.調用登錄代碼執行登錄
我們來看看登錄的代碼，當我們點擊登錄的時候，我們通過綁定點擊事件獲取了userId和userSig之后，我們只需要通過執行以下代碼即可登錄TXIM SDK，從而開始聊天，消息監聽等邏輯。愛掏網 - it200.com
this.$txim.login(item.id, item.sign, async res => {
if (res.code == 0) {
// 登錄成功
} else {
// 登錄失敗
}
})
修改完成之后運行項目，效果如下：
四、項目開源地址及交流群
項目開源地址：https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue
Uniapp開發交流群：755910061