微信小程序云开发实现一对一聊天

微信小程序云开发实现一对一聊天

这篇文章是第一篇写的，现在已经进行了更新，可以点此进行查看

有的时候小程序可以会涉及到聊天，评论的等功能，像博客，外卖平台等。这篇文章就先介绍的怎样借助云开发实现即时一对一，不同场景的聊天的功能。

首先要创建创建一个新的云开发的小程序。我们可以借助云开发的即时通信模板来实现我们自己的功能。如果你不知道云开发怎么使用，可以去查看开发文档。

1. 会看到控制台出现了开始监听等信息，这是利用的 Collection.watch。具体可以参考文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/collection.watch.html
2. 只有利用watch监听集合中符合查询条件的数据的更新事件从而实现实时的功能。
3. 我们在首先在云数据库创建集合chatroom，以便存储我们发的内容。点击云开发，点击数据库在点击+号输入集合名称，点击确定

发现，不管也有几个账号，只要发送内容都会进入这一个聊天室。那如果我们想根据不同的环境进入不同的聊天室或者我们如何实现一对一的操作。接下来的讲解对于新手来说比较简单，因为看完可以直接套用到自己的小程序上。大神可以自动忽略。

首先我们先寻找为什么我们多账号发的消息进入了一个聊天室，是不是有唯一指定的id。我们首先从数据库出发。我们连续发送几条消息在集合中查看各个记录的字段


根据他们的字段名称，对比这几个记录我们发现，_id _openid avatar nickName 等都是用户的信息，msgType 我们可以发现这个字段记录的是我们发送的是文字还是图片，即text/image sendTime sendTimeTS很明显能看出他们是发送内容的时间。然后textContent是我们的消息内容。 这样分析以来，只有groupId我们不知道是干什么的，因此我们就从英文上猜测他是这个聊天室的id。因此我们将字段值复制（groupId），回到程序我们全局搜索计划任务

具体是哪一个我们并不知道，我们可以查看他们所在的路径，明显的看到6 是一个变量的赋值，然后我们在回想我们进入聊天室的过程，我们发现聊天的界面就是6的路径，因此我们双击打开

我们打开room.js 找到data可以发现

chatRoomGroupId的值是demo，这和我们刚才集合中字段的值一摸一样，因此我们猜测他就是定位聊天室的唯一id。如果我们将这个值修改为demodemo，就会发现我们刚才发的内容不见了，重新发送几条消息，在数据库中groupId的值变成了demodemo.

因此我们确定了聊天室的唯一标识符groupId 剩下的事情就好办了，我们只要给该变量赋值，就可以解决我们开头提到的问题，一对一的聊天和不同的聊天室。一对一即确定将groupId的值用两个用户的openid或者唯一标识赋值即可。
那我们如何给groupid赋值呢，

我们可以看到我们是在room.js中，那我们怎么到达的room.js呢。返回即可发现我们是在im中进入
我们可以看到进入聊天室的按钮可以跳转到刚才的聊天界面，那我们就像能不能通过传参的方式给chatRoomGroupId 赋值以便实现给groupid赋值，当然可以。

因此我们就在点击按钮的时候传值，以便实现用户可以根据场景进入不同的聊天室。

在这里我们不采用他的这种跳转方式，我们采用button,更灵活。我们创建三个button,给他们的data-id即我们groupid的名字。go是按钮相应的函数。

这样我们就实现了跳转到room页面传递参数，接下来是赋值。我们在room.js中将chatroomgroupid赋空

在room.js中我们添加下列语句

从而实现赋值功能，接下来让我们测验一下。点击chat1 我们会发现 输入内容点击chat2输入内容，这已经是两个聊天室了。这里的chat1 chat2 只是一个名字，就相当我们微信的工作群和家庭群一样。我们可以通过其名称来进入不同的聊天室。

我们也可以通过点击头像，触发刚才的go函数，给data-go赋值唯一的标识符进入一对一的聊天室。比如像：我们在刚才的im.wxml页面

添加image控件，模拟用户头像。实现点击一对一聊天。**那么我们就要通过数据库获取我的账号_openid和头像用户的_openid,作为聊天室的唯一标识符，从而实现一对一的聊天。**这里image的data-id 用js中模拟的变量name来传递点击编译后我们就可以实现了



今天我们的聊天功能就到这里了，如果有不明白的同学关注我的公众号 **【一只拒绝穿格子衫的程序猿】 **。我都尽量帮大家解答。这是我的第一篇文章，写的比较至白，但对于新手来说是最简单的实现方式了。
如果有其他想学的功能，各位也可以在公众号后台回复哦，有不好的地方大家也可以指出来。

https://mp.weixin.qq.com/s/BLsVUU3iwJbAzpVOROFLCQ

公众号：一只拒绝穿格子衫的程序猿