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

news/2024/11/25 11:03:08/

目录

系统结果展示:

 系统的页面说明:

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

2.消息页面:

3.联系人页面:

4.用户列表页面:

5.我的页面:


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

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

系统结果展示:

 

 

 系统的页面说明:

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

2.消息页面:

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

3.联系人页面:

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

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

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

4.用户列表页面:

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

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

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

5.我的页面:

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

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

关注我,学习更多开发知识!


http://www.ppmy.cn/news/6102.html

相关文章

【C++】PCL对大容量点云进行体素降采样

文章目录0.引言1.普通体素降采样2.OcTree体素降采样0.引言 \qquadPCL的体素滤波器如果对超大容量点云进行降采样,要求降采样后的格点数目必须在整型的范围,不然就会报[pcl::VoxelGrid::applyFilter] Leaf size is too small for the input dataset. Inte…

整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

目录 一、关于 sockjs-client 依赖包 二、关于 highlight 依赖包 三、关于 swiper 依赖包 四、IE 不支持 ES6 语法 五、第三方插件引入导致 六、本地环境正常,生产环境仍旧白屏 这篇文章主要介绍了 Vue 项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 …

7、操作系统之间的文件传输

Windows 与 Linux 在Windows与Linux中传输文件的常用方式有两种,一种是使用使用XFTP工具,另一种是使用rz sz 命令的方式进行 lrzsz 安装 yum install lrzsz -y 1)rz 将文件从window上传到Linux 2)sz 将文件从linux传输到window …

stm32cubemx hal学习记录:电机控制

一、基础配置 1、配置RCC、SYS,SYS的Timebase Source选择TIM6 2、配置USART1、时钟84MHz 3、激活FreeRTOS,选择CMSIS_V1,Config parameters种USE_TIMERS选择ENABLE 二、编码器及电机驱动引脚配置 1、选用TIM3的编码器模式 2、驱动使用L2…

react-router-dom 降低版本的两种方法

前言 react-router-dom 如今已经升级到了 V6 版本,相比较 V5 版本,变化还是挺大的。如今使用 npm install react-router-dom -S 命令来下载 react-router-dom ,会自动下载 V6 版本, V6 版本会在接下来的一段时间内成为主流。不过…

Coinbase或在不久使用Zebec发放工资,并对Web3支付赛道发展寄予厚望

流支付协议Zebec Protocol目前已经完成了生态向BNB Chian上的迁移,目前得到了以PancakeSwap为代表的头部生态的支持。在12月20日Zebec生态在PancakeSwap官方的支持下,经过社区投票,ZBC通证上线了糖浆池,并有望继续上线Binance。而…

机器学习算法基础——决策树

文章目录决策树算法的定义发展历程适用范围及其优缺点适用范围优点缺点代码实现决策树算法的定义 决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来求取净现值的期望值大于等于零的概率,评价项目风险&…

小程序02/小程序 响应式单位rpx 、image组件概念说明 和 mode属性介绍

一. 响应式单位rpx rpx 说明 rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx 100% 屏幕的宽度 750rpx rpx响应单位 rpx是微信小程序独有的,解决屏幕自适应的尺寸单位 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750…