微信小程序——原生小程序即时通信IM demo,包含聊天、表情、语音、图片、会话列表功能
前言:最近项目需求要在小程序中添加一个即时通信IM的功能,本来想自己开发一个…评估了一下团队实力后,并不允许,所以找了一个IM第三方框架,采用的是腾讯云的即时通信IM,但是目前腾讯云IM的小程序SDK并没有包含UI,因此就需要自己来开发页面样式和交互,腾讯云IM自己也提供了一个deom,但是使用mpvue框架写的。。。网上是一片骂声。。。我也没有使用他的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()
写的不好,欢迎各位大佬提提意见~
更多推荐
已为社区贡献3条内容
所有评论(0)