借助云开发,利用订阅消息,云函数路由实现小程序好友一对一聊天,添加好友等仿微信功能

微信小程序借助云开发,利用订阅消息,云函数路由实现小程序好友一对一聊天,添加好友等仿微信功能

这篇文章已经进行了更新,请点此进行查看

仿微信好友聊天

之前的两个文章,一个是订阅消息的实现,一个是借助腾讯云开发本身的demo实现的聊天功能。可能部分代码逻辑有些不完善,有点欠缺。因此本篇文章就将两者结合,实现了一个简单的仿微信聊天工具。

点此获取源码

主要功能有

  1. 一对一聊天
  2. 搜索、添加好友(前提是必须注册,通过手机号码或者一个id进行唯一确定)
  3. 添加好友的时候,会调用微信订阅消息。
  4. 当添加好友的请求成功时,会向请求人发送订阅消息(订阅消息的模板我是随便用的)
  5. 一方添加成功,另外一方也添加成功。
  6. 点击好友,即可进入好友主页,查看好友的信息,并实现1V1聊天

后续可能补充功能

  1. 模糊搜索,不仅仅支持手机号搜索,像昵称搜索也可以
  2. 拒绝添加好友的时候,也通过微信订阅消息进行反馈
  3. 好友的个人主页,修改好友的备注昵称等信息
  4. 聊天界面的美化

以上所有的设计到数据库的操作都是借助云函数路由来实现的(类似于我们C熟悉的switch-case功能)

详细介绍

所用到的数据库集合有:
在这里插入图片描述
所用到的云函数:只有一个:yunrouter
在这里插入图片描述
代码实现的基本目录:
在这里插入图片描述
Style中放的是一些wxss和基本的配置文件,引用即可
在这里插入图片描述
im是主要的好友列表,room和components是实现基本的聊天功能(即怎么聊天,一些基本的配置可以参考我的第一篇文章)haoyoupage(就是好友主页)

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

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

具体的请求方式是:利用手机号搜索,检索在user表中,用户的phone信息,如果已经有了该好友,则会提示已经添加好友。如果没有该好友就会提示授权订阅消息,方便等对方同意给自己发送订阅消息,告知结果。注意添加好友按钮必须用真机调试,因为涉及到订阅消息

在这里插入图片描述

点击允许即可。在号码注册是为1 的微信中,进入聊天页面即可看到好友请求
在这里插入图片描述
点击拒绝,即可拒绝。如果点击接收,那么就会添加成功,并会给请求方发送订阅消息:点击接收后,接受方页面:
在这里插入图片描述
请求方页面:

进入程序,即可展现好友在下方的界面。
如果是重复添加就会出现
在这里插入图片描述
再次点击好友即可进入好友主页:
在这里插入图片描述
点击聊天参与聊天:

在这里插入图片描述

一开始点击好友列表的时候必须进行注册:跳到login界面校区和号码是必须填写的。
在这里插入图片描述
以上的大多功能我在代码中都注释了,大家只要会云开发, 肯定能读懂云函数路由中的代码。

注意

1 下载完源码后,除了将所有的云环境进行修改,还要在云函数中安装最新的tcb-router,终端打开安装即可(命令是:npm install --save tcb-router)
2
在这里插入图片描述
是自己的小程序申请的模板id,见第二篇文章即可。一定要对照申请的格式,否则订阅消息不能发送。

3
在这里插入图片描述
这是云函数中,单纯的订阅与发送订阅消息的两个函数,见主页的订阅消息;

4 我的云开发环境是code-test(大家要修改成自己的开发环境,或者可以新建一个code-test环境也可以)数据库四个集合,权限我都设置成了
在这里插入图片描述
5 好友添加我是借助的数据,往数组中追加push元素。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程大白~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值