微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能

前言：
最近项目需求要在小程序中添加一个即时通信IM的功能，本来想自己开发一个…评估了一下团队实力后，并不允许，所以找了一个IM第三方框架，采用的是腾讯云的即时通信IM，但是目前腾讯云IM的小程序SDK并没有包含UI，因此就需要自己来开发页面样式和交互，腾讯云IM自己也提供了一个demo，但是使用mpvue框架写的。。。网上是一片骂声。。。我也没有使用他的demo，自已用小程序原生写了一套，因为网上用原生写的demo很少，特此将小弟写的分享出来，各位大佬轻点喷~~

点击**下载源码**

跑通demo四部曲：

下载源码：
下载好源码以后，使用微信小程序开发者工具导入项目，本示例源码中没有appid，所以导入的时候自己填写一个appid
修改获取openID接口：
在app.js中通过获取用户的openID作为IM用户的userID，所以需要换成自己获取openID的接口
修改SDKAppID：
在utils目录下有一个tim.js文件，这个文件里面包含IM的配置、创建、登录、监听账号在其他终端登录，代码有注释，可自行查看，咱们需要修改这个文件里面的SDKAppID，这个SDKAppID是IM平台创建应用的一个appID，可以登录腾讯云平台拿到
修改tim.js中获取UserSig的接口地址：
userSig是通过后台接口生成并返回的，所以需要替换为咱们自己的接口地址

到此demo就可以正常跑通了，接下来说一下页面目录结构：
pages——im：这个文件就是im的所有页面总目录，里面包含一个会话页面(conversation)、一个会话列表页面(conversation-list)，在会话页面的js中有一个获取表情的接口，需要自行替换一下接口地址
pages——test：这个页面是小弟模拟的一个用户列表和进入我的消息(也就是会话列表）的页面，页面样式简单大气~~，在这个页面里面的js中有一个添加好友的接口，需要自行替换，因为要和xx人聊天，这两个用户必须是好友才行

注意事项：

IM中需要用到的userID，小弟直接就是用的小程序的openID来对应的，因为具有唯一性，但是userID也不是必须使用openID，如果有特殊需求，userID也可以自己来生成，使用任何规则都可以，只要不重复就可以
userID和userSig必须是对应的，userSig是通过userID生成的
后台需要支持的三个接口：导入用户接口、生成userSig接口、添加好友接口，在本示例中导入用户接口和生成userSig接口让后台合并成了一个接口，在生成userSig前，就会先执行导入用户接口，因为没有导入用户，就没有办法执行后续的操作（这三个接口都是腾讯云提供的接口，直接调用即可，接口文档在腾讯云平台即时通信IM里）
在进入会话或者会话列表页面之前，必须已经执行完了IM登录完成才可以，也就是想要用IM的任何功能前都必须是登录状态，不然会报错
因为我把IM的引入全部都放到了tim.js中，然后将TIM、tim方法通过module.exports导出，所以在其他页面要用到SDK的时候需要在对应SDK方法前加上imCommon：
例如官方的SDK调用写法是这样式的：TIM.EVENT.CONVERSATION_LIST_UPDATED、tim.on()
那么咱们的写法是这样式的：imCommon.TIM.EVENT.CONVERSATION_LIST_UPDATED、imCommon.tim.on()

写的不好，欢迎各位大佬提提意见~

微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能相关推荐

如何实现消息功能_小程序中如何实现即时通信聊天功能
微信小程序是现在应用比较广的流量平台之一,当流量越来越多时,就需要在小程序中接入即时通信聊天功能来实现更好的流量变现转化,那么小程序中如何接入实现即时通信聊天功能呢? 什么是即时通信聊天功能即时通信聊 ...
微信小程序-腾讯云即时通信 IM 小程序直播(一)
一.这里我们先讲讲使用腾讯云直播流程请先将1.2.3的都去简单的过一遍就是组件的参数了解一下 1.准备推流跟拉流地址 (登录腾讯云在控制台在直播工具箱找到创建推流跟拉流)推流跟拉流的地址是不 ...
基于Android的聊天软件，Socket即时通信,实现用户在线聊天
基于Android的聊天软件,Socket即时通信,单聊,聊天室,可自行扩展功能,完善细节. [实例功能] 1.运行程序,登录界面, 注册账号功能 2.进入主界面,有通讯录, 个人信息. 3.点击好友 ...
小程序中如何实现即时通信聊天功能？
项目背景:小程序中实现实时聊天功能一.服务器域名配置配置流程配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
即时通信和实时通信的区别
即时通信(im)和实时通信(声网Agora.io)都是一套网络通信系统,其本质都是对信息进行转发.其最大的不同点,是对信息传递的时间规定.二者的区别可以从以下几个方面: 一.场景常见的即时通信场景包 ...
腾讯 Omi 团队发布 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀
写在前面原生小程序插上 JSX .Less 和 Cloud 的翅膀 mps 是什么?为什么需要 mps?先列举几个现状: 目前小程序开发使用最多的技术依然是原生小程序原生小程序的 API 在不断完 ...
微信小程序导航：免费视频+精品教程+DEMO集合（长期更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
第八章 Android 原生程序开发与逆向分析（五）（原生 C 程序逆向分析）
文章目录原生 C 程序逆向分析编译原生 C 程序 for 循环分支结构 for1() for2() while 循环分支结构 dowhile() whiledo() if--else 分支结构 i ...
腾讯TIM实现即时通信 v3+ts实践
目录初始化sdk 功能描述初始化准备 SDKAppID 调用初始化接口监听事件发送消息创建消息创建文本消息登录登出功能描述登录登出销毁登录设置获取会话列表功能描述获取会 ...

微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能

微信小程序——原生小程序即时通信IM demo，包含聊天、表情、语音、图片、会话列表功能相关推荐

最新文章

热门文章