前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序之实时聊天系统——页面介绍

微信小程序之实时聊天系统——页面介绍

作者头像
淼学派对
发布2023-10-14 10:49:38
5160
发布2023-10-14 10:49:38
举报
文章被收录于专栏:云开发小程序1

欢迎大家观看本系统的详细视频教程:

腾讯云开发小程序之实时聊天系统_哔哩哔哩_bilibili

系统结果展示:

 系统的页面说明:

1.我们首先再app.json中创建四个tabBar页面(消息、联系人、用户列表、我的)

2.消息页面:

实现了我们每一组好友添加完成之后,显示好友之间的最新的聊天内容以及,聊天的时间和一个昵称的渲染显示

3.联系人页面:

实现了我们添加好友之后我们再联系人页面的好友渲染显示,以及在联系人页面的最上面有一个新的朋友的跳转按钮,实现一个“主动邀请申请好友方”向“被动邀请好友方”的一个等待“被动邀请好友方”的同意申请操作!

最上面我们添加了一个新的朋友的页面,此页面是存放我峨嵋你主动添加好友像被动邀请好友的哪一方的邀请消息,并为被动添加那一方的好友做一个是否同意申请的选择按钮:

 如果我们被动的那一方同意了我们的好友申请,那我们的数据库中的判断是否为好友的变量值就会相应的改变成一个true的状态,并且我们的这组好友将会在我们的用户列表、消息页面中相应的做一个渲染操作,并显示在我们的页面中!

4.用户列表页面:

实现了我们但凡是在本小程序中登录过或者是注册自动登录过的用户,都会在用户列表中相应的渲染出来!达到一个让我们所有用户可以看到那些活跃用户等!

最上面有一个搜索框,它可以实现我们一个模糊搜索的功能,就是说如果我们本小程序的注册的用户越来越多的话,我们不可能一直用手动一个一个去翻页面的形式去查找我们的一个想去添加的好友,搜索我们在此页面上又创建了一个搜索功能模块,当我们点击搜索的输入框的时候,我们会给他来一个跳转到我们相对应的搜索页面:

当我们按照昵称来搜索时,就会给我们相应的给出我们想要添加为好友的用户的头像、昵称、以及账号!

5.我的页面:

实现了我们的用户数据库的查找以及获取请求,并实现了一个相对的渲染显示我们的用户的账号、密码、头像的过程!

并且在本页面实现了一个相应的切换用户的跳转按钮,我们可以通过此按钮来,切换我们的账号,这样就达到了我们可以实现一个微信授权之后,我们可以用这个授权微信来注册多个我们小程序中的账号用户!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 系统结果展示:
  •  系统的页面说明:
  • 1.我们首先再app.json中创建四个tabBar页面(消息、联系人、用户列表、我的)
    • 2.消息页面:
      • 3.联系人页面:
        • 4.用户列表页面:
          • 5.我的页面:
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档