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

这篇文章是第一篇写的,现已对小程序进行了大改版,可以点此进行查看

源码获取方式:请看底部CSDN推荐的公众号

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

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

  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来传递点击编译后我们就可以实现了


微信小程序云开发实现一对一聊天相关推荐

  1. 微信小程序云开发实现一对一即时聊天,发送语音、文件、图片、朋友圈、添加好友等功能

    点此源码获取 前几篇博文 前几篇文章实现了,利用云开发的即时通信demo做的仿照微信好友聊天. 本篇文章主要在前几篇的基础上进行的修改,实现 即时一对一聊天,群聊天,发送文件图片,发送语音,更换聊天背 ...

  2. 微信小程序云开发-树洞小程序Treehole(介绍)

    记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...

  3. 微信小程序云开发入门实践

    云开发介绍 什么是云开发 2017年微信小程序发布后,一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要 ...

  4. python操作微信小程序云端数据库_微信小程序云开发之数据库操作

    本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...

  5. 微信小程序云开发不完全指北

    微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...

  6. python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...

    微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序 浏览量:1120 时间:2020-04-06

  7. 微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发

    微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...

  8. 基于微信小程序云开发(校园许愿墙app)2.0稳定版,以发布上线

    大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...

  9. 微信小程序云开发实战:网上商城(二)

    微信小程序云开发实战:网上商城(二) 主页面 入口页面 云函数与云数据库 代码实现 云端实现 小程序端实现 选择UI组件库 WeUI Vant 整合UI组件库 以扩展包的方式引入weui 接下来 主页 ...

  10. php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...

    微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...

最新文章

  1. python使用matplotlib可视化不同年份、不同项目的均值(mean)对比条形图(bar plot comparision of mean with different years)
  2. 美国重夺超算“头把交椅”,专家建议中国加快E级超算研制
  3. python中进制chr_python中的chr() 如何返回字符?
  4. boost::spirit模块实现使用单个融合序列来生成不同序列中元素的输出的测试程序
  5. (完全二叉树编号)小球下落
  6. MITRE 发布 2020 CWE Top 25 榜单
  7. 前年的斐波那契蹲在地上看着你,笑而不语
  8. 使用drawBitmapMesh扭曲图像
  9. 【React Native 安卓开发】----(View实战之仿携程)【第三篇】
  10. python数据分析收获与心得体会_初次数据分析--我的心得体会
  11. 酒店服务机器人或被用于长期偷窥旅客
  12. 冰点还原离线激活_冰点还原密钥,小编告诉你如何激活冰点还原
  13. 关系数据库标准语言SQL——详解版2
  14. 三星证实遭黑客入侵:Galaxy手机源代码泄露
  15. MySQL复合索引(联合索引)原理分析及使用
  16. 3D数据---未来数字世界的物质基础
  17. 如何用JAVA写acm_用java来写ACM
  18. 秋色园QBlog技术原理解析:UrlRewrite之URL重定向体系(四)
  19. 会议室日程安排问题(python贪心算法)
  20. 用Python实现栅格计算器中的Con和Power

热门文章

  1. 计算机原理及应用教学大纲,《单片机原理及应用技术》课程教学大纲
  2. 火力发电计算机控制参数详细过程,火力发电过程
  3. 新人必看第一帖,BT3和BT4傻瓜版使用!附:BT4中文版下载
  4. 猎豹java数据结构,猎豹网校C++数据结构与算法42讲视频教程
  5. Web漏洞扫描器—AppScan
  6. 最强整理!Android攒了一个月的面试题及解答,震撼来袭免费下载!
  7. Maximum call stack size exceeded 如何解决?
  8. 2018年腾讯笔试题(今年更难了)
  9. 《windows 鼠标指针文件 学习笔记》
  10. SD-Host 控制器设计