微信小程序是借助云来开发的,利用订阅消息和云功能路由来实现类似微信的功能,如与小程序中的好友一对一聊天、添加好友等。
本文已更新,请点此查看仿微信好友聊天
前面两篇文章,一篇是订阅消息的实现,一篇是借助腾讯云自带的demo实现的聊天功能。也许有些代码逻辑不完善、缺乏。因此,本文结合两者来实现一个简单的类似微信的聊天工具。
单击此处获取源代码。主要功能包括一对一聊天搜索、添加好友(前提是注册,由手机号或ID唯一确定)。添加好友时,会调用微信订阅消息。当添加好友的请求成功后,会向请求者发送一条订阅消息(我随便用了订阅消息的模板)。如果一方添加成功,则另一方也添加成功。点击好友即可进入好友主页,查看好友信息,并实现1V1聊天中后期可能补充的模糊搜索。不仅支持手机号码搜索,还支持昵称搜索。添加好友时,您还可以拒绝添加好友,也可以通过微信订阅消息进行反馈。好友个人主页,修改好友备注、昵称等信息,美化聊天界面
以上所有针对数据库设计的操作都是借助云函数路由来实现的(类似于我们在C语言中熟悉的-case函数)
详细介绍
使用的数据库集合是:
使用的云功能:只有一个:
代码实现的基本目录:
中间放的是一些wxss和基本配置文件,引用即可。
im主要是好友列表,房间,都是实现基本的聊天功能(就是如何聊天,一些基本的配置可以参考我的第一篇文章)(就是好友主页)
代码实现-图片及部分解释:
好友请求是:使用im.js中的调用函数检查是否有请求。
具体请求方法为:使用手机号码在用户表中查找并检索该用户的信息。如果已经有好友,会提示好友已添加。如果没有该好友,系统会提示您授权订阅消息,以便您等待对方同意向您发送订阅消息并通知您结果。注意,添加好友按钮必须在真机上调试,因为涉及到订阅消息。
只需单击“允许”即可。在注册号码为1的微信中,进入聊天页面,可以看到好友请求:
单击“拒绝”即可拒绝。如果点击接收,则添加成功,并向请求者发送订阅消息: 点击接收后,接收者页面:
请求者页面:
进入程序后,您可以在下面显示您的好友界面。
重复添加就会出现
再次点击好友,进入好友主页:
点击聊天参与聊天:
一开始点击好友列表时必须注册:跳转到界面,校园和号码必须填写。
上面的大部分函数我都在代码中注释掉了。只要大家懂得云开发,就一定能够看懂云函数路由中的代码。
注意
1 下载源码后,除了修改所有云环境外,还必须在云功能中安装最新的tcb-。只需打开终端并安装(命令是:npm --save tcb-)
是您自己的小程序申请的模板ID,请参见第二条。请务必检查请求的格式,否则订阅消息无法发送。
这就是云函数中的两个功能,简单订阅和发送订阅消息。查看首页订阅消息;
4 我的云开发环境是code-test(需要修改为自己的开发环境,也可以新建一个code-test环境)。有四个数据库集合,我已将权限设置为
5. 当朋友添加我时,我使用数据将推送元素追加到数组中。