微信小程序仿微信好友聊天工具实现教程:一对一聊天、添加好友功能详解

2025-01-12
来源:网络整理

微信小程序是借助云来开发的,利用订阅消息和云功能路由来实现类似微信的功能,如与小程序中的好友一对一聊天、添加好友等。

本文已更新,请点此查看仿微信好友聊天

前面两篇文章,一篇是订阅消息的实现,一篇是借助腾讯云自带的demo实现的聊天功能。也许有些代码逻辑不完善、缺乏。因此,本文结合两者来实现一个简单的类似微信的聊天工具。

单击此处获取源代码。主要功能包括一对一聊天搜索、添加好友(前提是注册,由手机号或ID唯一确定)。添加好友时,会调用微信订阅消息。当添加好友的请求成功后,会向请求者发送一条订阅消息(我随便用了订阅消息的模板)。如果一方添加成功,则另一方也添加成功。点击好友即可进入好友主页,查看好友信息,并实现1V1聊天中后期可能补充的模糊搜索。不仅支持手机号码搜索,还支持昵称搜索。添加好友时,您还可以拒绝添加好友,也可以通过微信订阅消息进行反馈。好友个人主页,修改好友备注、昵称等信息,美化聊天界面

以上所有针对数据库设计的操作都是借助云函数路由来实现的(类似于我们在C语言中熟悉的-case函数)

详细介绍

使用的数据库集合是:

使用的云功能:只有一个:

代码实现的基本目录:

中间放的是一些wxss和基本配置文件,引用即可。

im主要是好友列表,房间,都是实现基本的聊天功能(就是如何聊天,一些基本的配置可以参考我的第一篇文章)(就是好友主页)

代码实现-图片及部分解释:

微信开发程序编程_微信开发小程序开发_c开发微信小程序聊天

好友请求是:使用im.js中的调用函数检查是否有请求。

具体请求方法为:使用手机号码在用户表中查找并检索该用户的信息。如果已经有好友,会提示好友已添加。如果没有该好友,系统会提示您授权订阅消息,以便您等待对方同意向您发送订阅消息并通知您结果。注意,添加好友按钮必须在真机上调试,因为涉及到订阅消息。

只需单击“允许”即可。在注册号码为1的微信中,进入聊天页面,可以看到好友请求:

单击“拒绝”即可拒绝。如果点击接收,则添加成功,并向请求者发送订阅消息: 点击接收后,接收者页面:

请求者页面:

进入程序后,您可以在下面显示您的好友界面。

重复添加就会出现

再次点击好友,进入好友主页:

点击聊天参与聊天:

微信开发程序编程_微信开发小程序开发_c开发微信小程序聊天

一开始点击好友列表时必须注册:跳转到界面,校园和号码必须填写。

上面的大部分函数我都在代码中注释掉了。只要大家懂得云开发,就一定能够看懂云函数路由中的代码。

注意

1 下载源码后,除了修改所有云环境外,还必须在云功能中安装最新的tcb-。只需打开终端并安装(命令是:npm --save tcb-)

是您自己的小程序申请的模板ID,请参见第二条。请务必检查请求的格式,否则订阅消息无法发送。

这就是云函数中的两个功能,简单订阅和发送订阅消息。查看首页订阅消息;

4 我的云开发环境是code-test(需要修改为自己的开发环境,也可以新建一个code-test环境)。有四个数据库集合,我已将权限设置为

5. 当朋友添加我时,我使用数据将推送元素追加到数组中。

分享