如何在微信小程序里实现聊天室功能？

准备工作

下载环信小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹，将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件，文件目录说明

集成

登录环信没什么可说的，这里选择的是使用 username/password 登录，和demo中的一样，文件没有进行任何更改

在app.js 中注册的 WebIM.conn.listen, 然后在登陆成功的回调 onOpened 设置的跳转页面，并将登陆的 username 赋给 myName，传到新的页面中使用

修改 roomlist.js 获取聊天室列表，是分页获取的，这里先偷个懒，获取了第一页 20 个聊天室

然后将listChatrooms() 分别在onLoad、onShow 内，更改下，将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的变量绑定名称

demo中的group.js 中，获取到的是当前登陆账号已加入的群组，咱们做的是聊天室功能，所以需要有一个加入的操作，找roomlist.js 中找到 into_room: function (event)，然后填写加入聊天室的方法，我是直接在当前这个里面加的跳转到聊天页面，并将当前登陆的IDmyName，聊天室IDgroupID，聊天室名称your 传给新页面

Ex：监听是否加入聊天室成功的回调是在 onPresence 中，type:memberJoinChatRoomSuccess，正常是监听这个回调跳转页面，有点麻烦就直接这样吧到会话页面后，需要修改一下对应的消息格式，在comps/chat/suit 目录下，将里面的文件对应的 js 文件根据文档给聊天室发送消息格式进行修改，聊天室消息和群组消息不同，所以我目前是直接将getSendToParam()、isGroupChat() 注释，改成下面这样，demo 中下面还有代码的，这里就用 …… 代替了

就这样了，简单集成聊天室功能，demo中的UI 是开源的，可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了，有需要的兄弟自取。demo下载地址：https://github.com/lizgDonkey/room-xcx

如何在微信小程序里实现聊天室功能？相关推荐

微信小程序实现websocket聊天室
在微信小程序中建立聊天室. 目录一.在web项目中导入javax.websocket-api-1.0-rc4.jar包二.编写支持websocket的controller类三.在微信小程序中编写 ...
微信小程序WebSocket实现聊天对话功能完整源码
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序 swoole简单聊天室
第一步在linux创建php即时通讯文件 <?php //服务器代码 //创建websocket 服务器 $ws = new swoole_websocket_server("0.0. ...
微信小程序一个简单聊天室
cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({/*** 页面的初始数据*/data: {nickname:'',a ...
微信小程序里的block
1 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性. 2 因为wx:if是一个控制属性,需要将它添加到一个标签上.如果要一次性判断多个组件标签,可以使用标签将多个组件包 ...
uni-app 微信小程序客服聊天和发送页面卡片功能
微信小程序客服聊天和发送页面卡片功能实现步骤如下: (一):首先登录微信公众平台 :https://mp.weixin.qq.com/ 登录成功后找到----->功能-----> 客服-- ...
微信小程序上传图片到html,在微信小程序里上传图片
在微信小程序里上传图片. 上传图片 JS//index.js Page({ data:{ tempFilePaths:[], uploadLinks:[], }, uploadImg() { var ...
关于uniapp开发微信小程序，实现聊天消息，最新消息最底部展示
关于uniapp开发微信小程序,实现聊天消息最新消息最底部展示实现消息最底部展示 uniapp\vue 页面布局此处我觉得最要注意的点就是看是谁产生的滚动条. 逻辑书写关键字: scrollTo ...
微信小程序实现下拉框功能
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML <view class='select_box'><view ...

如何在微信小程序里实现聊天室功能？

如何在微信小程序里实现聊天室功能？相关推荐

最新文章

热门文章