uniapp-vue3-wechat聊天实例|uni-app+pinia2仿微信app

Uniapp_Vue3_Chat基于uni-app+vue3+pinia2+uv-ui跨三端(h5+小程序+APP端)仿微信聊天。

uni-vue3-wchat项目采用vue3 setup语法编码，支持编译到H5+小程序+App端。

技术栈

• 编辑器：HbuilderX 4.0.8
• 技术框架：Uniapp+Vue3+Pinia2+Vite4.x
• 组件库：uni-ui+uv-ui
• 弹窗组件：uv3-popup（uniapp+vue3多端自定义弹框组件）
• 自定义组件：uv3-navbar+uv3-tabbar组件
• 缓存服务：pinia-plugin-unistorage
• 编译支持：H5+小程序+APP端

项目结构目录

main.js配置

入口模板App.vue采用vue3 setup语法编码。

公共布局模板

项目结构采用顶部导航+主体内容区+底部区域三个模块。

uni-app+vue3实现九宫格图像

uniapp+vue3自定义顶部导航+底部菜单栏

uniapp+vue3聊天功能

目前该增强版输入框已经免费发布到插件市场，有需要的可以去下载使用。

https://cloud.tencent.com/developer/article/2400555

https://cloud.tencent.com/developer/article/2393406

Okey，综上就是uniapp+vue3+uni-ui实战开发微信app聊天的一些知识分享，希望对大家有所帮助！