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

news2024/11/18 3:32:42

目录

系统结果展示:

 系统的页面说明:

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

2.消息页面:

3.联系人页面:

4.用户列表页面:

5.我的页面:


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

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

系统结果展示:

 

 

 系统的页面说明:

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

2.消息页面:

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

3.联系人页面:

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

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

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

4.用户列表页面:

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

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

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

5.我的页面:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/111367.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

buildroot 勾选alsa - utils编译后未 /bin 包含

alsa-lib 这个库在 buildroot 已经默认编译进去我们可以不用管,我们只需要使能 alsa-utils 就 行了,还是在 buildroot 的源码目录下,运行以下命令进入图形化界面配置:make menuconfig 按照以下路径进入配置我们的 alsa-utils&…

【SpringMVC】请求参数的绑定

1.绑定说明 1.1 绑定的机制 我们都知道&#xff0c;表单中请求参数都是基于 keyvalue 的。SpringMVC 绑定请求参数的过程是通过把表单提交请求参数&#xff0c;作为控制器中方法参数进行绑定的。 例如&#xff1a; <a href"account/findAccount?accountId10"&…

Vulnhub靶机:PWNOS_ 2.0 (PRE-RELEASE)

目录介绍信息收集网站探测漏洞发现提权搜寻数据库配置文件SSH爆破第2种打法网站探测Sql注入&#xff08;手工&#xff09;Sql注入&#xff08;sqlmap&#xff09;读取文件写入文件提权参考介绍 系列&#xff1a;pWnOS&#xff08;此系列共2台&#xff09; 发布日期&#xff1a…

【前端-React Native】移动端原生开发整合React Native Elements教程-安卓示例

目录一、移动开发和web开发的区别二、什么是React Native?三、如何实现安卓和IOS用一套代码开发四、React Native开发实战1. 安装Android studio2. 使用Expo创建工程3. 启动4. 使用UI框架React Active Elements5. 扩展&#xff1a;使用UI框架antd Design Mobile RN五、项目结构…

Hadoop综合项目——二手房统计分析(Hive篇)

Hadoop综合项目——二手房统计分析&#xff08;Hive篇&#xff09; 文章目录Hadoop综合项目——二手房统计分析&#xff08;Hive篇&#xff09;0、 写在前面1、Hive统计分析1.1 本地数据/HDFS数据导入到Hive1.2 楼龄超过20年的二手房比例1.3 四大一线城市各楼层地段的平均价格1…

没有基础转行学编程,靠谱吗?能找到工作吗?

在日常生活中&#xff0c;以及在知乎上&#xff0c;有很多人咨询职业生涯的抉择。他们大都对自己的职业现状不满意&#xff0c;打算学习编程成为一名程序员。 为什么想要做程序员&#xff1f; 答案五花八门&#xff0c;其中「工资高」「好找工作」「有职业发展」是很常见的理由…

代码质量管理平台实战| SonarQube 安装、配置及 JaCoCo、Maven 集成

SonarQube 是一个用于代码质量管理的开源平台&#xff0c;用于管理源代码的质量。同时 SonarQube 还对大量的持续集成工具提供了接口支持&#xff0c;可以很方便地在持续集成中使用 SonarQube。此外&#xff0c; SonarQube 的插件还可以对 Java 以外的其他编程语言提供支持&…

请求量太大扛不住怎么办?进来学一招

hello&#xff0c;大家好呀&#xff0c;我是小楼。 上篇文章《一言不合就重构》 说了我最近重构的一个系统&#xff0c;虽然重构完了&#xff0c;但还在灰度&#xff0c;这不&#xff0c;在灰度过程中又发现了一个问题。 背景 这个问题简单说一下背景&#xff0c;如果不明白…

数据结构之排序【直接插入排序和希尔排序的实现及分析】

引言&#xff1a; 今天天气还是依然的冷&#xff0c;码字越来越不容易了&#xff0c;本来上次写了一个比较好的引言&#xff0c;但是因为电脑第二天没电&#xff0c;并且我没有保存&#xff0c;现在找不到了&#xff0c;所以今天我们的引言就这样吧&#xff01;今天给大家介绍…

Zookeeper 4 Zookeeper JavaAPI 操作 4.3 Curator API 常用操作【添加节点】

Zookeeper 【黑马程序员Zookeeper视频教程&#xff0c;快速入门zookeeper技术】 文章目录Zookeeper4 Zookeeper JavaAPI 操作4.3 Curator API 常用操作4.3.1 添加节点4 Zookeeper JavaAPI 操作 4.3 Curator API 常用操作 4.3.1 添加节点 直接开始编写 测试方法 先写一下&a…

Web入门开发【五】- 线上部署

欢迎来到霍大侠的小院&#xff0c;我们来学习Web入门开发的系列课程。 首先我们来了解下这个课程能学到什么&#xff1f; 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML&#xff0c;CSS&#xff0c;JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编…

南卡与JBL蓝牙耳机哪款比较好?数码资深玩家带你深度评测了解

马上到来2023新的一年&#xff0c;不会还有人使用传统有线耳机吧&#xff1f;那你就属最落后的那位了&#xff0c;随着生活水平的提高&#xff0c;科技的快速发展&#xff0c;有线耳机逐渐被真无线蓝牙耳机所取代。现在走在马路上都能看见许多人佩戴着耳机&#xff0c;然而&…

机器学习 | 朴素贝叶斯

一.基本原理 基于条件独立的假设&#xff0c;先计算输入和输出的联合概率密度&#xff0c;然后根据所输入的x计算y的概率&#xff0c;然后选择具有最大后验概率的类作为它的类别 二.优缺点 优点 小规模数据集表现好&#xff0c;适合多分类对于在小数据集上有显著特征的相关对…

Scikit-network-02:载图

载图 在Scikit网络中&#xff0c;图形由其scipy的压缩稀疏行格式中的邻接矩阵&#xff08;或二部图矩阵&#xff09;表示。在本教程中&#xff0c;我们提供了一些方法来实例化此格式的图。 from IPython.display import SVGimport numpy as np from scipy import sparse impo…

SQL注入渗透与攻防(九)之布尔盲注

目录 1.什么是布尔盲注&#xff1f; 2.如何进行布尔盲注&#xff1f; 案列演示&#xff1a; 1.什么是布尔盲注&#xff1f; Web的页面的仅仅会返回True和False。那么布尔盲注就是进行SQL注入之后然后根据页面返回的True或者是False来得到数据库中的相关信息。 我们这里拿sql…

15Python文件操作

文件处理 01. 文件的概念 1.1 文件的概念和作用 计算机的 文件&#xff0c;就是存储在某种 长期储存设备 上的一段 数据长期存储设备包括&#xff1a;硬盘、U 盘、移动硬盘、光盘… 1.2 文件的存储方式 在计算机中&#xff0c;文件是以 二进制 的方式保存在磁盘上的 文本…

论文理解--DEEP COMPRESSION

原文链接&#xff1a; https://github.com/mit-han-lab/amc/security https://zhuanlan.zhihu.com/p/108096347 https://zhuanlan.zhihu.com/p/510905067 摘要 结论&#xff1a; 1、deep compression:由三阶段pipeline组成&#xff1a;pruning(剪枝)、 trained quantilization…

452页24万字智慧城市顶层设计及智慧应用解决方案

智慧城市总体设计 2.1 智慧城市核心技术 2.1.1 物联网 智慧城市是一个有机结合的大系统&#xff0c;涵盖了更透切的感知、更全面的互连&#xff0c;更深入的智能。物联网是智慧城市中非常重要的元素&#xff0c;它侧重于底层感知信息的采集与传输&#xff0c;城市范围内泛在网方…

无需调用Tecplot,PFC后处理技巧为你plot精美科研图

导读&#xff1a;PFC提供了非常美观的可视化处理的窗口—plot&#xff0c;用户可以在这里对模型的运行状态进行检查&#xff0c;也可以将Plot中的视图输出进行处理。一般来说plot中的图片质量足够用于常规的论文配图&#xff0c;当然用户也可以导出数据到tecplot中进行后处理&a…

【UE4 第一人称射击游戏】08-使用“AK47”发射子弹

上一篇&#xff1a; 【UE4 第一人称射击游戏】07-添加“AK47”武器 本节效果&#xff1a; 步骤&#xff1a; 1.在“Blueprints”文件夹内添加一个Actor蓝图&#xff0c;命名为“Projectile_Base”&#xff0c;该蓝图用于表示子弹 双击打开“Projectile_Base”&#xff0c;添加…