一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言
项目文章索引
1、项目引言
2、腾讯云后台配置TXIM
3、配置项目并实现IM登录
4、会话好友列表的实现
5、聊天输入框的实现
6、聊天界面容器的实现
7、聊天消息项的实现
8、聊天输入框扩展面板的实现
9、聊天会话管理的实现
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照,相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)
@
前言
基于uni-app技术开发的仿微信界面IM实例项目,开源Vue版本源码,对于要求高的开发者我们也开发了NVUE版本,实现了文本消息、图文消息、表情(gif动画),图片预览,图片编辑,视频预览,视频编辑,仿微信的图片选择、编辑、长按菜单等功能
一、项目意义
作为一个UniAPP开发者,拥有一套自己的IM源码,可以在各个项目中方便的使用,能大大加快项目进度,网上有各类IM源码,附带服务端,但是此类项目服务端的稳定性、可靠性往往需要打一个问号,更尴尬的是服务端的技术栈可能和您自己使用的并不匹配,需要花费大量的时间精力去做整合。
针对以上问题,我们基于腾讯即时通讯SDK-TXIM(不是WEB IM,是正宗的原生SDK),腾讯音视频SDK-TRTC(这玩意只有原生的),使用UNIAPP+Vue开发了一套IM源码并开源(如果您觉得Vue版本不够丝滑,无法满足你们的项目需求,我们也有更高性能的Nvue版本)
二、使用到的原生插件
本项目的目的是要用Uniapp开发一套可以媲美原生效果的仿微信IM,所以我们没有采用WEB IM,而是使用了原生的腾讯即时通讯SDK插件。用到的插件如下:
1.消息收发插件
消息收发插件我们采用腾讯云即时通讯SDK(TXIM)
官方SDK地址:https://cloud.tencent.com/document/product/269
原生插件地址:(免费版和收费版功能完全相同,用收费版测试开发就行)
1. 免费版:https://ext.dcloud.net.cn/plugin?id=5117
2. 收费版:https://ext.dcloud.net.cn/plugin?id=5116
3. 插件文档地址:https://www.yuque.com/zhimikeji/rggqn1
2.音视频通话插件
音视频通话插件我们采用的是腾讯云实时音视频SDK(TRTC)
官方SDK地址:https://cloud.tencent.com/document/product/647/32173
原生插件地址:
1. 插件地址:https://ext.dcloud.net.cn/plugin?id=3520
2. 插件文档地址:https://www.yuque.com/zhimikeji/giv7zg
3.自定义拍照/相册选择/图片编辑/视频编辑/仿微信选择器插件
自定义拍照/相册选择/图片编辑/视频编辑/仿微信选择器插件我们就自己用原生写了插件并上架了插件市场,插件分为四个版本,功能上有一定区别。
1. 自定义相册插件:https://ext.dcloud.net.cn/plugin?id=5846
2. 自定义相机相册插件:https://ext.dcloud.net.cn/plugin?id=5848
3. 自定义相机相册带压缩插件:https://ext.dcloud.net.cn/plugin?id=5941
4. 自定义相机相册带压缩编辑插件:https://ext.dcloud.net.cn/plugin?id=6183
5. 插件文档地址:https://www.yuque.com/zhimikeji/unzpwg/ghm71f
三、项目成品效果


四、项目开源地址及交流群
项目开源地址:https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue
开发交流群:755910061
一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言的更多相关文章
- 五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-配置项目并实现IM登录
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- 七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天消息项的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- 八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框扩展面板的实现
聊天输入框扩展面板的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入 ...
- 嗨,让我带你逐行剖析Vue.js源码
本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
随机推荐
- P7045 「MCOI-03」金牌
考虑维护一个队列. 先插入\(a_1 = 0\) 依次往后考虑,如果和队列里相斥,则我们把队列一个和他捆绑起来. 如果队列空,则加入该颜色. 最后考虑往队列里插入改颜色. 总共为\(2 * (n - ...
- CF1444C Team-Building
考虑我们判定二分图染色的经典算法: 染色. 我们把所有不同颜色块之间的边都保存下来. 只在图中保留相同颜块之间的边,并对其染色. 我们考虑记\(g_i\)为一个点的所在联通块编号,\(f_i\)为他在 ...
- LOJ #2185 / 洛谷 P3329 - [SDOI2015]约数个数和(莫比乌斯函数)
LOJ 题面传送门 / 洛谷题面传送门 题意: 求 \(\sum\limits_{i=1}^n\sum\limits_{j=1}^md(ij)\),\(d(x)\) 为 \(x\) 的约数个数. \( ...
- 洛谷 P3781 - [SDOI2017]切树游戏(动态 DP+FWT)
洛谷题面传送门 SDOI 2017 R2 D1 T3,nb tea %%% 讲个笑话,最近我在学动态 dp,wjz 在学 FWT,而我们刚好在同一天做到了这道题,而这道题刚好又是 FWT+动态 dp ...
- 【基因组组装】HiC挂载Juicebox纠错补充
目录 1. 主要纠错类型 misjoins translocations inversions chromosome boundaries 2. 其他有用操作 撤销与反撤销 移到边角料 1. 主要纠错 ...
- W10: Warning: Changing a readonly file使用vi/vim报错问题解决
使用vi/vim编辑文件的时候出现W10: Warning: Changing a readonly file报错 解决方法: 一.强制保存退出 :wq! 二.ll 查询文件属主,使用属主赋予权限 c ...
- 43-Reverse Nodes in k-Group
Reverse Nodes in k-Group My Submissions QuestionEditorial Solution Total Accepted: 58690 Total Submi ...
- javaSE高级篇1 — 异常与多线程基础
1.异常的体系结构 注:Throwable是一个类,不是一个接口,这个类里面是描述的一些Error和Exception的共性,如图所示: 异常 / 错误是什么意思? 定义:指的是程序运行过程中,可能 ...
- 商业创新不能等?用友低代码开发平台YonBuilder为您加速!
随着云计算.人工智能.物联网.大数据.5G等新一代技术的快速发展,越来越多的企业希望借助技术的力量加速数智化转型,期许通过更加敏捷和强大的应用系统推动企业的商业创新速度.但传统软件开发周期长.开发成本 ...
- 【2021赣网杯web(一)】gwb-web-easypop
源码分析 <?php error_reporting(0); highlight_file(__FILE__); $pwd=getcwd(); class func { public $mod1 ...