一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言

时间:2022-03-15 23:45:39

项目文章索引

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

三、项目成品效果

一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言

一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言

四、项目开源地址及交流群

项目开源地址:https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue

开发交流群:755910061

一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言的更多相关文章

  1. 五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  2. 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  3. 三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-配置项目并实现IM登录

    项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

  4. 四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  5. 七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天消息项的实现

    会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...

  6. 八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框扩展面板的实现

    聊天输入框扩展面板的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入 ...

  7. 嗨,让我带你逐行剖析Vue.js源码

    本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...

  8. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  9. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

随机推荐

  1. C#中字典集合HashTable、Dictionary、ConcurrentDictionary三者区别

    C#中HashTable.Dictionary.ConcurrentDictionar三者都表示键/值对的集合,但是到底有什么区别,下面详细介绍 一.HashTable HashTable表示键/值对 ...

  2. 【poj3764】 The xor-longest Path

    http://poj.org/problem?id=3764 (题目链接) 今天的考试题,看到异或就有点虚,根本没往正解上想.. 题意 给出一棵带权树,请找出树上的一条路径,使其边上权值的异或和最大. ...

  3. hdu 5690 All x

    All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submiss ...

  4. Linux中用stat命令查看文件时3个时间点解析

    有些时候,我们需要在Linux中使用stat命令来查看文件的详细信息.另外联想下,ls -l命令显示的是什么时间,touch命令修改文件的时间戳,修改的又是什么时间?在这里我们一起来试验下. 首先,我 ...

  5. jeecg关闭当前iframe

    关闭当前iframe function closeDialog(){ frameElement.api.close();//本方法也行 //或者下面的方式 var win = frameElement ...

  6. java日志文件用法总结

    1.基本概念 日志门面(接口):commons logging ; slf4j ; 日志具体实现:log4j ; logback(Spring 系列在使用) ; log4j2(添加了异步logger的 ...

  7. 【大数据和云计算技术社区】分库分表技术演进&最佳实践笔记

    1.需求背景 移动互联网时代,海量的用户每天产生海量的数量,这些海量数据远不是一张表能Hold住的.比如 用户表:支付宝8亿,微信10亿.CITIC对公140万,对私8700万. 订单表:美团每天几千 ...

  8. python之路--JavaScript

    一. JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,希望这门语言能成为国际化标准,于是决定将Jav ...

  9. net-snmp 的配置

    http://www.cnblogs.com/oloroso/p/4595123.html

  10. 【代码审计】QYKCMS_v4.3.2 后台down.php页面代码执行漏洞分析

      0x00 环境准备 QYKCMS官网:http://www.qykcms.com/ 网站源码版本:QYKCMS_v4.3.2(企业站主题) 程序源码下载:http://bbs.qingyunke. ...