微信小程序云开发实现一对一聊天功能-金沙1005

微信小程序云开发实现一对一聊天功能_微信小程序云开发收费微信小程序云开发实现一对一聊天有的时候小程序可以会涉及到聊天,评论的等功能,像博客,外卖平台等。这篇文章就先介绍的怎样借助云开发实现即时一对一,不同场景的聊天的功能。首先要创建创建一个新的云开发的小程序。我们可以借助云开发的即时通信模板来实现我们自己的功能。如果你不知道云开发怎么使用,可以去查看开发文档。会看到控制台出现了开始监听等信息,这是利用的collection.watch。具体………

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

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

  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来传递点击编译后我们就可以实现了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

js555888金沙老品牌的版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由思创斯整理,转载请注明出处:https://ispacesoft.com/120465.html

(0)

相关推荐

  • 微信小程序分包示例怎么弄_小程序独立分包前言:小程序比较大都会使用分包,那么就出现了主包和分包;主包:默认加载/启动的页面。分包:划分了待加载的页面,也就是进去分包的某个页面才会下载分包(分包可以分多个)。问:如果不分包呢?答:不分包的话全部文件大小加起来不能超过2m,可以分成多个包每个包不超过2m总体不超过12m就行。整个小程序所有分包大小不超过12m单个分包/主包大小不能超过2mps:以下是目录结构和分包代码…

    2022年11月26日
  • 微信小程序授权登录实现方案_小程序怎么授权登录微信小程序授权登录实现

  • 微信幸运转盘小程序制作_自定义转盘小程序微信小程序项目实例——幸运大转盘文章目录微信小程序项目实例——幸运大转盘一、项目展示项目代码见文字底部,点赞关注可私发代码一、项目展示幸运大转盘是一个简单的抽奖小程序参与用户点击抽奖便可抽取轮盘的奖品…

    2022年12月27日
  • 【系】微信小程序云开发实战坚果商城-商城项目搭建「终于解决」第2-1课:商城项目搭建1准备工作已经申请小程序,获取小程序appid在小程序管理后台中,设置的开发设置下可以获取微信小程序appid。2新建项目这里我们已经不需要官方的模板,将其官方给的图片和模板删除。项目重命名,文件夹和project.config.json对应即可3app.json配置文件修改修改app.json全局的默认窗口配置”win…

  • 微信小程序上传图片到阿里云微信小程序上传图片到阿里云

    2022年11月18日
  • 小程序反编译 分包_超简单的反编译微信小程序教程看了很多反编译、找回微信小程序源码很多教程,各种问题导致都没法正常使用。微信版本升级后,会遇到各种报错,以及无法获取到wxss分包无法反编译的问题。于是寻找资料,也买过别人的激活成功教程工具,最终解决文件缺失和分包问题,而且无意中发现还能获取小游戏的源码,于是和大家分享下。一、在这里获取小程序的.wxapkg包我就不多介绍了方法一:电脑安装已经root的模拟器安装微信和re文件浏览器运行小程序后…

  • 一、前言有时候我们想看自己产品的竞品,看到人家上线的小程序的效果,纯靠推测,部分效果在绞尽脑汁后能做出大致的实现,但是有些细节,费劲全力都没能做出来。很想一窥源码,查看究竟,看看大厂的前端大神们是如何规避了小程序的各种奇葩的坑。于是就想到获取到小程序地源文件,然后再对其进行反编译还原为源代码,来作为学习参考。我百度了各种关于小程序地反编译教程,但是感觉都不太适合像我这样地初学小白,踩了挺多坑…

  • 累计独立访客数怎么算_我的访客小程序累计独立访客(uv)不低于1000是什么意思首先微信小程序“累计独立访客(uv)不低于1000”是指uv是uniquevisitor的英文缩写,1天内相同的访客多次访问您的网站只计算1个uv,以cookie为依据。简单的说就是指:累计的不同ip的访客合计达到1000 才能开通流量主登录小程序管理后台(https://mp.weixin.qq.com/),然后如下图所示操作步骤查看。提高uv的操作提示1、先开发小程序,小程序需要有亮点,这样别人才更好去点击查看;2、流量主开通的条件是

发表回复

您的电子邮箱地址不会被公开。

联系金沙1005

关注“java架构师必看”公众号

回复4,添加站长微信。

附言:ispacesoft.com网而来。

关注微信
网站地图