uni-app 即时聊天

项目介绍

前段时间在B站看到了有一个UP主在讲uni-app即时聊天的项目(逸刻时光),在看了这个视频之后,感觉还是挺有兴趣的,所以在看他的讲解视频之后,就自己动手写了这个即时聊天项目,在样式方面跟(逸刻时光)相比改动的地方还是比较多的,后端的是我使用的是node的koa框架,而(逸刻时光)的up主是使用express,个人觉得还是koa框架用起来比较好用,没有那么多的嵌套,可以使用async和await来解决回调地狱等,另外就是(逸刻时光)的up主更新这个项目是更新的比较慢的,所以前后端的很多问题都得自己去找资料解决,花的时间还是比较多的

更多文章请访问 深的个人博客

技术栈

前端

uni-app
weapp.socket.io

后端

node
koa
socket.io
mongodb

node中间件:
images(关于图片的一些操作,在这个项目中用到了图片压缩功能)
jsonwebtoken(生成token)
koa-bodyparser(解析参数)
koa-multer(上传文件)
koa-router(koa框架路由)
koa-static(静态资源)
koa2-cors(解决跨域)
nodemailer(邮件发送)

页面展示

以下照片均为真机测试时的截图

tarbar页面

在这里插入图片描述

聊天页

在这里插入图片描述

用户搜索-用户详情-用户请求-用户通知

在这里插入图片描述

群组

在这里插入图片描述在这里插入图片描述

朋友圈

在这里插入图片描述
在这里插入图片描述

功能简介

用户

注册
登陆
注销
用户信息修改
用户搜索
添加好友
删除好友
好友备注

聊天

图片,语音,定位,文字信息的发送
私聊
群聊
图片浏览

群组

创建
解散(群主的权限功能)
移除群成员(群主的权限功能)
邀请好友加入群组(群成员的功能)
修改群信息(群主的权限功能)
修改群内昵称(群成员的功能)
退出群组(群成员的功能)
转让群主(群主的权限功能)

朋友圈

动态发表,删除,点赞,评论
图片浏览
评论回复
访客记录,删除访客记录
删除通知
留言和留言删除

通知

系统通知
好友申请通知
评论和点赞通知
动态通知
留言通知
访客通知

通知操作:
删除通知
未读通知
标位已读

其他功能

会话表(index页面):删除对话
好友列表(users页面):分组导航

项目动图(手机端)展示

图片太大可以缩放网页查看或者在新的标签页查看图片

登陆注册

在这里插入图片描述

用户信息

在这里插入图片描述

users页面

在这里插入图片描述

群组

在这里插入图片描述

聊天

在这里插入图片描述
在这里插入图片描述

加好友

在这里插入图片描述
在这里插入图片描述

朋友圈

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

项目动图(H5端)展示

聊天

在这里插入图片描述

朋友圈

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 33
    点赞
  • 167
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
UniApp聊天App源码是指使用UniApp框架编写的用于聊天功能的应用程序的源代码。UniApp是一种跨平台的开发框架,可以基于Vue.js语法编写一次代码,同时适配多个平台,包括iOS、Android和Web等。 UniApp聊天App源码的开发思路是通过使用UniApp提供的API和组件,结合服务器端的接口实现一对一或多人实时聊天功能。它的功能包括发送文本信息、发送图片、发送语音、发送视频等,还可以实现消息的撤回和删除功能,同时支持消息的实时推送。 UniApp聊天App源码的开发需要具备一定的前端开发经验和Vue.js基础。首先,需要搭建好UniApp开发环境,然后在代码中引入相应的组件和API,实现用户登录、消息发送和接收等功能。在开发过程中,可以根据需求进行界面的美化和功能的扩展。最后,将代码打包发布到不同平台的应用商店,用户可以通过下载安装并使用该聊天AppUniApp聊天App源码的优势是跨平台性能好,一次开发可适配多个平台,大大减少了开发的工作量和成本。同时,UniApp还提供了丰富的组件和API,可以快速实现各种功能。另外,UniApp也具备良好的社区和文档支持,开发者可以通过查阅文档和与社区进行交流分享,快速解决开发中遇到的问题。 综上所述,UniApp聊天App源码是一种使用UniApp框架编写的聊天应用程序的源代码,利用UniApp的跨平台能力和丰富的组件和API,开发者可以快速实现功能丰富的聊天App,并将其发布到不同平台供用户使用。
评论 32
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值