uni-app聊天室、vue+uniapp仿微信聊天实例、uniapp仿微信App界面

文章分类:[uni-app] 发布时间:2020-11-22 20:11:18 作者:软盟软件 来源:软盟软件

uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一、介绍
运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息、表情(gif图),图片预览、地图位置、长按菜单、红包/钱包、仿微信朋友圈等功能。
二、测试效果
H5 + 小程序 + App端测试效果如下,实测多端效果均为一致。(后续大图统一展示App端)
 
二、技术选型
编辑器:HBuilder X
技术框架:uni-app + vue
状态管理:Vuex
iconfont图标:阿里字体图标库
自定义导航栏 + 底部Tabbar
弹窗组件:uniPop(基于uni-app封装模态弹窗)
测试环境:H5端 + 小程序 + App端(三端均兼容)
高德地图:vue-amap
项目介绍
基于 uni-app+vue+vuex+uniPop+swiper 等技术开发仿微信 App 聊天室实战项目,实现了发送消息、表情 (gif 动图),图片预览、地图位置、红包、仿微信朋友圈等功能。
 
项目中用到的自定义顶部导航栏及自定义弹窗:
 
uni-app 自定义 Modal 弹窗组件 | 仿 ios、微信弹窗效果
 
uni-app 自定义导航栏按钮 | uniapp 仿微信顶部导航条
 
技术栈
编辑器:HBuilder X
技术框架:uni-app + vue
状态管理:Vuex
iconfont 图标:阿里字体图标库
自定义导航栏 + 底部 Tabbar
弹窗组件:uniPop(基于 uni-app 封装模态弹窗)
测试环境:H5 端 + 小程序 + App 端(三端均兼容)
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接。
什么是websocket
WebSocket是Html5定义的一个新协议,与传统的http协议不同,该协议可以实现服务器与客户端之间全双工通信。简单来说,首先需要在客户端和服务器端建立起一个连接,这部分需要http。连接一旦建立,客户端和服务器端就处于平等的地位,可以相互发送数据,不存在请求和响应的区别。
选定了使用websocket后,为了能够快速搭建demo,我先到uniapp插件市场去搜索了一遍,暂时没有发现可用的websocket插件。
经过后续的搜索发现一款第三方的websocket推送服务:GoEasy,经过简单的测试,发现GoEasy比较好的支持uniapp。

我接下来给大家简单演示一下在uniapp中如何使用GoEasy实现websocket消息推送:
footer